commit 2378d297def434b701bb582b094fb087bc343376 Author: Mark MacKay Date: Thu May 17 17:50:00 2012 -0500 initial commit diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..3454e93 Binary files /dev/null and b/.DS_Store differ diff --git a/.svn/all-wcprops b/.svn/all-wcprops new file mode 100644 index 0000000..b9c894d --- /dev/null +++ b/.svn/all-wcprops @@ -0,0 +1,35 @@ +K 25 +svn:wc:ra_dav:version-url +V 24 +/svn/!svn/ver/2080/trunk +END +LICENSE +K 25 +svn:wc:ra_dav:version-url +V 32 +/svn/!svn/ver/2044/trunk/LICENSE +END +AUTHORS +K 25 +svn:wc:ra_dav:version-url +V 32 +/svn/!svn/ver/1563/trunk/AUTHORS +END +CHANGES +K 25 +svn:wc:ra_dav:version-url +V 32 +/svn/!svn/ver/2044/trunk/CHANGES +END +README +K 25 +svn:wc:ra_dav:version-url +V 30 +/svn/!svn/ver/143/trunk/README +END +Makefile +K 25 +svn:wc:ra_dav:version-url +V 33 +/svn/!svn/ver/2060/trunk/Makefile +END diff --git a/.svn/dir-prop-base b/.svn/dir-prop-base new file mode 100644 index 0000000..45ec68c --- /dev/null +++ b/.svn/dir-prop-base @@ -0,0 +1,6 @@ +K 13 +svn:mergeinfo +V 64 +/branches/fixtransforms:992-1070 +/branches/transformlist:897-933 +END diff --git a/.svn/entries b/.svn/entries new file mode 100644 index 0000000..441d4dc --- /dev/null +++ b/.svn/entries @@ -0,0 +1,234 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk +http://svg-edit.googlecode.com/svn + + + +2012-05-08T20:09:38.998857Z +2080 +rusnakp +has-props + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +test +dir + +LICENSE +file + + + + +2012-03-23T10:42:16.000000Z +2de10bee5aba2997d80b7a43eb148154 +2011-09-29T14:56:00.675535Z +2044 +rusnakp + + + + + + + + + + + + + + + + + + + + + +1087 + +AUTHORS +file + + + + +2012-03-23T10:42:16.000000Z +8009158a7750de0de912d9355abb9ac6 +2010-05-03T23:29:13.086772Z +1563 +rusnakp + + + + + + + + + + + + + + + + + + + + + +995 + +editor +dir + +opera-widget +dir + +docs +dir + +chrome-app +dir + +README +file + + + + +2012-03-23T10:42:16.000000Z +a08402165e55578ba5c7af29b0185a98 +2009-06-17T19:00:23.784445Z +143 +rusnakp + + + + + + + + + + + + + + + + + + + + + +417 + +clipart +dir + +build +dir + +wave +dir + +extras +dir + +CHANGES +file + + + + +2012-03-23T10:42:16.000000Z +74ed2c78b092891646a49b81f7b7c89d +2011-09-29T14:56:00.675535Z +2044 +rusnakp + + + + + + + + + + + + + + + + + + + + + +2666 + +firefox-extension +dir + +screencasts +dir + +Makefile +file + + + + +2012-03-23T10:42:16.000000Z +3fdd50a53e633648a8413eda96a820b6 +2012-03-17T17:45:28.575273Z +2060 +codedread + + + + + + + + + + + + + + + + + + + + + +2783 + +examples +dir + diff --git a/.svn/text-base/AUTHORS.svn-base b/.svn/text-base/AUTHORS.svn-base new file mode 100644 index 0000000..2e0fe8d --- /dev/null +++ b/.svn/text-base/AUTHORS.svn-base @@ -0,0 +1,22 @@ +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/.svn/text-base/CHANGES.svn-base b/.svn/text-base/CHANGES.svn-base new file mode 100644 index 0000000..9abfcef --- /dev/null +++ b/.svn/text-base/CHANGES.svn-base @@ -0,0 +1,97 @@ +2.5 - June 15, 2010 +------------------- +* Open Local Files (Firefox 3.6+ only) +* Import SVG into Drawing (Firefox 3.6+ only) +* Ability to create extensions/plugins +* Main menu and overal interface improvements +* Create and select elements outside the canvas +* Base support for the svg:use element +* Add/Edit Sub-paths +* Multiple path segment selection +* Radial Gradient support +* Connector lines +* Arrows & Markers +* Smoother freehand paths +* Foreign markup support (ForeignObject?/MathML) +* Configurable options +* File-loading options +* Eye-dropper tool (copy element style) +* Stroke linejoin and linecap options +* Export to PNG +* Blur tool +* Page-align single elements +* Inline text editing +* Line draw snapping with Shift key + +2.4 - January 11, 2010 +---------------------- +* Zoom +* Layers +* UI Localization +* Wireframe Mode +* Resizable UI (SVG icons) +* Set background color and/or image (for tracing) +* Convert Shapes to Paths +* X, Y coordinates for all elements +* Draggable Dialog boxes +* Select Non-Adjacent Elements +* Fixed-ratio resize +* Automatic Tool Switching +* Raster Images +* Group elements +* Add/Remove path nodes +* Curved Paths +* Floating point values for all attributes +* Text fields for all attributes +* Title element + +2.3 - September 08, 2009 +------------------------ +* Align Objects +* Rotate Objects +* Clone Objects +* Select Next/Prev Object +* Edit SVG Source +* Gradient picking +* Polygon Mode (Path Editing, Phase 1) + +2.2 - July 08, 2009 +------------------- +* Multiselect Mode +* Undo/Redo Actions +* Resize Elements +* Contextual tools for rect, circle, ellipse, line, text elements +* Some updated button images +* Stretched the UI to fit the browser window +* Resizing of the SVG canvas +* Upgraded to jPicker 1.0.8 + +2.1 - June 17, 2009 +------------------- +* tooltips added to all UI elements +* fix flyout menus +* ask before clearing the drawing (suggested by martin.vidner) +* control group, fill and stroke opacity +* fix flyouts when using color picker +* change license from GPLv2 to Apache License v2.0 +* replaced Farbtastic with jPicker, because of the license issues +* removed dependency on svgcanvas.svg, now created in JavaScript +* added Select tool +* using jQuery hosted by Google instead of local version +* allow dragging of elements +* save SVG file to separate tab +* create and edit text elements +* context panel tools +* change rect radius, font-family, font-size +* added keystroke shortcuts for all tools +* move to top/bottom + +2.0 - June 03, 2009 +------------------- +* rewritten SVG-edit, so now it uses OOP +* draw ellipse, square +* created HTML interface similar to Inkscape + +1.0 - February 06, 2009 +------------------- +* SVG-Edit released diff --git a/.svn/text-base/LICENSE.svn-base b/.svn/text-base/LICENSE.svn-base new file mode 100644 index 0000000..b98ac70 --- /dev/null +++ b/.svn/text-base/LICENSE.svn-base @@ -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/.svn/text-base/Makefile.svn-base b/.svn/text-base/Makefile.svn-base new file mode 100644 index 0000000..52b55c6 --- /dev/null +++ b/.svn/text-base/Makefile.svn-base @@ -0,0 +1,97 @@ +NAME=svg-edit +VERSION=2.6 +PACKAGE=$(NAME)-$(VERSION) +MAKEDOCS=naturaldocs/NaturalDocs +CLOSURE=build/tools/closure-compiler.jar +ZIP=zip + +# All files that will be compiled by the Closure compiler. + +JS_FILES=\ + contextmenu/jquery.contextmenu.js \ + browser.js \ + svgtransformlist.js \ + math.js \ + units.js \ + svgutils.js \ + sanitize.js \ + history.js \ + select.js \ + draw.js \ + path.js \ + svgcanvas.js \ + svg-editor.js \ + contextmenu.js \ + locale/locale.js + +JS_INPUT_FILES=$(addprefix editor/, $(JS_FILES)) +JS_BUILD_FILES=$(addprefix build/$(PACKAGE)/, $(JS_FILES)) +CLOSURE_JS_ARGS=$(addprefix --js , $(JS_INPUT_FILES)) +COMPILED_JS=editor/svgedit.compiled.js + +all: release firefox opera + +# The build directory relies on the JS being compiled. +build/$(PACKAGE): $(COMPILED_JS) + rm -rf config + mkdir config + if [ -x $(MAKEDOCS) ] ; then $(MAKEDOCS) -i editor/ -o html docs/ -p config/ -oft -r ; fi + + # Make build directory and copy all editor contents into it + mkdir -p build/$(PACKAGE) + cp -r editor/* build/$(PACKAGE) + + # Remove all hidden .svn directories + -find build/$(PACKAGE) -name .svn -type d | xargs rm -rf {} \; + + # Create the release version of the main HTML file. + build/tools/ship.py --i=editor/svg-editor.html --on=svg_edit_release > build/$(PACKAGE)/svg-editor.html + +# NOTE: Some files are not ready for the Closure compiler: (jquery) +# NOTE: Our code safely compiles under SIMPLE_OPTIMIZATIONS +# NOTE: Our code is *not* ready for ADVANCED_OPTIMIZATIONS +# NOTE: WHITESPACE_ONLY and --formatting PRETTY_PRINT is helpful for debugging. +$(COMPILED_JS): + java -jar $(CLOSURE) \ + --compilation_level SIMPLE_OPTIMIZATIONS \ + $(CLOSURE_JS_ARGS) \ + --js_output_file $(COMPILED_JS) + +compile: $(COMPILED_JS) + +release: build/$(PACKAGE) + cd build ; $(ZIP) $(PACKAGE).zip -r $(PACKAGE) ; cd .. + tar -z -c -f build/$(PACKAGE)-src.tar.gz \ + --exclude='\.svn' \ + --exclude='build/*' \ + . + +firefox: build/$(PACKAGE) + mkdir -p build/firefox/content/editor + cp -r firefox-extension/* build/firefox + rm -rf build/firefox/content/.svn + cp -r build/$(PACKAGE)/* build/firefox/content/editor + rm -f build/firefox/content/editor/embedapi.js + cd build/firefox ; $(ZIP) ../$(PACKAGE).xpi -r * ; cd ../.. + +opera: build/$(PACKAGE) + mkdir -p build/opera/editor + cp opera-widget/* build/opera + cp -r build/$(PACKAGE)/* build/opera/editor + cd build/opera ; $(ZIP) ../$(PACKAGE).wgt -r * ; cd ../.. + +chrome: + mkdir -p build/svgedit_app + cp -a chrome-app/* build/svgedit_app + cd build ; $(ZIP) -r $(PACKAGE)-crx.zip svgedit_app ; rm -rf svgedit_app; cd .. + +clean: + rm -rf config + rm -rf build/$(PACKAGE) + rm -rf build/firefox + rm -rf build/opera + rm -rf build/$(PACKAGE).zip + rm -rf build/$(PACKAGE)-src.tar.gz + rm -rf build/$(PACKAGE).xpi + rm -rf build/$(PACKAGE).wgt + rm -rf $(COMPILED_JS) diff --git a/.svn/text-base/README.svn-base b/.svn/text-base/README.svn-base new file mode 100644 index 0000000..f8fe943 --- /dev/null +++ b/.svn/text-base/README.svn-base @@ -0,0 +1,21 @@ +SVG-edit, a web based SVG editor + +http://code.google.com/p/svg-edit/ + +see AUTHORS file for authors + +----- + +SVG-edit contains code from these projects: + +jQuery JavaScript Library v1.3.2 +http://jquery.com/ +Copyright (c) 2009 John Resig + +jQuery js-Hotkeys +http://code.google.com/p/js-hotkeys/ +Copyright (c) 2008 Tzury Bar Yochay + +jPicker +http://www.digitalmagicpro.com/jPicker/ +Copyright (c) 2009 Christopher T. Tillman diff --git a/AUTHORS b/AUTHORS new file mode 100644 index 0000000..2e0fe8d --- /dev/null +++ b/AUTHORS @@ -0,0 +1,22 @@ +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/CHANGES b/CHANGES new file mode 100644 index 0000000..9abfcef --- /dev/null +++ b/CHANGES @@ -0,0 +1,97 @@ +2.5 - June 15, 2010 +------------------- +* Open Local Files (Firefox 3.6+ only) +* Import SVG into Drawing (Firefox 3.6+ only) +* Ability to create extensions/plugins +* Main menu and overal interface improvements +* Create and select elements outside the canvas +* Base support for the svg:use element +* Add/Edit Sub-paths +* Multiple path segment selection +* Radial Gradient support +* Connector lines +* Arrows & Markers +* Smoother freehand paths +* Foreign markup support (ForeignObject?/MathML) +* Configurable options +* File-loading options +* Eye-dropper tool (copy element style) +* Stroke linejoin and linecap options +* Export to PNG +* Blur tool +* Page-align single elements +* Inline text editing +* Line draw snapping with Shift key + +2.4 - January 11, 2010 +---------------------- +* Zoom +* Layers +* UI Localization +* Wireframe Mode +* Resizable UI (SVG icons) +* Set background color and/or image (for tracing) +* Convert Shapes to Paths +* X, Y coordinates for all elements +* Draggable Dialog boxes +* Select Non-Adjacent Elements +* Fixed-ratio resize +* Automatic Tool Switching +* Raster Images +* Group elements +* Add/Remove path nodes +* Curved Paths +* Floating point values for all attributes +* Text fields for all attributes +* Title element + +2.3 - September 08, 2009 +------------------------ +* Align Objects +* Rotate Objects +* Clone Objects +* Select Next/Prev Object +* Edit SVG Source +* Gradient picking +* Polygon Mode (Path Editing, Phase 1) + +2.2 - July 08, 2009 +------------------- +* Multiselect Mode +* Undo/Redo Actions +* Resize Elements +* Contextual tools for rect, circle, ellipse, line, text elements +* Some updated button images +* Stretched the UI to fit the browser window +* Resizing of the SVG canvas +* Upgraded to jPicker 1.0.8 + +2.1 - June 17, 2009 +------------------- +* tooltips added to all UI elements +* fix flyout menus +* ask before clearing the drawing (suggested by martin.vidner) +* control group, fill and stroke opacity +* fix flyouts when using color picker +* change license from GPLv2 to Apache License v2.0 +* replaced Farbtastic with jPicker, because of the license issues +* removed dependency on svgcanvas.svg, now created in JavaScript +* added Select tool +* using jQuery hosted by Google instead of local version +* allow dragging of elements +* save SVG file to separate tab +* create and edit text elements +* context panel tools +* change rect radius, font-family, font-size +* added keystroke shortcuts for all tools +* move to top/bottom + +2.0 - June 03, 2009 +------------------- +* rewritten SVG-edit, so now it uses OOP +* draw ellipse, square +* created HTML interface similar to Inkscape + +1.0 - February 06, 2009 +------------------- +* SVG-Edit released 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/Makefile b/Makefile new file mode 100644 index 0000000..52b55c6 --- /dev/null +++ b/Makefile @@ -0,0 +1,97 @@ +NAME=svg-edit +VERSION=2.6 +PACKAGE=$(NAME)-$(VERSION) +MAKEDOCS=naturaldocs/NaturalDocs +CLOSURE=build/tools/closure-compiler.jar +ZIP=zip + +# All files that will be compiled by the Closure compiler. + +JS_FILES=\ + contextmenu/jquery.contextmenu.js \ + browser.js \ + svgtransformlist.js \ + math.js \ + units.js \ + svgutils.js \ + sanitize.js \ + history.js \ + select.js \ + draw.js \ + path.js \ + svgcanvas.js \ + svg-editor.js \ + contextmenu.js \ + locale/locale.js + +JS_INPUT_FILES=$(addprefix editor/, $(JS_FILES)) +JS_BUILD_FILES=$(addprefix build/$(PACKAGE)/, $(JS_FILES)) +CLOSURE_JS_ARGS=$(addprefix --js , $(JS_INPUT_FILES)) +COMPILED_JS=editor/svgedit.compiled.js + +all: release firefox opera + +# The build directory relies on the JS being compiled. +build/$(PACKAGE): $(COMPILED_JS) + rm -rf config + mkdir config + if [ -x $(MAKEDOCS) ] ; then $(MAKEDOCS) -i editor/ -o html docs/ -p config/ -oft -r ; fi + + # Make build directory and copy all editor contents into it + mkdir -p build/$(PACKAGE) + cp -r editor/* build/$(PACKAGE) + + # Remove all hidden .svn directories + -find build/$(PACKAGE) -name .svn -type d | xargs rm -rf {} \; + + # Create the release version of the main HTML file. + build/tools/ship.py --i=editor/svg-editor.html --on=svg_edit_release > build/$(PACKAGE)/svg-editor.html + +# NOTE: Some files are not ready for the Closure compiler: (jquery) +# NOTE: Our code safely compiles under SIMPLE_OPTIMIZATIONS +# NOTE: Our code is *not* ready for ADVANCED_OPTIMIZATIONS +# NOTE: WHITESPACE_ONLY and --formatting PRETTY_PRINT is helpful for debugging. +$(COMPILED_JS): + java -jar $(CLOSURE) \ + --compilation_level SIMPLE_OPTIMIZATIONS \ + $(CLOSURE_JS_ARGS) \ + --js_output_file $(COMPILED_JS) + +compile: $(COMPILED_JS) + +release: build/$(PACKAGE) + cd build ; $(ZIP) $(PACKAGE).zip -r $(PACKAGE) ; cd .. + tar -z -c -f build/$(PACKAGE)-src.tar.gz \ + --exclude='\.svn' \ + --exclude='build/*' \ + . + +firefox: build/$(PACKAGE) + mkdir -p build/firefox/content/editor + cp -r firefox-extension/* build/firefox + rm -rf build/firefox/content/.svn + cp -r build/$(PACKAGE)/* build/firefox/content/editor + rm -f build/firefox/content/editor/embedapi.js + cd build/firefox ; $(ZIP) ../$(PACKAGE).xpi -r * ; cd ../.. + +opera: build/$(PACKAGE) + mkdir -p build/opera/editor + cp opera-widget/* build/opera + cp -r build/$(PACKAGE)/* build/opera/editor + cd build/opera ; $(ZIP) ../$(PACKAGE).wgt -r * ; cd ../.. + +chrome: + mkdir -p build/svgedit_app + cp -a chrome-app/* build/svgedit_app + cd build ; $(ZIP) -r $(PACKAGE)-crx.zip svgedit_app ; rm -rf svgedit_app; cd .. + +clean: + rm -rf config + rm -rf build/$(PACKAGE) + rm -rf build/firefox + rm -rf build/opera + rm -rf build/$(PACKAGE).zip + rm -rf build/$(PACKAGE)-src.tar.gz + rm -rf build/$(PACKAGE).xpi + rm -rf build/$(PACKAGE).wgt + rm -rf $(COMPILED_JS) diff --git a/README b/README new file mode 100644 index 0000000..f8fe943 --- /dev/null +++ b/README @@ -0,0 +1,21 @@ +SVG-edit, a web based SVG editor + +http://code.google.com/p/svg-edit/ + +see AUTHORS file for authors + +----- + +SVG-edit contains code from these projects: + +jQuery JavaScript Library v1.3.2 +http://jquery.com/ +Copyright (c) 2009 John Resig + +jQuery js-Hotkeys +http://code.google.com/p/js-hotkeys/ +Copyright (c) 2008 Tzury Bar Yochay + +jPicker +http://www.digitalmagicpro.com/jPicker/ +Copyright (c) 2009 Christopher T. Tillman diff --git a/build/.svn/all-wcprops b/build/.svn/all-wcprops new file mode 100644 index 0000000..d911b94 --- /dev/null +++ b/build/.svn/all-wcprops @@ -0,0 +1,5 @@ +K 25 +svn:wc:ra_dav:version-url +V 30 +/svn/!svn/ver/1934/trunk/build +END diff --git a/build/.svn/entries b/build/.svn/entries new file mode 100644 index 0000000..98064c1 --- /dev/null +++ b/build/.svn/entries @@ -0,0 +1,31 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/build +http://svg-edit.googlecode.com/svn + + + +2011-01-18T19:04:34.428452Z +1934 +codedread + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +tools +dir + diff --git a/build/tools/.svn/all-wcprops b/build/tools/.svn/all-wcprops new file mode 100644 index 0000000..177d432 --- /dev/null +++ b/build/tools/.svn/all-wcprops @@ -0,0 +1,35 @@ +K 25 +svn:wc:ra_dav:version-url +V 36 +/svn/!svn/ver/1934/trunk/build/tools +END +closure-compiler.jar +K 25 +svn:wc:ra_dav:version-url +V 57 +/svn/!svn/ver/1833/trunk/build/tools/closure-compiler.jar +END +COPYING +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1833/trunk/build/tools/COPYING +END +ship.py +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1934/trunk/build/tools/ship.py +END +README +K 25 +svn:wc:ra_dav:version-url +V 43 +/svn/!svn/ver/1833/trunk/build/tools/README +END +yuicompressor.jar +K 25 +svn:wc:ra_dav:version-url +V 54 +/svn/!svn/ver/1480/trunk/build/tools/yuicompressor.jar +END diff --git a/build/tools/.svn/entries b/build/tools/.svn/entries new file mode 100644 index 0000000..6d5878d --- /dev/null +++ b/build/tools/.svn/entries @@ -0,0 +1,198 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/build/tools +http://svg-edit.googlecode.com/svn + + + +2011-01-18T19:04:34.428452Z +1934 +codedread + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +closure-compiler.jar +file + + + + +2012-03-23T10:42:16.000000Z +e805ba926e14ba85aa09334aac487533 +2010-10-28T16:47:39.333879Z +1833 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +3939454 + +COPYING +file + + + + +2012-03-23T10:42:16.000000Z +3b83ef96387f14655fc854ddc3c6bd57 +2010-10-28T16:47:39.333879Z +1833 +codedread + + + + + + + + + + + + + + + + + + + + + +11358 + +ship.py +file + + + + +2012-03-23T10:42:16.000000Z +a646b846ec8b02ea86aa4b7179394963 +2011-01-18T19:04:34.428452Z +1934 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +4264 + +README +file + + + + +2012-03-23T10:42:16.000000Z +52caab2236380abcd7ed78f0c55d9213 +2010-10-28T16:47:39.333879Z +1833 +codedread + + + + + + + + + + + + + + + + + + + + + +7143 + +yuicompressor.jar +file + + + + +2012-03-23T10:42:16.000000Z +15af1cac844bb711c44b19b66444c853 +2010-03-28T13:59:52.102843Z +1480 +rusnakp +has-props + + + + + + + + + + + + + + + + + + + + +851359 + diff --git a/build/tools/.svn/prop-base/closure-compiler.jar.svn-base b/build/tools/.svn/prop-base/closure-compiler.jar.svn-base new file mode 100644 index 0000000..5e9587e --- /dev/null +++ b/build/tools/.svn/prop-base/closure-compiler.jar.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 24 +application/octet-stream +END diff --git a/build/tools/.svn/prop-base/ship.py.svn-base b/build/tools/.svn/prop-base/ship.py.svn-base new file mode 100644 index 0000000..869ac71 --- /dev/null +++ b/build/tools/.svn/prop-base/ship.py.svn-base @@ -0,0 +1,5 @@ +K 14 +svn:executable +V 1 +* +END diff --git a/build/tools/.svn/prop-base/yuicompressor.jar.svn-base b/build/tools/.svn/prop-base/yuicompressor.jar.svn-base new file mode 100644 index 0000000..5e9587e --- /dev/null +++ b/build/tools/.svn/prop-base/yuicompressor.jar.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 24 +application/octet-stream +END diff --git a/build/tools/.svn/text-base/COPYING.svn-base b/build/tools/.svn/text-base/COPYING.svn-base new file mode 100644 index 0000000..d645695 --- /dev/null +++ b/build/tools/.svn/text-base/COPYING.svn-base @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/build/tools/.svn/text-base/README.svn-base b/build/tools/.svn/text-base/README.svn-base new file mode 100644 index 0000000..d3c90e7 --- /dev/null +++ b/build/tools/.svn/text-base/README.svn-base @@ -0,0 +1,289 @@ +/* + * Copyright 2009 Google Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// +// Contents +// + +The Closure Compiler performs checking, instrumentation, and +optimizations on JavaScript code. The purpose of this README is to +explain how to build and run the Closure Compiler. + +The Closure Compiler requires Java 6 or higher. +http://www.java.com/ + + +// +// Building The Closure Compiler +// + +There are three ways to get a Closure Compiler executable. + +1) Use one we built for you. + +Pre-built Closure binaries can be found at +http://code.google.com/p/closure-compiler/downloads/list + + +2) Check out the source and build it with Apache Ant. + +First, check out the full source tree of the Closure Compiler. There +are instructions on how to do this at the project site. +http://code.google.com/p/closure-compiler/source/checkout + +Apache Ant is a cross-platform build tool. +http://ant.apache.org/ + +At the root of the source tree, there is an Ant file named +build.xml. To use it, navigate to the same directory and type the +command + +ant jar + +This will produce a jar file called "build/compiler.jar". + + +3) Check out the source and build it with Eclipse. + +Eclipse is a cross-platform IDE. +http://www.eclipse.org/ + +Under Eclipse's File menu, click "New > Project ..." and create a +"Java Project." You will see an options screen. Give the project a +name, select "Create project from existing source," and choose the +root of the checked-out source tree as the existing directory. Verify +that you are using JRE version 6 or higher. + +Eclipse can use the build.xml file to discover rules. When you +navigate to the build.xml file, you will see all the build rules in +the "Outline" pane. Run the "jar" rule to build the compiler in +build/compiler.jar. + + +// +// Running The Closure Compiler +// + +Once you have the jar binary, running the Closure Compiler is straightforward. + +On the command line, type + +java -jar compiler.jar + +This starts the compiler in interactive mode. Type + +var x = 17 + 25; + +then hit "Enter", then hit "Ctrl-Z" (on Windows) or "Ctrl-D" (on Mac or Linux) +and "Enter" again. The Compiler will respond: + +var x=42; + +The Closure Compiler has many options for reading input from a file, +writing output to a file, checking your code, and running +optimizations. To learn more, type + +java -jar compiler.jar --help + +You can read more detailed documentation about the many flags at +http://code.google.com/closure/compiler/docs/gettingstarted_app.html + + +// +// Compiling Multiple Scripts +// + +If you have multiple scripts, you should compile them all together with +one compile command. + +java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js + +The Closure Compiler will concatenate the files in the order they're +passed at the command line. + +If you need to compile many, many scripts together, you may start to +run into problems with managing dependencies between scripts. You +should check out the Closure Library. It contains functions for +enforcing dependencies between scripts, and a tool called calcdeps.py +that knows how to give scripts to the Closure Compiler in the right +order. + +http://code.google.com/p/closure-library/ + +// +// Licensing +// + +Unless otherwise stated, all source files are licensed under +the Apache License, Version 2.0. + + +----- +Code under: +src/com/google/javascript/rhino +test/com/google/javascript/rhino + +URL: http://www.mozilla.org/rhino +Version: 1.5R3, with heavy modifications +License: Netscape Public License and MPL / GPL dual license + +Description: A partial copy of Mozilla Rhino. Mozilla Rhino is an +implementation of JavaScript for the JVM. The JavaScript parser and +the parse tree data structures were extracted and modified +significantly for use by Google's JavaScript compiler. + +Local Modifications: The packages have been renamespaced. All code not +relavant to parsing has been removed. A JSDoc parser and static typing +system have been added. + + +----- +Code in: +lib/libtrunk_rhino_parser_jarjared.jar + +Rhino +URL: http://www.mozilla.org/rhino +Version: Trunk +License: Netscape Public License and MPL / GPL dual license + +Description: Mozilla Rhino is an implementation of JavaScript for the JVM. + +Local Modifications: None. We've used JarJar to renamespace the code +post-compilation. See: +http://code.google.com/p/jarjar/ + + +----- +Code in: +lib/args4j_deploy.jar + +Args4j +URL: https://args4j.dev.java.net/ +Version: 2.0.9 +License: MIT + +Description: +args4j is a small Java class library that makes it easy to parse command line +options/arguments in your CUI application. + +Local Modifications: None. + + +----- +Code in: +lib/guava-r06.jar + +Guava Libraries +URL: http://code.google.com/p/guava-libraries/ +Version: R6 +License: Apache License 2.0 + +Description: Google's core Java libraries. + +Local Modifications: None. + + +----- +Code in: +lib/hamcrest-core-1.1.jar + +Hamcrest +URL: http://code.google.com/p/hamcrest +License: BSD +License File: LICENSE + +Description: +Provides a library of matcher objects (also known as constraints or +predicates) allowing 'match' rules to be defined declaratively, to be used in +other frameworks. Typical scenarios include testing frameworks, mocking +libraries and UI validation rules. + +Local modifications: +The original jars contained both source code and compiled classes. + +hamcrest-core-1.1.jar just contains the compiled classes. + + + +----- +Code in: +lib/jsr305.jar + +Annotations for software defect detection +URL: http://code.google.com/p/jsr-305/ +Version: svn revision 47 +License: BSD License + +Description: Annotations for software defect detection. + +Local Modifications: None. + + +---- +Code in: +lib/junit.jar + +JUnit +URL: http://sourceforge.net/projects/junit/ +Version: 4.5 +License: Common Public License 1.0 + +Description: A framework for writing and running automated tests in Java. + +Local Modifications: None. + + +--- +Code in: +lib/protobuf-java-2.3.0.jar + +Protocol Buffers +URL: http://code.google.com/p/protobuf/ +Version: 2.3.0 +License: New BSD License + +Description: Supporting libraries for protocol buffers, +an encoding of structured data. + +Local Modifications: None + + +--- +Code in: +lib/ant_deploy.jar + +URL: http://ant.apache.org/bindownload.cgi +Version: 1.6.5 +License: Apache License 2.0 +Description: + Ant is a Java based build tool. In theory it is kind of like "make" + without make's wrinkles and with the full portability of pure java code. + +Local Modifications: + Modified apache-ant-1.6.5/bin/ant to look in the ant.runfiles directory + + +--- +Code in: +lib/json.jar +URL: http://json.org/java/index.html +Version: JSON version 2 +License: MIT license +Description: +JSON is a set of java files for use in transmitting data in JSON format. + +Local Modifications: None + diff --git a/build/tools/.svn/text-base/closure-compiler.jar.svn-base b/build/tools/.svn/text-base/closure-compiler.jar.svn-base new file mode 100644 index 0000000..4dfa5ad Binary files /dev/null and b/build/tools/.svn/text-base/closure-compiler.jar.svn-base differ diff --git a/build/tools/.svn/text-base/ship.py.svn-base b/build/tools/.svn/text-base/ship.py.svn-base new file mode 100644 index 0000000..d2c3052 --- /dev/null +++ b/build/tools/.svn/text-base/ship.py.svn-base @@ -0,0 +1,155 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +# ship.py +# +# Licensed under the Apache 2 License as is the rest of the project +# Copyright (c) 2011 Jeff Schiller +# +# This script has very little real-world application. It is only used in our pure-client web app +# served on GoogleCode so we can have one HTML file, run a build script and generate a 'release' +# version without having to maintain two separate HTML files. It does this by evaluating +# 'processing comments' that are suspicously similar to IE conditional comments and then outputting +# a new HTML file after evaluating particular variables. +# +# This script takes the following inputs: +# +# * a HTML file (--i=in.html) +# * a series of flag names (--on=Foo --on=Bar) +# +# Example: +# +# in.html: +# +# BAR! +# +# +# $ ship.py --i in.html --on foo +# +# out.html: +# +# FOO! +# +# +# It has the following limitations: +# +# 1) Only if-else-endif are currently supported. +# 2) All processing comments must be on one line with no other non-whitespace characters. +# 3) Comments cannot be nested. + +import optparse +import os + +inside_if = False +last_if_true = False + +_options_parser = optparse.OptionParser( + usage='%prog --i input.html [--on flag1]', + description=('Rewrites an HTML file based on conditional comments and flags')) +_options_parser.add_option('--i', + action='store', dest='input_html_file', help='Input HTML filename') +_options_parser.add_option('--on', + action='append', type='string', dest='enabled_flags', + help='name of flag to enable') + +def parse_args(args=None): + options, rargs = _options_parser.parse_args(args) + return options, (None, None) + +def parseComment(line, line_num, enabled_flags): + global inside_if + global last_if_true + + start = line.find('{') + end = line.find('}') + statement = line[start+1:end].strip() + if statement.startswith('if '): + if inside_if == True: + print 'Fatal Error: Nested {if} found on line ' + str(line_num) + print line + quit() + + # Evaluate whether the expression is true/false. + # only one variable name allowed for now + variable_name = statement[3:].strip() + if variable_name in enabled_flags: + last_if_true = True + line = '' + else: + last_if_true = False + line = '' + + # invert the logic so the endif clause is closed properly + last_if_true = not last_if_true + + # ensure we don't have two else statements in the same if + inside_if = 'else' + + elif statement == 'endif': + if inside_if == False: + print 'Fatal Error: {endif} found without {if} on line ' + str(line_num) + print line + quit() + + if last_if_true: + line = '' + else: + line = '' + + inside_if = False + + return line + + +def ship(inFileName, enabled_flags): + # read in HTML file + lines = file(inFileName, 'r').readlines() + out_lines = [] + i = 0 + + # loop for each line of markup + for line in lines: + strline = line.strip() + # if we find a comment, process it and print out + if strline.startswith(' +# BAR! +# +# +# $ ship.py --i in.html --on foo +# +# out.html: +# +# FOO! +# +# +# It has the following limitations: +# +# 1) Only if-else-endif are currently supported. +# 2) All processing comments must be on one line with no other non-whitespace characters. +# 3) Comments cannot be nested. + +import optparse +import os + +inside_if = False +last_if_true = False + +_options_parser = optparse.OptionParser( + usage='%prog --i input.html [--on flag1]', + description=('Rewrites an HTML file based on conditional comments and flags')) +_options_parser.add_option('--i', + action='store', dest='input_html_file', help='Input HTML filename') +_options_parser.add_option('--on', + action='append', type='string', dest='enabled_flags', + help='name of flag to enable') + +def parse_args(args=None): + options, rargs = _options_parser.parse_args(args) + return options, (None, None) + +def parseComment(line, line_num, enabled_flags): + global inside_if + global last_if_true + + start = line.find('{') + end = line.find('}') + statement = line[start+1:end].strip() + if statement.startswith('if '): + if inside_if == True: + print 'Fatal Error: Nested {if} found on line ' + str(line_num) + print line + quit() + + # Evaluate whether the expression is true/false. + # only one variable name allowed for now + variable_name = statement[3:].strip() + if variable_name in enabled_flags: + last_if_true = True + line = '' + else: + last_if_true = False + line = '' + + # invert the logic so the endif clause is closed properly + last_if_true = not last_if_true + + # ensure we don't have two else statements in the same if + inside_if = 'else' + + elif statement == 'endif': + if inside_if == False: + print 'Fatal Error: {endif} found without {if} on line ' + str(line_num) + print line + quit() + + if last_if_true: + line = '' + else: + line = '' + + inside_if = False + + return line + + +def ship(inFileName, enabled_flags): + # read in HTML file + lines = file(inFileName, 'r').readlines() + out_lines = [] + i = 0 + + # loop for each line of markup + for line in lines: + strline = line.strip() + # if we find a comment, process it and print out + if strline.startswith(' +image/svg+xml diff --git a/clipart/moon.svg b/clipart/moon.svg new file mode 100644 index 0000000..179fa66 --- /dev/null +++ b/clipart/moon.svg @@ -0,0 +1,13 @@ + + + + Layer 1 + + + + + + + + + diff --git a/clipart/star.svg b/clipart/star.svg new file mode 100644 index 0000000..62bb89a --- /dev/null +++ b/clipart/star.svg @@ -0,0 +1,4 @@ + + + + diff --git a/clipart/sun.svg b/clipart/sun.svg new file mode 100644 index 0000000..df2f5b7 --- /dev/null +++ b/clipart/sun.svg @@ -0,0 +1,3 @@ + + +image/svg+xml diff --git a/docs/.svn/all-wcprops b/docs/.svn/all-wcprops new file mode 100644 index 0000000..74f5c87 --- /dev/null +++ b/docs/.svn/all-wcprops @@ -0,0 +1,11 @@ +K 25 +svn:wc:ra_dav:version-url +V 29 +/svn/!svn/ver/1621/trunk/docs +END +index.html +K 25 +svn:wc:ra_dav:version-url +V 40 +/svn/!svn/ver/1621/trunk/docs/index.html +END diff --git a/docs/.svn/entries b/docs/.svn/entries new file mode 100644 index 0000000..ff8bf5d --- /dev/null +++ b/docs/.svn/entries @@ -0,0 +1,77 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/docs +http://svg-edit.googlecode.com/svn + + + +2010-07-01T20:14:12.878000Z +1621 +adeveria + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +files +dir + +styles +dir + +search +dir + +javascript +dir + +index +dir + +index.html +file + + + + +2012-03-23T10:42:00.000000Z +878ecacad20d226bdd284cd4fee8827c +2010-07-01T20:14:12.878000Z +1621 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +94 + diff --git a/docs/.svn/prop-base/index.html.svn-base b/docs/.svn/prop-base/index.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/.svn/prop-base/index.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/.svn/text-base/index.html.svn-base b/docs/.svn/text-base/index.html.svn-base new file mode 100644 index 0000000..635c317 --- /dev/null +++ b/docs/.svn/text-base/index.html.svn-base @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/files/.svn/all-wcprops b/docs/files/.svn/all-wcprops new file mode 100644 index 0000000..3d4cdb5 --- /dev/null +++ b/docs/files/.svn/all-wcprops @@ -0,0 +1,11 @@ +K 25 +svn:wc:ra_dav:version-url +V 35 +/svn/!svn/ver/1620/trunk/docs/files +END +svgcanvas-js.html +K 25 +svn:wc:ra_dav:version-url +V 53 +/svn/!svn/ver/1620/trunk/docs/files/svgcanvas-js.html +END diff --git a/docs/files/.svn/entries b/docs/files/.svn/entries new file mode 100644 index 0000000..45f8ff5 --- /dev/null +++ b/docs/files/.svn/entries @@ -0,0 +1,62 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/docs/files +http://svg-edit.googlecode.com/svn + + + +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +svgcanvas-js.html +file + + + + +2012-03-23T10:42:00.000000Z +974cd2f187f619f9c4a74901acc81683 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +284514 + diff --git a/docs/files/.svn/prop-base/svgcanvas-js.html.svn-base b/docs/files/.svn/prop-base/svgcanvas-js.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/files/.svn/prop-base/svgcanvas-js.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/files/.svn/text-base/svgcanvas-js.html.svn-base b/docs/files/.svn/text-base/svgcanvas-js.html.svn-base new file mode 100644 index 0000000..6f1b0b3 --- /dev/null +++ b/docs/files/.svn/text-base/svgcanvas-js.html.svn-base @@ -0,0 +1,426 @@ + + +SvgCanvas + + + + + + + + + +

SvgCanvas

The main SvgCanvas class that manages all SVG-related functions

Parameters

containerThe container HTML element that should hold the SVG root element
configAn object that contains configuration data
Summary
SvgCanvasThe main SvgCanvas class that manages all SVG-related functions
Utils.toXmlConverts characters in a string to XML-friendly entities.
Utils.fromXmlConverts XML entities in a string to single characters.
Utils.encode64Converts a string to base64
Utils.decode64Converts a string from base64
Utils.convertToXMLReferencesConverts a string to use XML references
rectsIntersectCheck if two rectangles (BBoxes objects) intersect each other
snapToAngleReturns a 45 degree angle coordinate associated with the two given coordinates
text2xmlCross-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
Unit conversion functions
convertToNumConverts given values to numbers.
setUnitAttrSets an element’s attribute based on the unit in its current value.
isValidUnitCheck if an attribute’s value is in a valid format
Undo/Redo history management
ChangeElementCommandHistory command to make a change to an element.
ChangeElementCommand.applyPerforms the stored change action
ChangeElementCommand.unapplyReverses the stored change action
ChangeElementCommand.elementsReturns array with element associated with this command
InsertElementCommandHistory command for an element that was added to the DOM
InsertElementCommand.applyRe-Inserts the new element
InsertElementCommand.unapplyRemoves the element
InsertElementCommand.elementsReturns array with element associated with this command
RemoveElementCommandHistory command for an element removed from the DOM
RemoveElementCommand.applyRe-removes the new element
RemoveElementCommand.unapplyRe-adds the new element
RemoveElementCommand.elementsReturns array with element associated with this command
MoveElementCommandHistory command for an element that had its DOM position changed
MoveElementCommand.unapplyRe-positions the element
MoveElementCommand.unapplyPositions the element back to its original location
MoveElementCommand.elementsReturns array with element associated with this command
BatchCommandHistory command that can contain/execute multiple other commands
BatchCommand.applyRuns “apply” on all subcommands
BatchCommand.unapplyRuns “unapply” on all subcommands
BatchCommand.elementsIterate through all our subcommands and returns all the elements we are changing
BatchCommand.addSubCommandAdds a given command to the history stack
BatchCommand.isEmptyReturns a boolean indicating whether or not the batch command is empty
resetUndoStackResets the undo stack, effectively clearing the undo/redo history
undoMgr.getUndoStackSizeInteger with the current size of the undo history stack
undoMgr.getRedoStackSizeInteger with the current size of the redo history stack
undoMgr.getNextUndoCommandTextString associated with the next undo command
undoMgr.getNextRedoCommandTextString associated with the next redo command
undoMgr.undoPerforms an undo step
undoMgr.redoPerforms a redo step
addCommandToHistoryAdds a command object to the undo history stack
beginUndoableChangeThis function tells the canvas to remember the old values of the attrName attribute for each element sent in.
finishUndoableChangeThis function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
SelectorPrivate class for DOM element selection boxes
Functions
Selector.resetUsed to reset the id and element that the selector is attached to
Selector.showGripsShow the resize grips of this selector
Selector.updateGripCursorsUpdates cursors for corner grips on rotation so arrows point the right way
Selector.resizeUpdates the selector to match the element’s size
SelectorManagerPublic class to manage all selector objects (selection boxes)
SelectorManager.initGroupResets the parent selector group element
SelectorManager.requestSelectorReturns the selector based on the given element
SelectorManager.releaseSelectorRemoves the selector of the given element (hides selection box)
SelectorManager.getRubberBandBoxReturns the rubberBandBox DOM element.
Helper functions
walkTreeWalks the tree and executes the callback on each element in a top-down fashion
walkTreePostWalks the tree and executes the callback on each element in a depth-first fashion
assignAttributesAssigns multiple attributes to an element.
cleanupElementRemove unneeded (default) attributes, makes resulting SVG smaller
addSvgElementFromJsonCreate 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
addExtensionAdd an extension to the editor
shortFloatRounds a given value to a float with number of digits defined in save_options
getStrokedBBoxGet the bounding box for one or more stroked and/or transformed elements
getVisibleElementsGet all elements that have a BBox (excludes <defs>, <title>, etc).
copyElemCreate a clone of an element, updating its ID and its children’s IDs when needed
getElemGet a DOM element by ID within the SVG root element.
getIdReturns the last created DOM element ID string
getNextIdCreates and returns a unique ID string for a DOM element
bindAttaches a callback function to an event
setIdPrefixChanges the ID prefix to the given value
sanitizeSvgSanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
getUrlFromAttrExtracts the URL from the url(...)
getBBoxGet the given/selected element’s bounding box object, convert it to be more usable when necessary
ffCloneHack for Firefox bugs where text element features aren’t updated.
getPathBBoxGet 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
Element Transforms
getRotationAngleGet the rotation angle of the given/selected DOM element
setRotationAngleRemoves any old rotations if present, prepends a new rotation at the transformed center
getTransformListReturns an object that behaves like a SVGTransformList for the given DOM element
recalculateAllSelectedDimensionsRuns recalculateDimensions on the selected elements, adding the changes to a single batch command
remapElementApplies coordinate changes to an element based on the given matrix
recalculateDimensionsDecides the course of action based on the element’s transform list
transformPointA (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
isIdentityHelper function to check if the matrix performs no actual transform (i.e.
matrixMultiplyThis function tries to return a SVGMatrix that is the multiplication m1*m2.
transformListToTransformThis returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
hasMatrixTransformSee if the given transformlist includes a non-indentity matrix transform
getMatrixGet the matrix object for a given element
transformBoxTransforms a rectangle based on the given matrix
Selection
clearSelectionClears the selection.
addToSelectionAdds a list of elements to the selection.
removeFromSelectionRemoves elements from the selection.
selectAllInCurrentLayerClears the selection, then adds all elements in the current layer to the selection.
smoothControlPointsTakes three points and creates a smoother line based on them
getMouseTargetGets the desired element from a mouse event
preventClickDefaultPrevents default browser click behaviour on the given element
Text edit functionsFunctions relating to editing text elements
Path edit functionsFunctions relating to editing path elements
Serialization
removeUnusedDefElemsLooks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.
svgCanvasToStringMain function to set up the SVG content for output
svgToStringSub function ran on each SVG element to convert it to a string as desired
embedImageConverts a given image file to a data URL when possible, then runs a given callback
saveSerializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
rasterExportGenerates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
getSvgStringReturns the current drawing as raw SVG XML text.
setSvgStringThis function sets the current drawing as the input SVG XML.
importSvgStringThis function imports the input SVG XML into the current layer in the drawing
Layers
identifyLayersUpdates layer system
createLayerCreates 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.
deleteCurrentLayerDeletes the current layer from the drawing and then clears the selection.
getNumLayersReturns the number of layers in the current drawing.
getLayerReturns the name of the ith layer.
getCurrentLayerReturns the name of the currently selected layer.
setCurrentLayerSets the current layer.
renameCurrentLayerRenames the current layer.
setCurrentLayerPositionChanges the position of the current layer to the new value.
getLayerVisibilityReturns whether the layer is visible.
setLayerVisibilitySets the visibility of the layer.
moveSelectedToLayerMoves the selected elements to layername.
getLayerOpacityReturns the opacity of the given layer.
setLayerOpacitySets the opacity of the given layer.
Document functions
clearClears the current document.
linkControlPointsAlias function
getContentElemReturns the content DOM element
getRootElemReturns the root DOM element
getSelectedElemsReturns the array with selected DOM elements
getResolutionReturns the current dimensions and zoom level in an object
getZoomReturns the current zoom level
getVersionReturns a string which describes the revision number of SvgCanvas.
setUiStringsUpdate interface strings with given values
setConfigUpdate configuration options with given values
getDocumentTitleReturns the current document title or an empty string if not found
setDocumentTitleAdds/updates a title element for the document with the given name.
getEditorNSReturns the editor’s namespace URL, optionally adds it to root element
setResolutionChanges the document’s dimensions to the given size
getOffsetReturns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
setBBoxZoomSets the zoom level on the canvas-side based on the given value
setZoomSets the zoom to the given level
getModeReturns the current editor mode string
setModeSets the editor’s mode to the given string
Element Styling
getColorReturns the current fill/stroke option
setColorChange the current stroke/fill color/gradient value
findDefsReturn the document’s <defs> element, create it first if necessary
setGradientApply the current gradient to selected element’s fill or stroke
findDuplicateGradientCheck if exact gradient already exists
setPaintSet a color/gradient to a fill/stroke
getStrokeWidthReturns the current stroke-width value
setStrokeWidthSets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead
setStrokeAttrSet the given stroke-related attribute the given value for selected elements
getOpacityReturns the current opacity
setOpacitySets the given opacity to the current selected elements
getOpacityReturns the current fill opacity
getStrokeOpacityReturns the current stroke opacity
setPaintOpacitySets the current fill/stroke opacity
getBlurGets the stdDeviation blur value of the given element
setBlurNoUndoSets the stdDeviation blur value on the selected element without being undoable
setBlurOffsetsSets the x, y, with, height values of the filter element in order to make the blur not be clipped.
setBlurAdds/updates the blur filter to the selected element
getBoldCheck whether selected element is bold or not
setBoldMake the selected element bold or normal
getItalicCheck whether selected element is italic or not
setItalicMake the selected element italic or normal
getFontFamilyReturns the current font family
setFontFamilySet the new font family
getFontSizeReturns the current font size
setFontSizeApplies the given font size to the selected element
getTextReturns the current text (textContent) of the selected element
setTextContentUpdates the text element with the given string
setImageURLSets the new image URL for the selected image element.
setRectRadiusSets the rx & ry values to the selected rect element to change its corner radius
Element manipulation
setSegTypeSets the new segment type to the selected segment(s).
convertToPathConvert selected element to a path, or get the BBox of an element-as-path
changeSelectedAttributeNoUndoThis function makes the changes to the elements.
changeSelectedAttributeChange the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.
deleteSelectedElementsRemoves all selected elements from the DOM and adds the change to the history stack
groupSelectedElementsWraps all the selected elements in a group (g) element
ungroupSelectedElementUnwraps all the elements in a selected group (g) element.
moveToTopSelectedElementRepositions the selected element to the bottom in the DOM to appear on top of other elements
moveToBottomSelectedElementRepositions the selected element to the top in the DOM to appear under other elements
moveSelectedElementsMoves selected elements on the X/Y axis
cloneSelectedElementsCreate deep DOM copies (clones) of all selected elements and move them slightly from their originals
alignSelectedElementsAligns selected elements
Additional editor tools
updateCanvasUpdates the editor canvas width/height/position after a zoom has occurred
setBackgroundSet the background of the editor (NOT the actual document)
cycleElementSelect the next/previous element within the current layer
+ +

Utils.toXml

Converts characters in a string to XML-friendly entities.

Example: “&” becomes “&amp;”

Parameters

strThe string to be converted

Returns

The converted string

+ +

Utils.fromXml

Converts XML entities in a string to single characters.  Example: “&amp;” becomes “&”

Parameters

strThe string to be converted

Returns

The converted string

+ +

Utils.encode64

Converts a string to base64

+ +

Utils.decode64

Converts a string from base64

+ +

Utils.convertToXMLReferences

Converts a string to use XML references

+ +

rectsIntersect

"rectsIntersect": function(r1,
r2)

Check if two rectangles (BBoxes objects) intersect each other

Paramaters

r1The first BBox-like object
r2The second BBox-like object

Returns

Boolean that’s true if rectangles intersect

+ +

snapToAngle

"snapToAngle": function(x1,
y1,
x2,
y2)

Returns a 45 degree angle coordinate associated with the two given coordinates

Parameters

x1First coordinate’s x value
x2Second coordinate’s x value
y1First coordinate’s y value
y2Second coordinate’s y value

Returns

Object with the following values: x - The angle-snapped x value y - The angle-snapped y value snapangle - The angle at which to snap

+ +

text2xml

"text2xml": function(sXML)

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

+ +

Unit conversion functions

+ +

convertToNum

convertToNum = function(attr,
val)

Converts given values to numbers.  Attributes must be supplied in case a percentage is given

Parameters

attrString with the name of the attribute associated with the value
valString with the attribute value to convert
+ +

setUnitAttr

setUnitAttr = function(elem,
attr,
val)

Sets an element’s attribute based on the unit in its current value.

Parameters

elemDOM element to be changed
attrString with the name of the attribute associated with the value
valString with the attribute value to convert
+ +

isValidUnit

canvas.isValidUnit = function(attr,
val)

Check if an attribute’s value is in a valid format

Parameters

attrString with the name of the attribute associated with the value
valString with the attribute value to check
+ +

Undo/Redo history management

+ +

ChangeElementCommand

var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)

History command to make a change to an element.  Usually an attribute change, but can also be textcontent.

Parameters

elemThe DOM element that was changed
attrsAn object with the attributes to be changed and the values they had before the change
textAn optional string visible to user related to this change
+ +

ChangeElementCommand.apply

Performs the stored change action

+ +

ChangeElementCommand.unapply

Reverses the stored change action

+ +

ChangeElementCommand.elements

Returns array with element associated with this command

+ +

InsertElementCommand

var InsertElementCommand = this.undoCmd.insertElement = function(elem,
text)

History command for an element that was added to the DOM

Parameters

elemThe newly added DOM element
textAn optional string visible to user related to this change
+ +

InsertElementCommand.apply

Re-Inserts the new element

+ +

InsertElementCommand.unapply

Removes the element

+ +

InsertElementCommand.elements

Returns array with element associated with this command

+ +

RemoveElementCommand

var RemoveElementCommand = this.undoCmd.removeElement = function(elem,
parent,
text)

History command for an element removed from the DOM

Parameters

elemThe removed DOM element
parentThe DOM element’s parent
textAn optional string visible to user related to this change
+ +

RemoveElementCommand.apply

Re-removes the new element

+ +

RemoveElementCommand.unapply

Re-adds the new element

+ +

RemoveElementCommand.elements

Returns array with element associated with this command

+ +

MoveElementCommand

var MoveElementCommand = this.undoCmd.moveElement = function(elem,
oldNextSibling,
oldParent,
text)

History command for an element that had its DOM position changed

Parameters

elemThe DOM element that was moved
oldNextSiblingThe element’s next sibling before it was moved
oldParentThe element’s parent before it was moved
textAn optional string visible to user related to this change
+ +

MoveElementCommand.unapply

Re-positions the element

+ +

MoveElementCommand.unapply

Positions the element back to its original location

+ +

MoveElementCommand.elements

Returns array with element associated with this command

+ +

BatchCommand

var BatchCommand = this.undoCmd.batch = function(text)

History command that can contain/execute multiple other commands

Parameters

textAn optional string visible to user related to this change
+ +

BatchCommand.apply

Runs “apply” on all subcommands

+ +

BatchCommand.unapply

Runs “unapply” on all subcommands

+ +

BatchCommand.elements

Iterate through all our subcommands and returns all the elements we are changing

+ +

BatchCommand.addSubCommand

Adds a given command to the history stack

Parameters

cmdThe undo command object to add
+ +

BatchCommand.isEmpty

Returns a boolean indicating whether or not the batch command is empty

+ +

resetUndoStack

resetUndoStack = function()

Resets the undo stack, effectively clearing the undo/redo history

+ +

undoMgr.getUndoStackSize

Returns

Integer with the current size of the undo history stack

+ +

undoMgr.getRedoStackSize

Returns

Integer with the current size of the redo history stack

+ +

undoMgr.getNextUndoCommandText

Returns

String associated with the next undo command

+ +

undoMgr.getNextRedoCommandText

Returns

String associated with the next redo command

+ +

undoMgr.undo

Performs an undo step

+ +

undoMgr.redo

Performs a redo step

+ +

addCommandToHistory

addCommandToHistory = c.undoCmd.add = function(cmd)

Adds a command object to the undo history stack

Parameters

cmdThe command object to add
+ +

beginUndoableChange

c.beginUndoableChange = function(attrName,
elems)

This function tells the canvas to remember the old values of the attrName attribute for each element sent in.  The elements and values are stored on a stack, so the next call to finishUndoableChange() will pop the elements and old values off the stack, gets the current values from the DOM and uses all of these to construct the undo-able command.

Parameters

attrNameThe name of the attribute being changed
elemsArray of DOM elements being changed
+ +

finishUndoableChange

c.finishUndoableChange = function()

This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.  The command can then be added to the command history

Returns

Batch command object with resulting changes

+ +

Selector

Private class for DOM element selection boxes

Parameters

idinteger to internally indentify the selector
elemDOM element associated with this selector
Summary
Functions
Selector.resetUsed to reset the id and element that the selector is attached to
Selector.showGripsShow the resize grips of this selector
Selector.updateGripCursorsUpdates cursors for corner grips on rotation so arrows point the right way
Selector.resizeUpdates the selector to match the element’s size
+ +

Functions

+ +

Selector.reset

Used to reset the id and element that the selector is attached to

Parameters

eDOM element associated with this selector
+ +

Selector.showGrips

Show the resize grips of this selector

Parameters

showboolean indicating whether grips should be shown or not
+ +

Selector.updateGripCursors

Updates cursors for corner grips on rotation so arrows point the right way

Parameters

angleFloat indicating current rotation angle in degrees
+ +

Selector.resize

Updates the selector to match the element’s size

+ +

SelectorManager

Public class to manage all selector objects (selection boxes)

Summary
SelectorManager.initGroupResets the parent selector group element
SelectorManager.requestSelectorReturns the selector based on the given element
SelectorManager.releaseSelectorRemoves the selector of the given element (hides selection box)
SelectorManager.getRubberBandBoxReturns the rubberBandBox DOM element.
Helper functions
walkTreeWalks the tree and executes the callback on each element in a top-down fashion
walkTreePostWalks the tree and executes the callback on each element in a depth-first fashion
assignAttributesAssigns multiple attributes to an element.
cleanupElementRemove unneeded (default) attributes, makes resulting SVG smaller
addSvgElementFromJsonCreate 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
addExtensionAdd an extension to the editor
shortFloatRounds a given value to a float with number of digits defined in save_options
getStrokedBBoxGet the bounding box for one or more stroked and/or transformed elements
getVisibleElementsGet all elements that have a BBox (excludes <defs>, <title>, etc).
copyElemCreate a clone of an element, updating its ID and its children’s IDs when needed
getElemGet a DOM element by ID within the SVG root element.
getIdReturns the last created DOM element ID string
getNextIdCreates and returns a unique ID string for a DOM element
bindAttaches a callback function to an event
setIdPrefixChanges the ID prefix to the given value
sanitizeSvgSanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
getUrlFromAttrExtracts the URL from the url(...)
getBBoxGet the given/selected element’s bounding box object, convert it to be more usable when necessary
ffCloneHack for Firefox bugs where text element features aren’t updated.
getPathBBoxGet 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
Element Transforms
getRotationAngleGet the rotation angle of the given/selected DOM element
setRotationAngleRemoves any old rotations if present, prepends a new rotation at the transformed center
getTransformListReturns an object that behaves like a SVGTransformList for the given DOM element
recalculateAllSelectedDimensionsRuns recalculateDimensions on the selected elements, adding the changes to a single batch command
remapElementApplies coordinate changes to an element based on the given matrix
recalculateDimensionsDecides the course of action based on the element’s transform list
transformPointA (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
isIdentityHelper function to check if the matrix performs no actual transform (i.e.
matrixMultiplyThis function tries to return a SVGMatrix that is the multiplication m1*m2.
transformListToTransformThis returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
hasMatrixTransformSee if the given transformlist includes a non-indentity matrix transform
getMatrixGet the matrix object for a given element
transformBoxTransforms a rectangle based on the given matrix
Selection
clearSelectionClears the selection.
addToSelectionAdds a list of elements to the selection.
removeFromSelectionRemoves elements from the selection.
selectAllInCurrentLayerClears the selection, then adds all elements in the current layer to the selection.
smoothControlPointsTakes three points and creates a smoother line based on them
getMouseTargetGets the desired element from a mouse event
preventClickDefaultPrevents default browser click behaviour on the given element
Text edit functionsFunctions relating to editing text elements
Path edit functionsFunctions relating to editing path elements
Serialization
removeUnusedDefElemsLooks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.
svgCanvasToStringMain function to set up the SVG content for output
svgToStringSub function ran on each SVG element to convert it to a string as desired
embedImageConverts a given image file to a data URL when possible, then runs a given callback
saveSerializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
rasterExportGenerates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
getSvgStringReturns the current drawing as raw SVG XML text.
setSvgStringThis function sets the current drawing as the input SVG XML.
importSvgStringThis function imports the input SVG XML into the current layer in the drawing
Layers
identifyLayersUpdates layer system
createLayerCreates 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.
deleteCurrentLayerDeletes the current layer from the drawing and then clears the selection.
getNumLayersReturns the number of layers in the current drawing.
getLayerReturns the name of the ith layer.
getCurrentLayerReturns the name of the currently selected layer.
setCurrentLayerSets the current layer.
renameCurrentLayerRenames the current layer.
setCurrentLayerPositionChanges the position of the current layer to the new value.
getLayerVisibilityReturns whether the layer is visible.
setLayerVisibilitySets the visibility of the layer.
moveSelectedToLayerMoves the selected elements to layername.
getLayerOpacityReturns the opacity of the given layer.
setLayerOpacitySets the opacity of the given layer.
Document functions
clearClears the current document.
linkControlPointsAlias function
getContentElemReturns the content DOM element
getRootElemReturns the root DOM element
getSelectedElemsReturns the array with selected DOM elements
getResolutionReturns the current dimensions and zoom level in an object
getZoomReturns the current zoom level
getVersionReturns a string which describes the revision number of SvgCanvas.
setUiStringsUpdate interface strings with given values
setConfigUpdate configuration options with given values
getDocumentTitleReturns the current document title or an empty string if not found
setDocumentTitleAdds/updates a title element for the document with the given name.
getEditorNSReturns the editor’s namespace URL, optionally adds it to root element
setResolutionChanges the document’s dimensions to the given size
getOffsetReturns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
setBBoxZoomSets the zoom level on the canvas-side based on the given value
setZoomSets the zoom to the given level
getModeReturns the current editor mode string
setModeSets the editor’s mode to the given string
Element Styling
getColorReturns the current fill/stroke option
setColorChange the current stroke/fill color/gradient value
findDefsReturn the document’s <defs> element, create it first if necessary
setGradientApply the current gradient to selected element’s fill or stroke
findDuplicateGradientCheck if exact gradient already exists
setPaintSet a color/gradient to a fill/stroke
getStrokeWidthReturns the current stroke-width value
setStrokeWidthSets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead
setStrokeAttrSet the given stroke-related attribute the given value for selected elements
getOpacityReturns the current opacity
setOpacitySets the given opacity to the current selected elements
getOpacityReturns the current fill opacity
getStrokeOpacityReturns the current stroke opacity
setPaintOpacitySets the current fill/stroke opacity
getBlurGets the stdDeviation blur value of the given element
setBlurNoUndoSets the stdDeviation blur value on the selected element without being undoable
setBlurOffsetsSets the x, y, with, height values of the filter element in order to make the blur not be clipped.
setBlurAdds/updates the blur filter to the selected element
getBoldCheck whether selected element is bold or not
setBoldMake the selected element bold or normal
getItalicCheck whether selected element is italic or not
setItalicMake the selected element italic or normal
getFontFamilyReturns the current font family
setFontFamilySet the new font family
getFontSizeReturns the current font size
setFontSizeApplies the given font size to the selected element
getTextReturns the current text (textContent) of the selected element
setTextContentUpdates the text element with the given string
setImageURLSets the new image URL for the selected image element.
setRectRadiusSets the rx & ry values to the selected rect element to change its corner radius
Element manipulation
setSegTypeSets the new segment type to the selected segment(s).
convertToPathConvert selected element to a path, or get the BBox of an element-as-path
changeSelectedAttributeNoUndoThis function makes the changes to the elements.
changeSelectedAttributeChange the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.
deleteSelectedElementsRemoves all selected elements from the DOM and adds the change to the history stack
groupSelectedElementsWraps all the selected elements in a group (g) element
ungroupSelectedElementUnwraps all the elements in a selected group (g) element.
moveToTopSelectedElementRepositions the selected element to the bottom in the DOM to appear on top of other elements
moveToBottomSelectedElementRepositions the selected element to the top in the DOM to appear under other elements
moveSelectedElementsMoves selected elements on the X/Y axis
cloneSelectedElementsCreate deep DOM copies (clones) of all selected elements and move them slightly from their originals
alignSelectedElementsAligns selected elements
Additional editor tools
updateCanvasUpdates the editor canvas width/height/position after a zoom has occurred
setBackgroundSet the background of the editor (NOT the actual document)
cycleElementSelect the next/previous element within the current layer
+ +

SelectorManager.initGroup

Resets the parent selector group element

+ +

SelectorManager.requestSelector

Returns the selector based on the given element

Parameters

elemDOM element to get the selector for
+ +

SelectorManager.releaseSelector

Removes the selector of the given element (hides selection box)

Parameters

elemDOM element to remove the selector for
+ +

SelectorManager.getRubberBandBox

Returns the rubberBandBox DOM element.  This is the rectangle drawn by the user for selecting/zooming

+ +

Helper functions

+ +

walkTree

function walkTree(elem,
cbFn)

Walks the tree and executes the callback on each element in a top-down fashion

Parameters

elemDOM element to traverse
cbFnCallback function to run on each element
+ +

walkTreePost

function walkTreePost(elem,
cbFn)

Walks the tree and executes the callback on each element in a depth-first fashion

Parameters

elemDOM element to traverse
cbFnCallback function to run on each element
+ +

assignAttributes

var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)

Assigns multiple attributes to an element.

Parameters

nodeDOM element to apply new attribute values to
attrsObject with attribute keys/values
suspendLengthOptional integer of milliseconds to suspend redraw
unitCheckBoolean to indicate the need to use setUnitAttr
+ +

cleanupElement

var cleanupElement = this.cleanupElement = function(element)

Remove unneeded (default) attributes, makes resulting SVG smaller

Parameters

elementDOM element to clean up
+ +

addSvgElementFromJson

var addSvgElementFromJson = this.addSvgElementFromJson = function(data)

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

dataObject with the following keys/values:
  • element - DOM element to create
  • attr - Object with attributes/values to assign to the new element
  • curStyles - Boolean indicating that current style attributes should be applied first

Returns: The new element

+ +

addExtension

this.addExtension = function(name,
ext_func)

Add an extension to the editor

Parameters

nameString with the ID of the extension
ext_funcFunction supplied by the extension with its data
+ +

shortFloat

var shortFloat = function(val)

Rounds a given value to a float with number of digits defined in save_options

Parameters

valThe 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

+ +

getStrokedBBox

var getStrokedBBox = this.getStrokedBBox = function(elems)

Get the bounding box for one or more stroked and/or transformed elements

Parameters

elemsArray with DOM elements to check

Returns

A single bounding box object

+ +

getVisibleElements

var getVisibleElements = this.getVisibleElements = function(parent,
includeBBox)

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

parentThe parent DOM element to search within
includeBBoxBoolean to indicate that an object should return with the element and its bbox

Returns

An array with all “visible” elements, or if includeBBox is true, an array with objects that include:

  • elem - The element
  • bbox - The element’s BBox as retrieved from getStrokedBBox
+ +

copyElem

var copyElem = function(el)

Create a clone of an element, updating its ID and its children’s IDs when needed

Parameters

elDOM element to clone

Returns: The cloned element

+ +

getElem

function getElem(id)

Get a DOM element by ID within the SVG root element.

Parameters

idString with the element’s new ID
+ +

getId

getId = c.getId = function()

Returns the last created DOM element ID string

+ +

getNextId

getNextId = c.getNextId = function()

Creates and returns a unique ID string for a DOM element

+ +

bind

c.bind = function(event,
f)

Attaches a callback function to an event

Parameters

eventString indicating the name of the event
fThe callback function to bind to the event

Return

The previous event

+ +

setIdPrefix

c.setIdPrefix = function(p)

Changes the ID prefix to the given value

Parameters

pString with the new prefix
+ +

sanitizeSvg

var sanitizeSvg = this.sanitizeSvg = function(node)

Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above

Parameters

nodeThe DOM element to be checked, will also check its children
+ +

getUrlFromAttr

var getUrlFromAttr = this.getUrlFromAttr = function(attrVal)

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

attrValThe attribute value as a string

Returns

String with just the URL, like someFile.svg#foo

+ +

getBBox

var getBBox = this.getBBox = function(elem)

Get the given/selected element’s bounding box object, convert it to be more usable when necessary

Parameters

elemOptional DOM element to get the BBox for
+ +

ffClone

var ffClone = function(elem)

Hack for Firefox bugs where text element features aren’t updated.  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

elemThe (text) DOM element to clone
+ +

getPathBBox

var getPathBBox = function(path)

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

pathThe path DOM element to get the BBox for

Returns

A BBox-like object

+ +

Element Transforms

+ +

getRotationAngle

var getRotationAngle = this.getRotationAngle = function(elem,
to_rad)

Get the rotation angle of the given/selected DOM element

Parameters

elemOptional DOM element to get the angle for
to_radBoolean that when true returns the value in radians rather than degrees

Returns

Float with the angle in degrees or radians

+ +

setRotationAngle

this.setRotationAngle = function(val,
preventUndo)

Removes any old rotations if present, prepends a new rotation at the transformed center

Parameters

valThe new rotation angle in degrees
preventUndoBoolean indicating whether the action should be undoable or not
+ +

getTransformList

var getTransformList = this.getTransformList = function(elem)

Returns an object that behaves like a SVGTransformList for the given DOM element

Parameters

elemDOM element to get a transformlist from
+ +

recalculateAllSelectedDimensions

var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()

Runs recalculateDimensions on the selected elements, adding the changes to a single batch command

+ +

remapElement

var remapElement = this.remapElement = function(selected,
changes,
m)

Applies coordinate changes to an element based on the given matrix

Parameters

selectedDOM element to be changed
changesObject with changes to be remapped
mMatrix object to use for remapping coordinates
+ +

recalculateDimensions

var recalculateDimensions = this.recalculateDimensions = function(selected)

Decides the course of action based on the element’s transform list

Parameters

selectedThe DOM element to recalculate

Returns

Undo command object with the resulting change

+ +

transformPoint

var transformPoint = function(x,
y,
m)

A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)

Parameters

xFloat representing the x coordinate
yFloat representing the y coordinate
mMatrix object to transform the point with Returns a x,y object representing the transformed point
+ +

isIdentity

var isIdentity = function(m)

Helper function to check if the matrix performs no actual transform (i.e. exists for identity purposes)

Parameters

mThe matrix object to check

Returns

Boolean indicating whether or not the matrix is 1,0,0,1,0,0

+ +

matrixMultiply

var matrixMultiply = this.matrixMultiply = function()

This function tries to return a SVGMatrix that is the multiplication m1*m2.  We also round to zero when it’s near zero

Parameters

= 2 Matrix objects to multiply

Returns

The matrix object resulting from the calculation

+ +

transformListToTransform

var transformListToTransform = this.transformListToTransform = function(tlist,
min,
max)

This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments

Parameters

tlistThe transformlist object
minOptional integer indicating start transform position
maxOptional integer indicating end transform position

Returns

A single matrix transform object

+ +

hasMatrixTransform

var hasMatrixTransform = this.hasMatrixTransform = function(tlist)

See if the given transformlist includes a non-indentity matrix transform

Parameters

tlistThe transformlist to check

Returns

Boolean on whether or not a matrix transform was found

+ +

getMatrix

var getMatrix = function(elem)

Get the matrix object for a given element

Parameters

elemThe DOM element to check

Returns

The matrix object associated with the element’s transformlist

+ +

transformBox

var transformBox = this.transformBox = function(l,
t,
w,
h,
m)

Transforms a rectangle based on the given matrix

Parameters

lFloat with the box’s left coordinate
tFloat with the box’s top coordinate
wFloat with the box width
hFloat with the box height
mMatrix object to transform the box by

Returns

An object with the following values:

  • tl - The top left coordinate (x,y object)
  • tr - The top right coordinate (x,y object)
  • bl - The bottom left coordinate (x,y object)
  • br - The bottom right coordinate (x,y object)
  • aabox - Object with the following values:
  • Float with the axis-aligned x coordinate
  • Float with the axis-aligned y coordinate
  • Float with the axis-aligned width coordinate
  • Float with the axis-aligned height coordinate
+ +

Selection

+ +

clearSelection

var clearSelection = this.clearSelection = function(noCall)

Clears the selection.  The ‘selected’ handler is then called.  Parameters: noCall - Optional boolean that when true does not call the “selected” handler

+ +

addToSelection

var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)

Adds a list of elements to the selection.  The ‘selected’ handler is then called.

Parameters

elemsToAddan array of DOM elements to add to the selection
showGripsa boolean flag indicating whether the resize grips should be shown
+ +

removeFromSelection

var removeFromSelection = this.removeFromSelection = function(elemsToRemove)

Removes elements from the selection.

Parameters

elemsToRemovean array of elements to remove from selection
+ +

selectAllInCurrentLayer

this.selectAllInCurrentLayer = function()

Clears the selection, then adds all elements in the current layer to the selection.  This function then fires the selected event.

+ +

smoothControlPoints

var smoothControlPoints = this.smoothControlPoints = function(ct1,
ct2,
pt)

Takes three points and creates a smoother line based on them

Parameters

ct1Object with x and y values (first control point)
ct2Object with x and y values (second control point)
ptObject with x and y values (third point)

Returns

Array of two “smoothed” point objects

+ +

getMouseTarget

var getMouseTarget = this.getMouseTarget = function(evt)

Gets the desired element from a mouse event

Parameters

evtEvent object from the mouse event

Returns

DOM element we want

+ +

preventClickDefault

var preventClickDefault = function(img)

Prevents default browser click behaviour on the given element

Parameters

imgThe DOM element to prevent the cilck on
+ +

Text edit functions

Functions relating to editing text elements

+ +

Path edit functions

Functions relating to editing path elements

+ +

Serialization

+ +

removeUnusedDefElems

var removeUnusedDefElems = this.removeUnusedDefElems = function()

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

+ +

svgCanvasToString

var svgCanvasToString = this.svgCanvasToString = function()

Main function to set up the SVG content for output

Returns

String containing the SVG image for output

+ +

svgToString

var svgToString = this.svgToString = function(elem,
indent)

Sub function ran on each SVG element to convert it to a string as desired

Parameters

elemThe SVG element to convert
indentInteger with the amount of spaces to indent this tag

Returns

String with the given element as an SVG tag

+ +

embedImage

this.embedImage = function(val,
callback)

Converts a given image file to a data URL when possible, then runs a given callback

Parameters

valString with the path/URL of the image
callbackOptional function to run when image data is found, supplies the result (data URL or false) as first parameter.
+ +

save

this.save = function(opts)

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

+ +

rasterExport

this.rasterExport = function()

Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found

+ +

getSvgString

this.getSvgString = function()

Returns the current drawing as raw SVG XML text.

Returns

The current drawing as raw SVG XML text.

+ +

setSvgString

this.setSvgString = function(xmlString)

This function sets the current drawing as the input SVG XML.

Parameters

xmlStringThe SVG as XML text.

Returns

This function returns false if the set was unsuccessful, true otherwise.

+ +

importSvgString

this.importSvgString = function(xmlString)

This function imports the input SVG XML into the current layer in the drawing

Parameters

xmlStringThe 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
  • create a new layer for the imported SVG
+ +

Layers

+ +

identifyLayers

var identifyLayers = function()

Updates layer system

+ +

createLayer

this.createLayer = function(name)

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

nameThe given name
+ +

deleteCurrentLayer

this.deleteCurrentLayer = function()

Deletes the current layer from the drawing and then clears the selection.  This function then calls the ‘changed’ handler.  This is an undoable action.

+ +

getNumLayers

this.getNumLayers = function()

Returns the number of layers in the current drawing.

Returns

The number of layers in the current drawing.

+ +

getLayer

this.getLayer = function(i)

Returns the name of the ith layer.  If the index is out of range, an empty string is returned.

Parameters

ithe zero-based index of the layer you are querying.

Returns

The name of the ith layer

+ +

getCurrentLayer

this.getCurrentLayer = function()

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.

+ +

setCurrentLayer

this.setCurrentLayer = function(name)

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

namethe name of the layer you want to switch to.

Returns

true if the current layer was switched, otherwise false

+ +

renameCurrentLayer

this.renameCurrentLayer = function(newname)

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

newnamethe 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.

+ +

setCurrentLayerPosition

this.setCurrentLayerPosition = function(newpos)

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

newposThe zero-based index of the new position of the layer.  This should be between
0 and (number of layers1)

Returns

true if the current layer position was changed, false otherwise.

+ +

getLayerVisibility

this.getLayerVisibility = function(layername)

Returns whether the layer is visible.  If the layer name is not valid, then this function returns false.

Parameters

layernamethe name of the layer which you want to query.

Returns

The visibility state of the layer, or false if the layer name was invalid.

+ +

setLayerVisibility

this.setLayerVisibility = function(layername,
bVisible)

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

layernamethe name of the layer to change the visibility
bVisibletrue/false, whether the layer should be visible

Returns

true if the layer’s visibility was set, false otherwise

+ +

moveSelectedToLayer

this.moveSelectedToLayer = function(layername)

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

layernamethe 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.

+ +

getLayerOpacity

this.getLayerOpacity = function(layername)

Returns the opacity of the given layer.  If the input name is not a layer, null is returned.

Parameters

layernamename 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

+ +

setLayerOpacity

this.setLayerOpacity = function(layername,
opacity)

Sets the opacity of the given layer.  If the input name is not a layer, nothing happens.  This is not an undo-able action.  NOTE: this function exists solely to apply a highlighting/de-emphasis effect to a layer, when it is possible for a user to affect the opacity of a layer, we will need to allow this function to produce an undo-able action.  If opacity is not a value between 0.0 and 1.0, then nothing happens.

Parameters

layernamename of the layer on which to set the opacity
opacitya float value in the range 0.0-1.0
+ +

Document functions

+ +

clear

this.clear = function()

Clears the current document.  This is not an undoable action.

+ +

linkControlPoints

Alias function

+ +

getContentElem

this.getContentElem = function()

Returns the content DOM element

+ +

getRootElem

this.getRootElem = function()

Returns the root DOM element

+ +

getSelectedElems

this.getSelectedElems = function()

Returns the array with selected DOM elements

+ +

getResolution

var getResolution = this.getResolution = function()

Returns the current dimensions and zoom level in an object

+ +

getZoom

this.getZoom = function()

Returns the current zoom level

+ +

getVersion

this.getVersion = function()

Returns a string which describes the revision number of SvgCanvas.

+ +

setUiStrings

this.setUiStrings = function(strs)

Update interface strings with given values

Parameters

strsObject with strings (see uiStrings for examples)
+ +

setConfig

this.setConfig = function(opts)

Update configuration options with given values

Parameters

optsObject with options (see curConfig for examples)
+ +

getDocumentTitle

this.getDocumentTitle = function()

Returns the current document title or an empty string if not found

+ +

setDocumentTitle

this.setDocumentTitle = function(newtitle)

Adds/updates a title element for the document with the given name.  This is an undoable action

Parameters

newtitleString with the new title
+ +

getEditorNS

this.getEditorNS = function(add)

Returns the editor’s namespace URL, optionally adds it to root element

Parameters

addBoolean to indicate whether or not to add the namespace value
+ +

setResolution

this.setResolution = function(x,
y)

Changes the document’s dimensions to the given size

Parameters

xNumber with the width of the new dimensions in user units.  Can also be the string “fit” to indicate “fit to content”
yNumber 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.

+ +

getOffset

this.getOffset = function()

Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.

+ +

setBBoxZoom

this.setBBoxZoom = function(val,
editor_w,
editor_h)

Sets the zoom level on the canvas-side based on the given value

Parameters

valBounding box object to zoom to or string indicating zoom option
editor_wInteger with the editor’s workarea box’s width
editor_hInteger with the editor’s workarea box’s height
+ +

setZoom

this.setZoom = function(zoomlevel)

Sets the zoom to the given level

Parameters

zoomlevelFloat indicating the zoom level to change to
+ +

getMode

this.getMode = function()

Returns the current editor mode string

+ +

setMode

this.setMode = function(name)

Sets the editor’s mode to the given string

Parameters

nameString with the new mode to change to
+ +

Element Styling

+ +

getColor

this.getColor = function(type)

Returns the current fill/stroke option

+ +

setColor

this.setColor = function(type,
val,
preventUndo)

Change the current stroke/fill color/gradient value

Parameters

typeString indicating fill or stroke
valThe value to set the stroke attribute to
preventUndoBoolean indicating whether or not this should be and undoable option
+ +

findDefs

var findDefs = function()

Return the document’s <defs> element, create it first if necessary

+ +

setGradient

var setGradient = this.setGradient = function(type)

Apply the current gradient to selected element’s fill or stroke

Parameters type - String indicating “fill” or “stroke” to apply to an element

+ +

findDuplicateGradient

var findDuplicateGradient = function(grad)

Check if exact gradient already exists

Parameters

gradThe gradient DOM element to compare to others

Returns

The existing gradient if found, null if not

+ +

setPaint

this.setPaint = function(type,
paint)

Set a color/gradient to a fill/stroke

Parameters

typeString with “fill” or “stroke”
paintThe jGraduate paint object to apply
+ +

getStrokeWidth

this.getStrokeWidth = function()

Returns the current stroke-width value

+ +

setStrokeWidth

this.setStrokeWidth = function(val)

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

valA Float indicating the new stroke width value
+ +

setStrokeAttr

this.setStrokeAttr = function(attr,
val)

Set the given stroke-related attribute the given value for selected elements

Parameters

attrString with the attribute name
valString or number with the attribute value
+ +

getOpacity

this.getOpacity = function()

Returns the current opacity

+ +

setOpacity

this.setOpacity = function(val)

Sets the given opacity to the current selected elements

+ +

getOpacity

Returns the current fill opacity

+ +

getStrokeOpacity

this.getStrokeOpacity = function()

Returns the current stroke opacity

+ +

setPaintOpacity

this.setPaintOpacity = function(type,
val,
preventUndo)

Sets the current fill/stroke opacity

Parameters

typeString with “fill” or “stroke”
valFloat with the new opacity value
preventUndoBoolean indicating whether or not this should be an undoable action
+ +

getBlur

this.getBlur = function(elem)

Gets the stdDeviation blur value of the given element

Parameters

elemThe element to check the blur value for
+ +

setBlurNoUndo

canvas.setBlurNoUndo = function(val)

Sets the stdDeviation blur value on the selected element without being undoable

Parameters

valThe new stdDeviation value
+ +

setBlurOffsets

canvas.setBlurOffsets = function(filter,
stdDev)

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

filterThe filter DOM element to update
stdDevThe standard deviation value on which to base the offset size
+ +

setBlur

canvas.setBlur = function(val,
complete)

Adds/updates the blur filter to the selected element

Parameters

valFloat with the new stdDeviation blur value
completeBoolean indicating whether or not the action should be completed (to add to the undo manager)
+ +

getBold

this.getBold = function()

Check whether selected element is bold or not

Returns

Boolean indicating whether or not element is bold

+ +

setBold

this.setBold = function(b)

Make the selected element bold or normal

Parameters

bBoolean indicating bold (true) or normal (false)
+ +

getItalic

this.getItalic = function()

Check whether selected element is italic or not

Returns

Boolean indicating whether or not element is italic

+ +

setItalic

this.setItalic = function(i)

Make the selected element italic or normal

Parameters

bBoolean indicating italic (true) or normal (false)
+ +

getFontFamily

this.getFontFamily = function()

Returns the current font family

+ +

setFontFamily

this.setFontFamily = function(val)

Set the new font family

Parameters

valString with the new font family
+ +

getFontSize

this.getFontSize = function()

Returns the current font size

+ +

setFontSize

this.setFontSize = function(val)

Applies the given font size to the selected element

Parameters

valFloat with the new font size
+ +

getText

this.getText = function()

Returns the current text (textContent) of the selected element

+ +

setTextContent

this.setTextContent = function(val)

Updates the text element with the given string

Parameters

valString with the new text
+ +

setImageURL

this.setImageURL = function(val)

Sets the new image URL for the selected image element.  Updates its size if a new URL is given

Parameters

valString with the image URL/path
+ +

setRectRadius

this.setRectRadius = function(val)

Sets the rx & ry values to the selected rect element to change its corner radius

Parameters

valThe new radius
+ +

Element manipulation

+ +

setSegType

this.setSegType = function(new_type)

Sets the new segment type to the selected segment(s).

Parameters

new_typeInteger with the new segment type See http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list
+ +

convertToPath

this.convertToPath = function(elem,
getBBox)

Convert selected element to a path, or get the BBox of an element-as-path

Parameters

elemThe DOM element to be converted
getBBoxBoolean 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.

+ +

changeSelectedAttributeNoUndo

var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)

This function makes the changes to the elements.  It does not add the change to the history stack.

Parameters

attrString with the attribute name
newValueString or number with the new attribute value
elemsThe DOM elements to apply the change to
+ +

changeSelectedAttribute

var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)

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

attrString with the attribute name
newValueString or number with the new attribute value
elemsThe DOM elements to apply the change to
+ +

deleteSelectedElements

this.deleteSelectedElements = function()

Removes all selected elements from the DOM and adds the change to the history stack

+ +

groupSelectedElements

this.groupSelectedElements = function()

Wraps all the selected elements in a group (g) element

+ +

ungroupSelectedElement

this.ungroupSelectedElement = function()

Unwraps all the elements in a selected group (g) element.  This requires significant recalculations to apply group’s transforms, etc to its children

+ +

moveToTopSelectedElement

this.moveToTopSelectedElement = function()

Repositions the selected element to the bottom in the DOM to appear on top of other elements

+ +

moveToBottomSelectedElement

this.moveToBottomSelectedElement = function()

Repositions the selected element to the top in the DOM to appear under other elements

+ +

moveSelectedElements

this.moveSelectedElements = function(dx,
dy,
undoable)

Moves selected elements on the X/Y axis

Parameters

dxFloat with the distance to move on the x-axis
dyFloat with the distance to move on the y-axis
undoableBoolean indicating whether or not the action should be undoable

Returns

Batch command for the move

+ +

cloneSelectedElements

this.cloneSelectedElements = function()

Create deep DOM copies (clones) of all selected elements and move them slightly from their originals

+ +

alignSelectedElements

this.alignSelectedElements = function(type,
relative_to)

Aligns selected elements

Parameters

typeString with single character indicating the alignment type
relative_toString that must be one of the following: “selected”, “largest”, “smallest”, “page”
+ +

Additional editor tools

+ +

updateCanvas

this.updateCanvas = function(w,
h)

Updates the editor canvas width/height/position after a zoom has occurred

Parameters

wFloat with the new width
hFloat 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
+ +

setBackground

this.setBackground = function(color,
url)

Set the background of the editor (NOT the actual document)

Parameters

colorString with fill color to apply
urlURL or path to image to use
+ +

cycleElement

this.cycleElement = function(next)

Select the next/previous element within the current layer

Parameters

nextBoolean where true = next and false = previous element
+ +
+ + + + + + + + + + +
"rectsIntersect": function(r1,
r2)
Check if two rectangles (BBoxes objects) intersect each other
"snapToAngle": function(x1,
y1,
x2,
y2)
Returns a 45 degree angle coordinate associated with the two given coordinates
"text2xml": function(sXML)
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
convertToNum = function(attr,
val)
Converts given values to numbers.
setUnitAttr = function(elem,
attr,
val)
Sets an element’s attribute based on the unit in its current value.
canvas.isValidUnit = function(attr,
val)
Check if an attribute’s value is in a valid format
var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)
History command to make a change to an element.
var InsertElementCommand = this.undoCmd.insertElement = function(elem,
text)
History command for an element that was added to the DOM
var RemoveElementCommand = this.undoCmd.removeElement = function(elem,
parent,
text)
History command for an element removed from the DOM
var MoveElementCommand = this.undoCmd.moveElement = function(elem,
oldNextSibling,
oldParent,
text)
History command for an element that had its DOM position changed
var BatchCommand = this.undoCmd.batch = function(text)
History command that can contain/execute multiple other commands
resetUndoStack = function()
Resets the undo stack, effectively clearing the undo/redo history
addCommandToHistory = c.undoCmd.add = function(cmd)
Adds a command object to the undo history stack
c.beginUndoableChange = function(attrName,
elems)
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.finishUndoableChange = function()
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
function walkTree(elem,
cbFn)
Walks the tree and executes the callback on each element in a top-down fashion
function walkTreePost(elem,
cbFn)
Walks the tree and executes the callback on each element in a depth-first fashion
var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)
Assigns multiple attributes to an element.
var cleanupElement = this.cleanupElement = function(element)
Remove unneeded (default) attributes, makes resulting SVG smaller
var addSvgElementFromJson = this.addSvgElementFromJson = function(data)
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
this.addExtension = function(name,
ext_func)
Add an extension to the editor
var shortFloat = function(val)
Rounds a given value to a float with number of digits defined in save_options
var getStrokedBBox = this.getStrokedBBox = function(elems)
Get the bounding box for one or more stroked and/or transformed elements
var getVisibleElements = this.getVisibleElements = function(parent,
includeBBox)
Get all elements that have a BBox (excludes defs, title, etc).
var copyElem = function(el)
Create a clone of an element, updating its ID and its children’s IDs when needed
function getElem(id)
Get a DOM element by ID within the SVG root element.
getId = c.getId = function()
Returns the last created DOM element ID string
getNextId = c.getNextId = function()
Creates and returns a unique ID string for a DOM element
c.bind = function(event,
f)
Attaches a callback function to an event
c.setIdPrefix = function(p)
Changes the ID prefix to the given value
var sanitizeSvg = this.sanitizeSvg = function(node)
Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
var getUrlFromAttr = this.getUrlFromAttr = function(attrVal)
Extracts the URL from the url(...)
var getBBox = this.getBBox = function(elem)
Get the given/selected element’s bounding box object, convert it to be more usable when necessary
var ffClone = function(elem)
Hack for Firefox bugs where text element features aren’t updated.
var getPathBBox = function(path)
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
var getRotationAngle = this.getRotationAngle = function(elem,
to_rad)
Get the rotation angle of the given/selected DOM element
this.setRotationAngle = function(val,
preventUndo)
Removes any old rotations if present, prepends a new rotation at the transformed center
var getTransformList = this.getTransformList = function(elem)
Returns an object that behaves like a SVGTransformList for the given DOM element
var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()
Runs recalculateDimensions on the selected elements, adding the changes to a single batch command
var remapElement = this.remapElement = function(selected,
changes,
m)
Applies coordinate changes to an element based on the given matrix
var recalculateDimensions = this.recalculateDimensions = function(selected)
Decides the course of action based on the element’s transform list
var transformPoint = function(x,
y,
m)
A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
var isIdentity = function(m)
Helper function to check if the matrix performs no actual transform (i.e.
var matrixMultiply = this.matrixMultiply = function()
This function tries to return a SVGMatrix that is the multiplication m1*m2.
var transformListToTransform = this.transformListToTransform = function(tlist,
min,
max)
This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
var hasMatrixTransform = this.hasMatrixTransform = function(tlist)
See if the given transformlist includes a non-indentity matrix transform
var getMatrix = function(elem)
Get the matrix object for a given element
var transformBox = this.transformBox = function(l,
t,
w,
h,
m)
Transforms a rectangle based on the given matrix
var clearSelection = this.clearSelection = function(noCall)
Clears the selection.
var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)
Adds a list of elements to the selection.
var removeFromSelection = this.removeFromSelection = function(elemsToRemove)
Removes elements from the selection.
this.selectAllInCurrentLayer = function()
Clears the selection, then adds all elements in the current layer to the selection.
var smoothControlPoints = this.smoothControlPoints = function(ct1,
ct2,
pt)
Takes three points and creates a smoother line based on them
var getMouseTarget = this.getMouseTarget = function(evt)
Gets the desired element from a mouse event
var preventClickDefault = function(img)
Prevents default browser click behaviour on the given element
var removeUnusedDefElems = this.removeUnusedDefElems = function()
Looks at DOM elements inside the defs to see if they are referred to, removes them from the DOM if they are not.
var svgCanvasToString = this.svgCanvasToString = function()
Main function to set up the SVG content for output
var svgToString = this.svgToString = function(elem,
indent)
Sub function ran on each SVG element to convert it to a string as desired
this.embedImage = function(val,
callback)
Converts a given image file to a data URL when possible, then runs a given callback
this.save = function(opts)
Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
this.rasterExport = function()
Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
this.getSvgString = function()
Returns the current drawing as raw SVG XML text.
this.setSvgString = function(xmlString)
This function sets the current drawing as the input SVG XML.
this.importSvgString = function(xmlString)
This function imports the input SVG XML into the current layer in the drawing
var identifyLayers = function()
Updates layer system
this.createLayer = function(name)
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.deleteCurrentLayer = function()
Deletes the current layer from the drawing and then clears the selection.
this.getNumLayers = function()
Returns the number of layers in the current drawing.
this.getLayer = function(i)
Returns the name of the ith layer.
this.getCurrentLayer = function()
Returns the name of the currently selected layer.
this.setCurrentLayer = function(name)
Sets the current layer.
this.renameCurrentLayer = function(newname)
Renames the current layer.
this.setCurrentLayerPosition = function(newpos)
Changes the position of the current layer to the new value.
this.getLayerVisibility = function(layername)
Returns whether the layer is visible.
this.setLayerVisibility = function(layername,
bVisible)
Sets the visibility of the layer.
this.moveSelectedToLayer = function(layername)
Moves the selected elements to layername.
this.getLayerOpacity = function(layername)
Returns the opacity of the given layer.
this.setLayerOpacity = function(layername,
opacity)
Sets the opacity of the given layer.
this.clear = function()
Clears the current document.
this.getContentElem = function()
Returns the content DOM element
this.getRootElem = function()
Returns the root DOM element
this.getSelectedElems = function()
Returns the array with selected DOM elements
var getResolution = this.getResolution = function()
Returns the current dimensions and zoom level in an object
this.getZoom = function()
Returns the current zoom level
this.getVersion = function()
Returns a string which describes the revision number of SvgCanvas.
this.setUiStrings = function(strs)
Update interface strings with given values
this.setConfig = function(opts)
Update configuration options with given values
this.getDocumentTitle = function()
Returns the current document title or an empty string if not found
this.setDocumentTitle = function(newtitle)
Adds/updates a title element for the document with the given name.
this.getEditorNS = function(add)
Returns the editor’s namespace URL, optionally adds it to root element
this.setResolution = function(x,
y)
Changes the document’s dimensions to the given size
this.getOffset = function()
Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
this.setBBoxZoom = function(val,
editor_w,
editor_h)
Sets the zoom level on the canvas-side based on the given value
this.setZoom = function(zoomlevel)
Sets the zoom to the given level
this.getMode = function()
Returns the current editor mode string
this.setMode = function(name)
Sets the editor’s mode to the given string
this.getColor = function(type)
Returns the current fill/stroke option
this.setColor = function(type,
val,
preventUndo)
Change the current stroke/fill color/gradient value
var findDefs = function()
Return the document’s defs element, create it first if necessary
var setGradient = this.setGradient = function(type)
Apply the current gradient to selected element’s fill or stroke
var findDuplicateGradient = function(grad)
Check if exact gradient already exists
this.setPaint = function(type,
paint)
Set a color/gradient to a fill/stroke
this.getStrokeWidth = function()
Returns the current stroke-width value
this.setStrokeWidth = function(val)
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
this.setStrokeAttr = function(attr,
val)
Set the given stroke-related attribute the given value for selected elements
this.getOpacity = function()
Returns the current opacity
this.setOpacity = function(val)
Sets the given opacity to the current selected elements
this.getStrokeOpacity = function()
Returns the current stroke opacity
this.setPaintOpacity = function(type,
val,
preventUndo)
Sets the current fill/stroke opacity
this.getBlur = function(elem)
Gets the stdDeviation blur value of the given element
canvas.setBlurNoUndo = function(val)
Sets the stdDeviation blur value on the selected element without being undoable
canvas.setBlurOffsets = function(filter,
stdDev)
Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.
canvas.setBlur = function(val,
complete)
Adds/updates the blur filter to the selected element
this.getBold = function()
Check whether selected element is bold or not
this.setBold = function(b)
Make the selected element bold or normal
this.getItalic = function()
Check whether selected element is italic or not
this.setItalic = function(i)
Make the selected element italic or normal
this.getFontFamily = function()
Returns the current font family
this.setFontFamily = function(val)
Set the new font family
this.getFontSize = function()
Returns the current font size
this.setFontSize = function(val)
Applies the given font size to the selected element
this.getText = function()
Returns the current text (textContent) of the selected element
this.setTextContent = function(val)
Updates the text element with the given string
this.setImageURL = function(val)
Sets the new image URL for the selected image element.
this.setRectRadius = function(val)
Sets the rx & ry values to the selected rect element to change its corner radius
this.setSegType = function(new_type)
Sets the new segment type to the selected segment(s).
this.convertToPath = function(elem,
getBBox)
Convert selected element to a path, or get the BBox of an element-as-path
var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)
This function makes the changes to the elements.
var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)
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.
this.deleteSelectedElements = function()
Removes all selected elements from the DOM and adds the change to the history stack
this.groupSelectedElements = function()
Wraps all the selected elements in a group (g) element
this.ungroupSelectedElement = function()
Unwraps all the elements in a selected group (g) element.
this.moveToTopSelectedElement = function()
Repositions the selected element to the bottom in the DOM to appear on top of other elements
this.moveToBottomSelectedElement = function()
Repositions the selected element to the top in the DOM to appear under other elements
this.moveSelectedElements = function(dx,
dy,
undoable)
Moves selected elements on the X/Y axis
this.cloneSelectedElements = function()
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
this.alignSelectedElements = function(type,
relative_to)
Aligns selected elements
this.updateCanvas = function(w,
h)
Updates the editor canvas width/height/position after a zoom has occurred
this.setBackground = function(color,
url)
Set the background of the editor (NOT the actual document)
this.cycleElement = function(next)
Select the next/previous element within the current layer
+ + + + + + + + \ No newline at end of file diff --git a/docs/files/svgcanvas-js.html b/docs/files/svgcanvas-js.html new file mode 100644 index 0000000..6f1b0b3 --- /dev/null +++ b/docs/files/svgcanvas-js.html @@ -0,0 +1,426 @@ + + +SvgCanvas + + + + + + + + + +

SvgCanvas

The main SvgCanvas class that manages all SVG-related functions

Parameters

containerThe container HTML element that should hold the SVG root element
configAn object that contains configuration data
Summary
SvgCanvasThe main SvgCanvas class that manages all SVG-related functions
Utils.toXmlConverts characters in a string to XML-friendly entities.
Utils.fromXmlConverts XML entities in a string to single characters.
Utils.encode64Converts a string to base64
Utils.decode64Converts a string from base64
Utils.convertToXMLReferencesConverts a string to use XML references
rectsIntersectCheck if two rectangles (BBoxes objects) intersect each other
snapToAngleReturns a 45 degree angle coordinate associated with the two given coordinates
text2xmlCross-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
Unit conversion functions
convertToNumConverts given values to numbers.
setUnitAttrSets an element’s attribute based on the unit in its current value.
isValidUnitCheck if an attribute’s value is in a valid format
Undo/Redo history management
ChangeElementCommandHistory command to make a change to an element.
ChangeElementCommand.applyPerforms the stored change action
ChangeElementCommand.unapplyReverses the stored change action
ChangeElementCommand.elementsReturns array with element associated with this command
InsertElementCommandHistory command for an element that was added to the DOM
InsertElementCommand.applyRe-Inserts the new element
InsertElementCommand.unapplyRemoves the element
InsertElementCommand.elementsReturns array with element associated with this command
RemoveElementCommandHistory command for an element removed from the DOM
RemoveElementCommand.applyRe-removes the new element
RemoveElementCommand.unapplyRe-adds the new element
RemoveElementCommand.elementsReturns array with element associated with this command
MoveElementCommandHistory command for an element that had its DOM position changed
MoveElementCommand.unapplyRe-positions the element
MoveElementCommand.unapplyPositions the element back to its original location
MoveElementCommand.elementsReturns array with element associated with this command
BatchCommandHistory command that can contain/execute multiple other commands
BatchCommand.applyRuns “apply” on all subcommands
BatchCommand.unapplyRuns “unapply” on all subcommands
BatchCommand.elementsIterate through all our subcommands and returns all the elements we are changing
BatchCommand.addSubCommandAdds a given command to the history stack
BatchCommand.isEmptyReturns a boolean indicating whether or not the batch command is empty
resetUndoStackResets the undo stack, effectively clearing the undo/redo history
undoMgr.getUndoStackSizeInteger with the current size of the undo history stack
undoMgr.getRedoStackSizeInteger with the current size of the redo history stack
undoMgr.getNextUndoCommandTextString associated with the next undo command
undoMgr.getNextRedoCommandTextString associated with the next redo command
undoMgr.undoPerforms an undo step
undoMgr.redoPerforms a redo step
addCommandToHistoryAdds a command object to the undo history stack
beginUndoableChangeThis function tells the canvas to remember the old values of the attrName attribute for each element sent in.
finishUndoableChangeThis function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
SelectorPrivate class for DOM element selection boxes
Functions
Selector.resetUsed to reset the id and element that the selector is attached to
Selector.showGripsShow the resize grips of this selector
Selector.updateGripCursorsUpdates cursors for corner grips on rotation so arrows point the right way
Selector.resizeUpdates the selector to match the element’s size
SelectorManagerPublic class to manage all selector objects (selection boxes)
SelectorManager.initGroupResets the parent selector group element
SelectorManager.requestSelectorReturns the selector based on the given element
SelectorManager.releaseSelectorRemoves the selector of the given element (hides selection box)
SelectorManager.getRubberBandBoxReturns the rubberBandBox DOM element.
Helper functions
walkTreeWalks the tree and executes the callback on each element in a top-down fashion
walkTreePostWalks the tree and executes the callback on each element in a depth-first fashion
assignAttributesAssigns multiple attributes to an element.
cleanupElementRemove unneeded (default) attributes, makes resulting SVG smaller
addSvgElementFromJsonCreate 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
addExtensionAdd an extension to the editor
shortFloatRounds a given value to a float with number of digits defined in save_options
getStrokedBBoxGet the bounding box for one or more stroked and/or transformed elements
getVisibleElementsGet all elements that have a BBox (excludes <defs>, <title>, etc).
copyElemCreate a clone of an element, updating its ID and its children’s IDs when needed
getElemGet a DOM element by ID within the SVG root element.
getIdReturns the last created DOM element ID string
getNextIdCreates and returns a unique ID string for a DOM element
bindAttaches a callback function to an event
setIdPrefixChanges the ID prefix to the given value
sanitizeSvgSanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
getUrlFromAttrExtracts the URL from the url(...)
getBBoxGet the given/selected element’s bounding box object, convert it to be more usable when necessary
ffCloneHack for Firefox bugs where text element features aren’t updated.
getPathBBoxGet 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
Element Transforms
getRotationAngleGet the rotation angle of the given/selected DOM element
setRotationAngleRemoves any old rotations if present, prepends a new rotation at the transformed center
getTransformListReturns an object that behaves like a SVGTransformList for the given DOM element
recalculateAllSelectedDimensionsRuns recalculateDimensions on the selected elements, adding the changes to a single batch command
remapElementApplies coordinate changes to an element based on the given matrix
recalculateDimensionsDecides the course of action based on the element’s transform list
transformPointA (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
isIdentityHelper function to check if the matrix performs no actual transform (i.e.
matrixMultiplyThis function tries to return a SVGMatrix that is the multiplication m1*m2.
transformListToTransformThis returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
hasMatrixTransformSee if the given transformlist includes a non-indentity matrix transform
getMatrixGet the matrix object for a given element
transformBoxTransforms a rectangle based on the given matrix
Selection
clearSelectionClears the selection.
addToSelectionAdds a list of elements to the selection.
removeFromSelectionRemoves elements from the selection.
selectAllInCurrentLayerClears the selection, then adds all elements in the current layer to the selection.
smoothControlPointsTakes three points and creates a smoother line based on them
getMouseTargetGets the desired element from a mouse event
preventClickDefaultPrevents default browser click behaviour on the given element
Text edit functionsFunctions relating to editing text elements
Path edit functionsFunctions relating to editing path elements
Serialization
removeUnusedDefElemsLooks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.
svgCanvasToStringMain function to set up the SVG content for output
svgToStringSub function ran on each SVG element to convert it to a string as desired
embedImageConverts a given image file to a data URL when possible, then runs a given callback
saveSerializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
rasterExportGenerates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
getSvgStringReturns the current drawing as raw SVG XML text.
setSvgStringThis function sets the current drawing as the input SVG XML.
importSvgStringThis function imports the input SVG XML into the current layer in the drawing
Layers
identifyLayersUpdates layer system
createLayerCreates 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.
deleteCurrentLayerDeletes the current layer from the drawing and then clears the selection.
getNumLayersReturns the number of layers in the current drawing.
getLayerReturns the name of the ith layer.
getCurrentLayerReturns the name of the currently selected layer.
setCurrentLayerSets the current layer.
renameCurrentLayerRenames the current layer.
setCurrentLayerPositionChanges the position of the current layer to the new value.
getLayerVisibilityReturns whether the layer is visible.
setLayerVisibilitySets the visibility of the layer.
moveSelectedToLayerMoves the selected elements to layername.
getLayerOpacityReturns the opacity of the given layer.
setLayerOpacitySets the opacity of the given layer.
Document functions
clearClears the current document.
linkControlPointsAlias function
getContentElemReturns the content DOM element
getRootElemReturns the root DOM element
getSelectedElemsReturns the array with selected DOM elements
getResolutionReturns the current dimensions and zoom level in an object
getZoomReturns the current zoom level
getVersionReturns a string which describes the revision number of SvgCanvas.
setUiStringsUpdate interface strings with given values
setConfigUpdate configuration options with given values
getDocumentTitleReturns the current document title or an empty string if not found
setDocumentTitleAdds/updates a title element for the document with the given name.
getEditorNSReturns the editor’s namespace URL, optionally adds it to root element
setResolutionChanges the document’s dimensions to the given size
getOffsetReturns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
setBBoxZoomSets the zoom level on the canvas-side based on the given value
setZoomSets the zoom to the given level
getModeReturns the current editor mode string
setModeSets the editor’s mode to the given string
Element Styling
getColorReturns the current fill/stroke option
setColorChange the current stroke/fill color/gradient value
findDefsReturn the document’s <defs> element, create it first if necessary
setGradientApply the current gradient to selected element’s fill or stroke
findDuplicateGradientCheck if exact gradient already exists
setPaintSet a color/gradient to a fill/stroke
getStrokeWidthReturns the current stroke-width value
setStrokeWidthSets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead
setStrokeAttrSet the given stroke-related attribute the given value for selected elements
getOpacityReturns the current opacity
setOpacitySets the given opacity to the current selected elements
getOpacityReturns the current fill opacity
getStrokeOpacityReturns the current stroke opacity
setPaintOpacitySets the current fill/stroke opacity
getBlurGets the stdDeviation blur value of the given element
setBlurNoUndoSets the stdDeviation blur value on the selected element without being undoable
setBlurOffsetsSets the x, y, with, height values of the filter element in order to make the blur not be clipped.
setBlurAdds/updates the blur filter to the selected element
getBoldCheck whether selected element is bold or not
setBoldMake the selected element bold or normal
getItalicCheck whether selected element is italic or not
setItalicMake the selected element italic or normal
getFontFamilyReturns the current font family
setFontFamilySet the new font family
getFontSizeReturns the current font size
setFontSizeApplies the given font size to the selected element
getTextReturns the current text (textContent) of the selected element
setTextContentUpdates the text element with the given string
setImageURLSets the new image URL for the selected image element.
setRectRadiusSets the rx & ry values to the selected rect element to change its corner radius
Element manipulation
setSegTypeSets the new segment type to the selected segment(s).
convertToPathConvert selected element to a path, or get the BBox of an element-as-path
changeSelectedAttributeNoUndoThis function makes the changes to the elements.
changeSelectedAttributeChange the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.
deleteSelectedElementsRemoves all selected elements from the DOM and adds the change to the history stack
groupSelectedElementsWraps all the selected elements in a group (g) element
ungroupSelectedElementUnwraps all the elements in a selected group (g) element.
moveToTopSelectedElementRepositions the selected element to the bottom in the DOM to appear on top of other elements
moveToBottomSelectedElementRepositions the selected element to the top in the DOM to appear under other elements
moveSelectedElementsMoves selected elements on the X/Y axis
cloneSelectedElementsCreate deep DOM copies (clones) of all selected elements and move them slightly from their originals
alignSelectedElementsAligns selected elements
Additional editor tools
updateCanvasUpdates the editor canvas width/height/position after a zoom has occurred
setBackgroundSet the background of the editor (NOT the actual document)
cycleElementSelect the next/previous element within the current layer
+ +

Utils.toXml

Converts characters in a string to XML-friendly entities.

Example: “&” becomes “&amp;”

Parameters

strThe string to be converted

Returns

The converted string

+ +

Utils.fromXml

Converts XML entities in a string to single characters.  Example: “&amp;” becomes “&”

Parameters

strThe string to be converted

Returns

The converted string

+ +

Utils.encode64

Converts a string to base64

+ +

Utils.decode64

Converts a string from base64

+ +

Utils.convertToXMLReferences

Converts a string to use XML references

+ +

rectsIntersect

"rectsIntersect": function(r1,
r2)

Check if two rectangles (BBoxes objects) intersect each other

Paramaters

r1The first BBox-like object
r2The second BBox-like object

Returns

Boolean that’s true if rectangles intersect

+ +

snapToAngle

"snapToAngle": function(x1,
y1,
x2,
y2)

Returns a 45 degree angle coordinate associated with the two given coordinates

Parameters

x1First coordinate’s x value
x2Second coordinate’s x value
y1First coordinate’s y value
y2Second coordinate’s y value

Returns

Object with the following values: x - The angle-snapped x value y - The angle-snapped y value snapangle - The angle at which to snap

+ +

text2xml

"text2xml": function(sXML)

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

+ +

Unit conversion functions

+ +

convertToNum

convertToNum = function(attr,
val)

Converts given values to numbers.  Attributes must be supplied in case a percentage is given

Parameters

attrString with the name of the attribute associated with the value
valString with the attribute value to convert
+ +

setUnitAttr

setUnitAttr = function(elem,
attr,
val)

Sets an element’s attribute based on the unit in its current value.

Parameters

elemDOM element to be changed
attrString with the name of the attribute associated with the value
valString with the attribute value to convert
+ +

isValidUnit

canvas.isValidUnit = function(attr,
val)

Check if an attribute’s value is in a valid format

Parameters

attrString with the name of the attribute associated with the value
valString with the attribute value to check
+ +

Undo/Redo history management

+ +

ChangeElementCommand

var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)

History command to make a change to an element.  Usually an attribute change, but can also be textcontent.

Parameters

elemThe DOM element that was changed
attrsAn object with the attributes to be changed and the values they had before the change
textAn optional string visible to user related to this change
+ +

ChangeElementCommand.apply

Performs the stored change action

+ +

ChangeElementCommand.unapply

Reverses the stored change action

+ +

ChangeElementCommand.elements

Returns array with element associated with this command

+ +

InsertElementCommand

var InsertElementCommand = this.undoCmd.insertElement = function(elem,
text)

History command for an element that was added to the DOM

Parameters

elemThe newly added DOM element
textAn optional string visible to user related to this change
+ +

InsertElementCommand.apply

Re-Inserts the new element

+ +

InsertElementCommand.unapply

Removes the element

+ +

InsertElementCommand.elements

Returns array with element associated with this command

+ +

RemoveElementCommand

var RemoveElementCommand = this.undoCmd.removeElement = function(elem,
parent,
text)

History command for an element removed from the DOM

Parameters

elemThe removed DOM element
parentThe DOM element’s parent
textAn optional string visible to user related to this change
+ +

RemoveElementCommand.apply

Re-removes the new element

+ +

RemoveElementCommand.unapply

Re-adds the new element

+ +

RemoveElementCommand.elements

Returns array with element associated with this command

+ +

MoveElementCommand

var MoveElementCommand = this.undoCmd.moveElement = function(elem,
oldNextSibling,
oldParent,
text)

History command for an element that had its DOM position changed

Parameters

elemThe DOM element that was moved
oldNextSiblingThe element’s next sibling before it was moved
oldParentThe element’s parent before it was moved
textAn optional string visible to user related to this change
+ +

MoveElementCommand.unapply

Re-positions the element

+ +

MoveElementCommand.unapply

Positions the element back to its original location

+ +

MoveElementCommand.elements

Returns array with element associated with this command

+ +

BatchCommand

var BatchCommand = this.undoCmd.batch = function(text)

History command that can contain/execute multiple other commands

Parameters

textAn optional string visible to user related to this change
+ +

BatchCommand.apply

Runs “apply” on all subcommands

+ +

BatchCommand.unapply

Runs “unapply” on all subcommands

+ +

BatchCommand.elements

Iterate through all our subcommands and returns all the elements we are changing

+ +

BatchCommand.addSubCommand

Adds a given command to the history stack

Parameters

cmdThe undo command object to add
+ +

BatchCommand.isEmpty

Returns a boolean indicating whether or not the batch command is empty

+ +

resetUndoStack

resetUndoStack = function()

Resets the undo stack, effectively clearing the undo/redo history

+ +

undoMgr.getUndoStackSize

Returns

Integer with the current size of the undo history stack

+ +

undoMgr.getRedoStackSize

Returns

Integer with the current size of the redo history stack

+ +

undoMgr.getNextUndoCommandText

Returns

String associated with the next undo command

+ +

undoMgr.getNextRedoCommandText

Returns

String associated with the next redo command

+ +

undoMgr.undo

Performs an undo step

+ +

undoMgr.redo

Performs a redo step

+ +

addCommandToHistory

addCommandToHistory = c.undoCmd.add = function(cmd)

Adds a command object to the undo history stack

Parameters

cmdThe command object to add
+ +

beginUndoableChange

c.beginUndoableChange = function(attrName,
elems)

This function tells the canvas to remember the old values of the attrName attribute for each element sent in.  The elements and values are stored on a stack, so the next call to finishUndoableChange() will pop the elements and old values off the stack, gets the current values from the DOM and uses all of these to construct the undo-able command.

Parameters

attrNameThe name of the attribute being changed
elemsArray of DOM elements being changed
+ +

finishUndoableChange

c.finishUndoableChange = function()

This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.  The command can then be added to the command history

Returns

Batch command object with resulting changes

+ +

Selector

Private class for DOM element selection boxes

Parameters

idinteger to internally indentify the selector
elemDOM element associated with this selector
Summary
Functions
Selector.resetUsed to reset the id and element that the selector is attached to
Selector.showGripsShow the resize grips of this selector
Selector.updateGripCursorsUpdates cursors for corner grips on rotation so arrows point the right way
Selector.resizeUpdates the selector to match the element’s size
+ +

Functions

+ +

Selector.reset

Used to reset the id and element that the selector is attached to

Parameters

eDOM element associated with this selector
+ +

Selector.showGrips

Show the resize grips of this selector

Parameters

showboolean indicating whether grips should be shown or not
+ +

Selector.updateGripCursors

Updates cursors for corner grips on rotation so arrows point the right way

Parameters

angleFloat indicating current rotation angle in degrees
+ +

Selector.resize

Updates the selector to match the element’s size

+ +

SelectorManager

Public class to manage all selector objects (selection boxes)

Summary
SelectorManager.initGroupResets the parent selector group element
SelectorManager.requestSelectorReturns the selector based on the given element
SelectorManager.releaseSelectorRemoves the selector of the given element (hides selection box)
SelectorManager.getRubberBandBoxReturns the rubberBandBox DOM element.
Helper functions
walkTreeWalks the tree and executes the callback on each element in a top-down fashion
walkTreePostWalks the tree and executes the callback on each element in a depth-first fashion
assignAttributesAssigns multiple attributes to an element.
cleanupElementRemove unneeded (default) attributes, makes resulting SVG smaller
addSvgElementFromJsonCreate 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
addExtensionAdd an extension to the editor
shortFloatRounds a given value to a float with number of digits defined in save_options
getStrokedBBoxGet the bounding box for one or more stroked and/or transformed elements
getVisibleElementsGet all elements that have a BBox (excludes <defs>, <title>, etc).
copyElemCreate a clone of an element, updating its ID and its children’s IDs when needed
getElemGet a DOM element by ID within the SVG root element.
getIdReturns the last created DOM element ID string
getNextIdCreates and returns a unique ID string for a DOM element
bindAttaches a callback function to an event
setIdPrefixChanges the ID prefix to the given value
sanitizeSvgSanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
getUrlFromAttrExtracts the URL from the url(...)
getBBoxGet the given/selected element’s bounding box object, convert it to be more usable when necessary
ffCloneHack for Firefox bugs where text element features aren’t updated.
getPathBBoxGet 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
Element Transforms
getRotationAngleGet the rotation angle of the given/selected DOM element
setRotationAngleRemoves any old rotations if present, prepends a new rotation at the transformed center
getTransformListReturns an object that behaves like a SVGTransformList for the given DOM element
recalculateAllSelectedDimensionsRuns recalculateDimensions on the selected elements, adding the changes to a single batch command
remapElementApplies coordinate changes to an element based on the given matrix
recalculateDimensionsDecides the course of action based on the element’s transform list
transformPointA (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
isIdentityHelper function to check if the matrix performs no actual transform (i.e.
matrixMultiplyThis function tries to return a SVGMatrix that is the multiplication m1*m2.
transformListToTransformThis returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
hasMatrixTransformSee if the given transformlist includes a non-indentity matrix transform
getMatrixGet the matrix object for a given element
transformBoxTransforms a rectangle based on the given matrix
Selection
clearSelectionClears the selection.
addToSelectionAdds a list of elements to the selection.
removeFromSelectionRemoves elements from the selection.
selectAllInCurrentLayerClears the selection, then adds all elements in the current layer to the selection.
smoothControlPointsTakes three points and creates a smoother line based on them
getMouseTargetGets the desired element from a mouse event
preventClickDefaultPrevents default browser click behaviour on the given element
Text edit functionsFunctions relating to editing text elements
Path edit functionsFunctions relating to editing path elements
Serialization
removeUnusedDefElemsLooks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.
svgCanvasToStringMain function to set up the SVG content for output
svgToStringSub function ran on each SVG element to convert it to a string as desired
embedImageConverts a given image file to a data URL when possible, then runs a given callback
saveSerializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
rasterExportGenerates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
getSvgStringReturns the current drawing as raw SVG XML text.
setSvgStringThis function sets the current drawing as the input SVG XML.
importSvgStringThis function imports the input SVG XML into the current layer in the drawing
Layers
identifyLayersUpdates layer system
createLayerCreates 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.
deleteCurrentLayerDeletes the current layer from the drawing and then clears the selection.
getNumLayersReturns the number of layers in the current drawing.
getLayerReturns the name of the ith layer.
getCurrentLayerReturns the name of the currently selected layer.
setCurrentLayerSets the current layer.
renameCurrentLayerRenames the current layer.
setCurrentLayerPositionChanges the position of the current layer to the new value.
getLayerVisibilityReturns whether the layer is visible.
setLayerVisibilitySets the visibility of the layer.
moveSelectedToLayerMoves the selected elements to layername.
getLayerOpacityReturns the opacity of the given layer.
setLayerOpacitySets the opacity of the given layer.
Document functions
clearClears the current document.
linkControlPointsAlias function
getContentElemReturns the content DOM element
getRootElemReturns the root DOM element
getSelectedElemsReturns the array with selected DOM elements
getResolutionReturns the current dimensions and zoom level in an object
getZoomReturns the current zoom level
getVersionReturns a string which describes the revision number of SvgCanvas.
setUiStringsUpdate interface strings with given values
setConfigUpdate configuration options with given values
getDocumentTitleReturns the current document title or an empty string if not found
setDocumentTitleAdds/updates a title element for the document with the given name.
getEditorNSReturns the editor’s namespace URL, optionally adds it to root element
setResolutionChanges the document’s dimensions to the given size
getOffsetReturns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
setBBoxZoomSets the zoom level on the canvas-side based on the given value
setZoomSets the zoom to the given level
getModeReturns the current editor mode string
setModeSets the editor’s mode to the given string
Element Styling
getColorReturns the current fill/stroke option
setColorChange the current stroke/fill color/gradient value
findDefsReturn the document’s <defs> element, create it first if necessary
setGradientApply the current gradient to selected element’s fill or stroke
findDuplicateGradientCheck if exact gradient already exists
setPaintSet a color/gradient to a fill/stroke
getStrokeWidthReturns the current stroke-width value
setStrokeWidthSets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead
setStrokeAttrSet the given stroke-related attribute the given value for selected elements
getOpacityReturns the current opacity
setOpacitySets the given opacity to the current selected elements
getOpacityReturns the current fill opacity
getStrokeOpacityReturns the current stroke opacity
setPaintOpacitySets the current fill/stroke opacity
getBlurGets the stdDeviation blur value of the given element
setBlurNoUndoSets the stdDeviation blur value on the selected element without being undoable
setBlurOffsetsSets the x, y, with, height values of the filter element in order to make the blur not be clipped.
setBlurAdds/updates the blur filter to the selected element
getBoldCheck whether selected element is bold or not
setBoldMake the selected element bold or normal
getItalicCheck whether selected element is italic or not
setItalicMake the selected element italic or normal
getFontFamilyReturns the current font family
setFontFamilySet the new font family
getFontSizeReturns the current font size
setFontSizeApplies the given font size to the selected element
getTextReturns the current text (textContent) of the selected element
setTextContentUpdates the text element with the given string
setImageURLSets the new image URL for the selected image element.
setRectRadiusSets the rx & ry values to the selected rect element to change its corner radius
Element manipulation
setSegTypeSets the new segment type to the selected segment(s).
convertToPathConvert selected element to a path, or get the BBox of an element-as-path
changeSelectedAttributeNoUndoThis function makes the changes to the elements.
changeSelectedAttributeChange the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.
deleteSelectedElementsRemoves all selected elements from the DOM and adds the change to the history stack
groupSelectedElementsWraps all the selected elements in a group (g) element
ungroupSelectedElementUnwraps all the elements in a selected group (g) element.
moveToTopSelectedElementRepositions the selected element to the bottom in the DOM to appear on top of other elements
moveToBottomSelectedElementRepositions the selected element to the top in the DOM to appear under other elements
moveSelectedElementsMoves selected elements on the X/Y axis
cloneSelectedElementsCreate deep DOM copies (clones) of all selected elements and move them slightly from their originals
alignSelectedElementsAligns selected elements
Additional editor tools
updateCanvasUpdates the editor canvas width/height/position after a zoom has occurred
setBackgroundSet the background of the editor (NOT the actual document)
cycleElementSelect the next/previous element within the current layer
+ +

SelectorManager.initGroup

Resets the parent selector group element

+ +

SelectorManager.requestSelector

Returns the selector based on the given element

Parameters

elemDOM element to get the selector for
+ +

SelectorManager.releaseSelector

Removes the selector of the given element (hides selection box)

Parameters

elemDOM element to remove the selector for
+ +

SelectorManager.getRubberBandBox

Returns the rubberBandBox DOM element.  This is the rectangle drawn by the user for selecting/zooming

+ +

Helper functions

+ +

walkTree

function walkTree(elem,
cbFn)

Walks the tree and executes the callback on each element in a top-down fashion

Parameters

elemDOM element to traverse
cbFnCallback function to run on each element
+ +

walkTreePost

function walkTreePost(elem,
cbFn)

Walks the tree and executes the callback on each element in a depth-first fashion

Parameters

elemDOM element to traverse
cbFnCallback function to run on each element
+ +

assignAttributes

var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)

Assigns multiple attributes to an element.

Parameters

nodeDOM element to apply new attribute values to
attrsObject with attribute keys/values
suspendLengthOptional integer of milliseconds to suspend redraw
unitCheckBoolean to indicate the need to use setUnitAttr
+ +

cleanupElement

var cleanupElement = this.cleanupElement = function(element)

Remove unneeded (default) attributes, makes resulting SVG smaller

Parameters

elementDOM element to clean up
+ +

addSvgElementFromJson

var addSvgElementFromJson = this.addSvgElementFromJson = function(data)

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

dataObject with the following keys/values:
  • element - DOM element to create
  • attr - Object with attributes/values to assign to the new element
  • curStyles - Boolean indicating that current style attributes should be applied first

Returns: The new element

+ +

addExtension

this.addExtension = function(name,
ext_func)

Add an extension to the editor

Parameters

nameString with the ID of the extension
ext_funcFunction supplied by the extension with its data
+ +

shortFloat

var shortFloat = function(val)

Rounds a given value to a float with number of digits defined in save_options

Parameters

valThe 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

+ +

getStrokedBBox

var getStrokedBBox = this.getStrokedBBox = function(elems)

Get the bounding box for one or more stroked and/or transformed elements

Parameters

elemsArray with DOM elements to check

Returns

A single bounding box object

+ +

getVisibleElements

var getVisibleElements = this.getVisibleElements = function(parent,
includeBBox)

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

parentThe parent DOM element to search within
includeBBoxBoolean to indicate that an object should return with the element and its bbox

Returns

An array with all “visible” elements, or if includeBBox is true, an array with objects that include:

  • elem - The element
  • bbox - The element’s BBox as retrieved from getStrokedBBox
+ +

copyElem

var copyElem = function(el)

Create a clone of an element, updating its ID and its children’s IDs when needed

Parameters

elDOM element to clone

Returns: The cloned element

+ +

getElem

function getElem(id)

Get a DOM element by ID within the SVG root element.

Parameters

idString with the element’s new ID
+ +

getId

getId = c.getId = function()

Returns the last created DOM element ID string

+ +

getNextId

getNextId = c.getNextId = function()

Creates and returns a unique ID string for a DOM element

+ +

bind

c.bind = function(event,
f)

Attaches a callback function to an event

Parameters

eventString indicating the name of the event
fThe callback function to bind to the event

Return

The previous event

+ +

setIdPrefix

c.setIdPrefix = function(p)

Changes the ID prefix to the given value

Parameters

pString with the new prefix
+ +

sanitizeSvg

var sanitizeSvg = this.sanitizeSvg = function(node)

Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above

Parameters

nodeThe DOM element to be checked, will also check its children
+ +

getUrlFromAttr

var getUrlFromAttr = this.getUrlFromAttr = function(attrVal)

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

attrValThe attribute value as a string

Returns

String with just the URL, like someFile.svg#foo

+ +

getBBox

var getBBox = this.getBBox = function(elem)

Get the given/selected element’s bounding box object, convert it to be more usable when necessary

Parameters

elemOptional DOM element to get the BBox for
+ +

ffClone

var ffClone = function(elem)

Hack for Firefox bugs where text element features aren’t updated.  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

elemThe (text) DOM element to clone
+ +

getPathBBox

var getPathBBox = function(path)

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

pathThe path DOM element to get the BBox for

Returns

A BBox-like object

+ +

Element Transforms

+ +

getRotationAngle

var getRotationAngle = this.getRotationAngle = function(elem,
to_rad)

Get the rotation angle of the given/selected DOM element

Parameters

elemOptional DOM element to get the angle for
to_radBoolean that when true returns the value in radians rather than degrees

Returns

Float with the angle in degrees or radians

+ +

setRotationAngle

this.setRotationAngle = function(val,
preventUndo)

Removes any old rotations if present, prepends a new rotation at the transformed center

Parameters

valThe new rotation angle in degrees
preventUndoBoolean indicating whether the action should be undoable or not
+ +

getTransformList

var getTransformList = this.getTransformList = function(elem)

Returns an object that behaves like a SVGTransformList for the given DOM element

Parameters

elemDOM element to get a transformlist from
+ +

recalculateAllSelectedDimensions

var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()

Runs recalculateDimensions on the selected elements, adding the changes to a single batch command

+ +

remapElement

var remapElement = this.remapElement = function(selected,
changes,
m)

Applies coordinate changes to an element based on the given matrix

Parameters

selectedDOM element to be changed
changesObject with changes to be remapped
mMatrix object to use for remapping coordinates
+ +

recalculateDimensions

var recalculateDimensions = this.recalculateDimensions = function(selected)

Decides the course of action based on the element’s transform list

Parameters

selectedThe DOM element to recalculate

Returns

Undo command object with the resulting change

+ +

transformPoint

var transformPoint = function(x,
y,
m)

A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)

Parameters

xFloat representing the x coordinate
yFloat representing the y coordinate
mMatrix object to transform the point with Returns a x,y object representing the transformed point
+ +

isIdentity

var isIdentity = function(m)

Helper function to check if the matrix performs no actual transform (i.e. exists for identity purposes)

Parameters

mThe matrix object to check

Returns

Boolean indicating whether or not the matrix is 1,0,0,1,0,0

+ +

matrixMultiply

var matrixMultiply = this.matrixMultiply = function()

This function tries to return a SVGMatrix that is the multiplication m1*m2.  We also round to zero when it’s near zero

Parameters

= 2 Matrix objects to multiply

Returns

The matrix object resulting from the calculation

+ +

transformListToTransform

var transformListToTransform = this.transformListToTransform = function(tlist,
min,
max)

This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments

Parameters

tlistThe transformlist object
minOptional integer indicating start transform position
maxOptional integer indicating end transform position

Returns

A single matrix transform object

+ +

hasMatrixTransform

var hasMatrixTransform = this.hasMatrixTransform = function(tlist)

See if the given transformlist includes a non-indentity matrix transform

Parameters

tlistThe transformlist to check

Returns

Boolean on whether or not a matrix transform was found

+ +

getMatrix

var getMatrix = function(elem)

Get the matrix object for a given element

Parameters

elemThe DOM element to check

Returns

The matrix object associated with the element’s transformlist

+ +

transformBox

var transformBox = this.transformBox = function(l,
t,
w,
h,
m)

Transforms a rectangle based on the given matrix

Parameters

lFloat with the box’s left coordinate
tFloat with the box’s top coordinate
wFloat with the box width
hFloat with the box height
mMatrix object to transform the box by

Returns

An object with the following values:

  • tl - The top left coordinate (x,y object)
  • tr - The top right coordinate (x,y object)
  • bl - The bottom left coordinate (x,y object)
  • br - The bottom right coordinate (x,y object)
  • aabox - Object with the following values:
  • Float with the axis-aligned x coordinate
  • Float with the axis-aligned y coordinate
  • Float with the axis-aligned width coordinate
  • Float with the axis-aligned height coordinate
+ +

Selection

+ +

clearSelection

var clearSelection = this.clearSelection = function(noCall)

Clears the selection.  The ‘selected’ handler is then called.  Parameters: noCall - Optional boolean that when true does not call the “selected” handler

+ +

addToSelection

var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)

Adds a list of elements to the selection.  The ‘selected’ handler is then called.

Parameters

elemsToAddan array of DOM elements to add to the selection
showGripsa boolean flag indicating whether the resize grips should be shown
+ +

removeFromSelection

var removeFromSelection = this.removeFromSelection = function(elemsToRemove)

Removes elements from the selection.

Parameters

elemsToRemovean array of elements to remove from selection
+ +

selectAllInCurrentLayer

this.selectAllInCurrentLayer = function()

Clears the selection, then adds all elements in the current layer to the selection.  This function then fires the selected event.

+ +

smoothControlPoints

var smoothControlPoints = this.smoothControlPoints = function(ct1,
ct2,
pt)

Takes three points and creates a smoother line based on them

Parameters

ct1Object with x and y values (first control point)
ct2Object with x and y values (second control point)
ptObject with x and y values (third point)

Returns

Array of two “smoothed” point objects

+ +

getMouseTarget

var getMouseTarget = this.getMouseTarget = function(evt)

Gets the desired element from a mouse event

Parameters

evtEvent object from the mouse event

Returns

DOM element we want

+ +

preventClickDefault

var preventClickDefault = function(img)

Prevents default browser click behaviour on the given element

Parameters

imgThe DOM element to prevent the cilck on
+ +

Text edit functions

Functions relating to editing text elements

+ +

Path edit functions

Functions relating to editing path elements

+ +

Serialization

+ +

removeUnusedDefElems

var removeUnusedDefElems = this.removeUnusedDefElems = function()

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

+ +

svgCanvasToString

var svgCanvasToString = this.svgCanvasToString = function()

Main function to set up the SVG content for output

Returns

String containing the SVG image for output

+ +

svgToString

var svgToString = this.svgToString = function(elem,
indent)

Sub function ran on each SVG element to convert it to a string as desired

Parameters

elemThe SVG element to convert
indentInteger with the amount of spaces to indent this tag

Returns

String with the given element as an SVG tag

+ +

embedImage

this.embedImage = function(val,
callback)

Converts a given image file to a data URL when possible, then runs a given callback

Parameters

valString with the path/URL of the image
callbackOptional function to run when image data is found, supplies the result (data URL or false) as first parameter.
+ +

save

this.save = function(opts)

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

+ +

rasterExport

this.rasterExport = function()

Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found

+ +

getSvgString

this.getSvgString = function()

Returns the current drawing as raw SVG XML text.

Returns

The current drawing as raw SVG XML text.

+ +

setSvgString

this.setSvgString = function(xmlString)

This function sets the current drawing as the input SVG XML.

Parameters

xmlStringThe SVG as XML text.

Returns

This function returns false if the set was unsuccessful, true otherwise.

+ +

importSvgString

this.importSvgString = function(xmlString)

This function imports the input SVG XML into the current layer in the drawing

Parameters

xmlStringThe 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
  • create a new layer for the imported SVG
+ +

Layers

+ +

identifyLayers

var identifyLayers = function()

Updates layer system

+ +

createLayer

this.createLayer = function(name)

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

nameThe given name
+ +

deleteCurrentLayer

this.deleteCurrentLayer = function()

Deletes the current layer from the drawing and then clears the selection.  This function then calls the ‘changed’ handler.  This is an undoable action.

+ +

getNumLayers

this.getNumLayers = function()

Returns the number of layers in the current drawing.

Returns

The number of layers in the current drawing.

+ +

getLayer

this.getLayer = function(i)

Returns the name of the ith layer.  If the index is out of range, an empty string is returned.

Parameters

ithe zero-based index of the layer you are querying.

Returns

The name of the ith layer

+ +

getCurrentLayer

this.getCurrentLayer = function()

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.

+ +

setCurrentLayer

this.setCurrentLayer = function(name)

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

namethe name of the layer you want to switch to.

Returns

true if the current layer was switched, otherwise false

+ +

renameCurrentLayer

this.renameCurrentLayer = function(newname)

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

newnamethe 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.

+ +

setCurrentLayerPosition

this.setCurrentLayerPosition = function(newpos)

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

newposThe zero-based index of the new position of the layer.  This should be between
0 and (number of layers1)

Returns

true if the current layer position was changed, false otherwise.

+ +

getLayerVisibility

this.getLayerVisibility = function(layername)

Returns whether the layer is visible.  If the layer name is not valid, then this function returns false.

Parameters

layernamethe name of the layer which you want to query.

Returns

The visibility state of the layer, or false if the layer name was invalid.

+ +

setLayerVisibility

this.setLayerVisibility = function(layername,
bVisible)

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

layernamethe name of the layer to change the visibility
bVisibletrue/false, whether the layer should be visible

Returns

true if the layer’s visibility was set, false otherwise

+ +

moveSelectedToLayer

this.moveSelectedToLayer = function(layername)

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

layernamethe 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.

+ +

getLayerOpacity

this.getLayerOpacity = function(layername)

Returns the opacity of the given layer.  If the input name is not a layer, null is returned.

Parameters

layernamename 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

+ +

setLayerOpacity

this.setLayerOpacity = function(layername,
opacity)

Sets the opacity of the given layer.  If the input name is not a layer, nothing happens.  This is not an undo-able action.  NOTE: this function exists solely to apply a highlighting/de-emphasis effect to a layer, when it is possible for a user to affect the opacity of a layer, we will need to allow this function to produce an undo-able action.  If opacity is not a value between 0.0 and 1.0, then nothing happens.

Parameters

layernamename of the layer on which to set the opacity
opacitya float value in the range 0.0-1.0
+ +

Document functions

+ +

clear

this.clear = function()

Clears the current document.  This is not an undoable action.

+ +

linkControlPoints

Alias function

+ +

getContentElem

this.getContentElem = function()

Returns the content DOM element

+ +

getRootElem

this.getRootElem = function()

Returns the root DOM element

+ +

getSelectedElems

this.getSelectedElems = function()

Returns the array with selected DOM elements

+ +

getResolution

var getResolution = this.getResolution = function()

Returns the current dimensions and zoom level in an object

+ +

getZoom

this.getZoom = function()

Returns the current zoom level

+ +

getVersion

this.getVersion = function()

Returns a string which describes the revision number of SvgCanvas.

+ +

setUiStrings

this.setUiStrings = function(strs)

Update interface strings with given values

Parameters

strsObject with strings (see uiStrings for examples)
+ +

setConfig

this.setConfig = function(opts)

Update configuration options with given values

Parameters

optsObject with options (see curConfig for examples)
+ +

getDocumentTitle

this.getDocumentTitle = function()

Returns the current document title or an empty string if not found

+ +

setDocumentTitle

this.setDocumentTitle = function(newtitle)

Adds/updates a title element for the document with the given name.  This is an undoable action

Parameters

newtitleString with the new title
+ +

getEditorNS

this.getEditorNS = function(add)

Returns the editor’s namespace URL, optionally adds it to root element

Parameters

addBoolean to indicate whether or not to add the namespace value
+ +

setResolution

this.setResolution = function(x,
y)

Changes the document’s dimensions to the given size

Parameters

xNumber with the width of the new dimensions in user units.  Can also be the string “fit” to indicate “fit to content”
yNumber 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.

+ +

getOffset

this.getOffset = function()

Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.

+ +

setBBoxZoom

this.setBBoxZoom = function(val,
editor_w,
editor_h)

Sets the zoom level on the canvas-side based on the given value

Parameters

valBounding box object to zoom to or string indicating zoom option
editor_wInteger with the editor’s workarea box’s width
editor_hInteger with the editor’s workarea box’s height
+ +

setZoom

this.setZoom = function(zoomlevel)

Sets the zoom to the given level

Parameters

zoomlevelFloat indicating the zoom level to change to
+ +

getMode

this.getMode = function()

Returns the current editor mode string

+ +

setMode

this.setMode = function(name)

Sets the editor’s mode to the given string

Parameters

nameString with the new mode to change to
+ +

Element Styling

+ +

getColor

this.getColor = function(type)

Returns the current fill/stroke option

+ +

setColor

this.setColor = function(type,
val,
preventUndo)

Change the current stroke/fill color/gradient value

Parameters

typeString indicating fill or stroke
valThe value to set the stroke attribute to
preventUndoBoolean indicating whether or not this should be and undoable option
+ +

findDefs

var findDefs = function()

Return the document’s <defs> element, create it first if necessary

+ +

setGradient

var setGradient = this.setGradient = function(type)

Apply the current gradient to selected element’s fill or stroke

Parameters type - String indicating “fill” or “stroke” to apply to an element

+ +

findDuplicateGradient

var findDuplicateGradient = function(grad)

Check if exact gradient already exists

Parameters

gradThe gradient DOM element to compare to others

Returns

The existing gradient if found, null if not

+ +

setPaint

this.setPaint = function(type,
paint)

Set a color/gradient to a fill/stroke

Parameters

typeString with “fill” or “stroke”
paintThe jGraduate paint object to apply
+ +

getStrokeWidth

this.getStrokeWidth = function()

Returns the current stroke-width value

+ +

setStrokeWidth

this.setStrokeWidth = function(val)

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

valA Float indicating the new stroke width value
+ +

setStrokeAttr

this.setStrokeAttr = function(attr,
val)

Set the given stroke-related attribute the given value for selected elements

Parameters

attrString with the attribute name
valString or number with the attribute value
+ +

getOpacity

this.getOpacity = function()

Returns the current opacity

+ +

setOpacity

this.setOpacity = function(val)

Sets the given opacity to the current selected elements

+ +

getOpacity

Returns the current fill opacity

+ +

getStrokeOpacity

this.getStrokeOpacity = function()

Returns the current stroke opacity

+ +

setPaintOpacity

this.setPaintOpacity = function(type,
val,
preventUndo)

Sets the current fill/stroke opacity

Parameters

typeString with “fill” or “stroke”
valFloat with the new opacity value
preventUndoBoolean indicating whether or not this should be an undoable action
+ +

getBlur

this.getBlur = function(elem)

Gets the stdDeviation blur value of the given element

Parameters

elemThe element to check the blur value for
+ +

setBlurNoUndo

canvas.setBlurNoUndo = function(val)

Sets the stdDeviation blur value on the selected element without being undoable

Parameters

valThe new stdDeviation value
+ +

setBlurOffsets

canvas.setBlurOffsets = function(filter,
stdDev)

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

filterThe filter DOM element to update
stdDevThe standard deviation value on which to base the offset size
+ +

setBlur

canvas.setBlur = function(val,
complete)

Adds/updates the blur filter to the selected element

Parameters

valFloat with the new stdDeviation blur value
completeBoolean indicating whether or not the action should be completed (to add to the undo manager)
+ +

getBold

this.getBold = function()

Check whether selected element is bold or not

Returns

Boolean indicating whether or not element is bold

+ +

setBold

this.setBold = function(b)

Make the selected element bold or normal

Parameters

bBoolean indicating bold (true) or normal (false)
+ +

getItalic

this.getItalic = function()

Check whether selected element is italic or not

Returns

Boolean indicating whether or not element is italic

+ +

setItalic

this.setItalic = function(i)

Make the selected element italic or normal

Parameters

bBoolean indicating italic (true) or normal (false)
+ +

getFontFamily

this.getFontFamily = function()

Returns the current font family

+ +

setFontFamily

this.setFontFamily = function(val)

Set the new font family

Parameters

valString with the new font family
+ +

getFontSize

this.getFontSize = function()

Returns the current font size

+ +

setFontSize

this.setFontSize = function(val)

Applies the given font size to the selected element

Parameters

valFloat with the new font size
+ +

getText

this.getText = function()

Returns the current text (textContent) of the selected element

+ +

setTextContent

this.setTextContent = function(val)

Updates the text element with the given string

Parameters

valString with the new text
+ +

setImageURL

this.setImageURL = function(val)

Sets the new image URL for the selected image element.  Updates its size if a new URL is given

Parameters

valString with the image URL/path
+ +

setRectRadius

this.setRectRadius = function(val)

Sets the rx & ry values to the selected rect element to change its corner radius

Parameters

valThe new radius
+ +

Element manipulation

+ +

setSegType

this.setSegType = function(new_type)

Sets the new segment type to the selected segment(s).

Parameters

new_typeInteger with the new segment type See http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list
+ +

convertToPath

this.convertToPath = function(elem,
getBBox)

Convert selected element to a path, or get the BBox of an element-as-path

Parameters

elemThe DOM element to be converted
getBBoxBoolean 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.

+ +

changeSelectedAttributeNoUndo

var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)

This function makes the changes to the elements.  It does not add the change to the history stack.

Parameters

attrString with the attribute name
newValueString or number with the new attribute value
elemsThe DOM elements to apply the change to
+ +

changeSelectedAttribute

var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)

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

attrString with the attribute name
newValueString or number with the new attribute value
elemsThe DOM elements to apply the change to
+ +

deleteSelectedElements

this.deleteSelectedElements = function()

Removes all selected elements from the DOM and adds the change to the history stack

+ +

groupSelectedElements

this.groupSelectedElements = function()

Wraps all the selected elements in a group (g) element

+ +

ungroupSelectedElement

this.ungroupSelectedElement = function()

Unwraps all the elements in a selected group (g) element.  This requires significant recalculations to apply group’s transforms, etc to its children

+ +

moveToTopSelectedElement

this.moveToTopSelectedElement = function()

Repositions the selected element to the bottom in the DOM to appear on top of other elements

+ +

moveToBottomSelectedElement

this.moveToBottomSelectedElement = function()

Repositions the selected element to the top in the DOM to appear under other elements

+ +

moveSelectedElements

this.moveSelectedElements = function(dx,
dy,
undoable)

Moves selected elements on the X/Y axis

Parameters

dxFloat with the distance to move on the x-axis
dyFloat with the distance to move on the y-axis
undoableBoolean indicating whether or not the action should be undoable

Returns

Batch command for the move

+ +

cloneSelectedElements

this.cloneSelectedElements = function()

Create deep DOM copies (clones) of all selected elements and move them slightly from their originals

+ +

alignSelectedElements

this.alignSelectedElements = function(type,
relative_to)

Aligns selected elements

Parameters

typeString with single character indicating the alignment type
relative_toString that must be one of the following: “selected”, “largest”, “smallest”, “page”
+ +

Additional editor tools

+ +

updateCanvas

this.updateCanvas = function(w,
h)

Updates the editor canvas width/height/position after a zoom has occurred

Parameters

wFloat with the new width
hFloat 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
+ +

setBackground

this.setBackground = function(color,
url)

Set the background of the editor (NOT the actual document)

Parameters

colorString with fill color to apply
urlURL or path to image to use
+ +

cycleElement

this.cycleElement = function(next)

Select the next/previous element within the current layer

Parameters

nextBoolean where true = next and false = previous element
+ +
+ + + + + + + + + + +
"rectsIntersect": function(r1,
r2)
Check if two rectangles (BBoxes objects) intersect each other
"snapToAngle": function(x1,
y1,
x2,
y2)
Returns a 45 degree angle coordinate associated with the two given coordinates
"text2xml": function(sXML)
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
convertToNum = function(attr,
val)
Converts given values to numbers.
setUnitAttr = function(elem,
attr,
val)
Sets an element’s attribute based on the unit in its current value.
canvas.isValidUnit = function(attr,
val)
Check if an attribute’s value is in a valid format
var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)
History command to make a change to an element.
var InsertElementCommand = this.undoCmd.insertElement = function(elem,
text)
History command for an element that was added to the DOM
var RemoveElementCommand = this.undoCmd.removeElement = function(elem,
parent,
text)
History command for an element removed from the DOM
var MoveElementCommand = this.undoCmd.moveElement = function(elem,
oldNextSibling,
oldParent,
text)
History command for an element that had its DOM position changed
var BatchCommand = this.undoCmd.batch = function(text)
History command that can contain/execute multiple other commands
resetUndoStack = function()
Resets the undo stack, effectively clearing the undo/redo history
addCommandToHistory = c.undoCmd.add = function(cmd)
Adds a command object to the undo history stack
c.beginUndoableChange = function(attrName,
elems)
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.finishUndoableChange = function()
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
function walkTree(elem,
cbFn)
Walks the tree and executes the callback on each element in a top-down fashion
function walkTreePost(elem,
cbFn)
Walks the tree and executes the callback on each element in a depth-first fashion
var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)
Assigns multiple attributes to an element.
var cleanupElement = this.cleanupElement = function(element)
Remove unneeded (default) attributes, makes resulting SVG smaller
var addSvgElementFromJson = this.addSvgElementFromJson = function(data)
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
this.addExtension = function(name,
ext_func)
Add an extension to the editor
var shortFloat = function(val)
Rounds a given value to a float with number of digits defined in save_options
var getStrokedBBox = this.getStrokedBBox = function(elems)
Get the bounding box for one or more stroked and/or transformed elements
var getVisibleElements = this.getVisibleElements = function(parent,
includeBBox)
Get all elements that have a BBox (excludes defs, title, etc).
var copyElem = function(el)
Create a clone of an element, updating its ID and its children’s IDs when needed
function getElem(id)
Get a DOM element by ID within the SVG root element.
getId = c.getId = function()
Returns the last created DOM element ID string
getNextId = c.getNextId = function()
Creates and returns a unique ID string for a DOM element
c.bind = function(event,
f)
Attaches a callback function to an event
c.setIdPrefix = function(p)
Changes the ID prefix to the given value
var sanitizeSvg = this.sanitizeSvg = function(node)
Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
var getUrlFromAttr = this.getUrlFromAttr = function(attrVal)
Extracts the URL from the url(...)
var getBBox = this.getBBox = function(elem)
Get the given/selected element’s bounding box object, convert it to be more usable when necessary
var ffClone = function(elem)
Hack for Firefox bugs where text element features aren’t updated.
var getPathBBox = function(path)
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
var getRotationAngle = this.getRotationAngle = function(elem,
to_rad)
Get the rotation angle of the given/selected DOM element
this.setRotationAngle = function(val,
preventUndo)
Removes any old rotations if present, prepends a new rotation at the transformed center
var getTransformList = this.getTransformList = function(elem)
Returns an object that behaves like a SVGTransformList for the given DOM element
var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()
Runs recalculateDimensions on the selected elements, adding the changes to a single batch command
var remapElement = this.remapElement = function(selected,
changes,
m)
Applies coordinate changes to an element based on the given matrix
var recalculateDimensions = this.recalculateDimensions = function(selected)
Decides the course of action based on the element’s transform list
var transformPoint = function(x,
y,
m)
A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
var isIdentity = function(m)
Helper function to check if the matrix performs no actual transform (i.e.
var matrixMultiply = this.matrixMultiply = function()
This function tries to return a SVGMatrix that is the multiplication m1*m2.
var transformListToTransform = this.transformListToTransform = function(tlist,
min,
max)
This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
var hasMatrixTransform = this.hasMatrixTransform = function(tlist)
See if the given transformlist includes a non-indentity matrix transform
var getMatrix = function(elem)
Get the matrix object for a given element
var transformBox = this.transformBox = function(l,
t,
w,
h,
m)
Transforms a rectangle based on the given matrix
var clearSelection = this.clearSelection = function(noCall)
Clears the selection.
var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)
Adds a list of elements to the selection.
var removeFromSelection = this.removeFromSelection = function(elemsToRemove)
Removes elements from the selection.
this.selectAllInCurrentLayer = function()
Clears the selection, then adds all elements in the current layer to the selection.
var smoothControlPoints = this.smoothControlPoints = function(ct1,
ct2,
pt)
Takes three points and creates a smoother line based on them
var getMouseTarget = this.getMouseTarget = function(evt)
Gets the desired element from a mouse event
var preventClickDefault = function(img)
Prevents default browser click behaviour on the given element
var removeUnusedDefElems = this.removeUnusedDefElems = function()
Looks at DOM elements inside the defs to see if they are referred to, removes them from the DOM if they are not.
var svgCanvasToString = this.svgCanvasToString = function()
Main function to set up the SVG content for output
var svgToString = this.svgToString = function(elem,
indent)
Sub function ran on each SVG element to convert it to a string as desired
this.embedImage = function(val,
callback)
Converts a given image file to a data URL when possible, then runs a given callback
this.save = function(opts)
Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
this.rasterExport = function()
Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
this.getSvgString = function()
Returns the current drawing as raw SVG XML text.
this.setSvgString = function(xmlString)
This function sets the current drawing as the input SVG XML.
this.importSvgString = function(xmlString)
This function imports the input SVG XML into the current layer in the drawing
var identifyLayers = function()
Updates layer system
this.createLayer = function(name)
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.deleteCurrentLayer = function()
Deletes the current layer from the drawing and then clears the selection.
this.getNumLayers = function()
Returns the number of layers in the current drawing.
this.getLayer = function(i)
Returns the name of the ith layer.
this.getCurrentLayer = function()
Returns the name of the currently selected layer.
this.setCurrentLayer = function(name)
Sets the current layer.
this.renameCurrentLayer = function(newname)
Renames the current layer.
this.setCurrentLayerPosition = function(newpos)
Changes the position of the current layer to the new value.
this.getLayerVisibility = function(layername)
Returns whether the layer is visible.
this.setLayerVisibility = function(layername,
bVisible)
Sets the visibility of the layer.
this.moveSelectedToLayer = function(layername)
Moves the selected elements to layername.
this.getLayerOpacity = function(layername)
Returns the opacity of the given layer.
this.setLayerOpacity = function(layername,
opacity)
Sets the opacity of the given layer.
this.clear = function()
Clears the current document.
this.getContentElem = function()
Returns the content DOM element
this.getRootElem = function()
Returns the root DOM element
this.getSelectedElems = function()
Returns the array with selected DOM elements
var getResolution = this.getResolution = function()
Returns the current dimensions and zoom level in an object
this.getZoom = function()
Returns the current zoom level
this.getVersion = function()
Returns a string which describes the revision number of SvgCanvas.
this.setUiStrings = function(strs)
Update interface strings with given values
this.setConfig = function(opts)
Update configuration options with given values
this.getDocumentTitle = function()
Returns the current document title or an empty string if not found
this.setDocumentTitle = function(newtitle)
Adds/updates a title element for the document with the given name.
this.getEditorNS = function(add)
Returns the editor’s namespace URL, optionally adds it to root element
this.setResolution = function(x,
y)
Changes the document’s dimensions to the given size
this.getOffset = function()
Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
this.setBBoxZoom = function(val,
editor_w,
editor_h)
Sets the zoom level on the canvas-side based on the given value
this.setZoom = function(zoomlevel)
Sets the zoom to the given level
this.getMode = function()
Returns the current editor mode string
this.setMode = function(name)
Sets the editor’s mode to the given string
this.getColor = function(type)
Returns the current fill/stroke option
this.setColor = function(type,
val,
preventUndo)
Change the current stroke/fill color/gradient value
var findDefs = function()
Return the document’s defs element, create it first if necessary
var setGradient = this.setGradient = function(type)
Apply the current gradient to selected element’s fill or stroke
var findDuplicateGradient = function(grad)
Check if exact gradient already exists
this.setPaint = function(type,
paint)
Set a color/gradient to a fill/stroke
this.getStrokeWidth = function()
Returns the current stroke-width value
this.setStrokeWidth = function(val)
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
this.setStrokeAttr = function(attr,
val)
Set the given stroke-related attribute the given value for selected elements
this.getOpacity = function()
Returns the current opacity
this.setOpacity = function(val)
Sets the given opacity to the current selected elements
this.getStrokeOpacity = function()
Returns the current stroke opacity
this.setPaintOpacity = function(type,
val,
preventUndo)
Sets the current fill/stroke opacity
this.getBlur = function(elem)
Gets the stdDeviation blur value of the given element
canvas.setBlurNoUndo = function(val)
Sets the stdDeviation blur value on the selected element without being undoable
canvas.setBlurOffsets = function(filter,
stdDev)
Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.
canvas.setBlur = function(val,
complete)
Adds/updates the blur filter to the selected element
this.getBold = function()
Check whether selected element is bold or not
this.setBold = function(b)
Make the selected element bold or normal
this.getItalic = function()
Check whether selected element is italic or not
this.setItalic = function(i)
Make the selected element italic or normal
this.getFontFamily = function()
Returns the current font family
this.setFontFamily = function(val)
Set the new font family
this.getFontSize = function()
Returns the current font size
this.setFontSize = function(val)
Applies the given font size to the selected element
this.getText = function()
Returns the current text (textContent) of the selected element
this.setTextContent = function(val)
Updates the text element with the given string
this.setImageURL = function(val)
Sets the new image URL for the selected image element.
this.setRectRadius = function(val)
Sets the rx & ry values to the selected rect element to change its corner radius
this.setSegType = function(new_type)
Sets the new segment type to the selected segment(s).
this.convertToPath = function(elem,
getBBox)
Convert selected element to a path, or get the BBox of an element-as-path
var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)
This function makes the changes to the elements.
var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)
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.
this.deleteSelectedElements = function()
Removes all selected elements from the DOM and adds the change to the history stack
this.groupSelectedElements = function()
Wraps all the selected elements in a group (g) element
this.ungroupSelectedElement = function()
Unwraps all the elements in a selected group (g) element.
this.moveToTopSelectedElement = function()
Repositions the selected element to the bottom in the DOM to appear on top of other elements
this.moveToBottomSelectedElement = function()
Repositions the selected element to the top in the DOM to appear under other elements
this.moveSelectedElements = function(dx,
dy,
undoable)
Moves selected elements on the X/Y axis
this.cloneSelectedElements = function()
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
this.alignSelectedElements = function(type,
relative_to)
Aligns selected elements
this.updateCanvas = function(w,
h)
Updates the editor canvas width/height/position after a zoom has occurred
this.setBackground = function(color,
url)
Set the background of the editor (NOT the actual document)
this.cycleElement = function(next)
Select the next/previous element within the current layer
+ + + + + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..635c317 --- /dev/null +++ b/docs/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/index/.svn/all-wcprops b/docs/index/.svn/all-wcprops new file mode 100644 index 0000000..7821eeb --- /dev/null +++ b/docs/index/.svn/all-wcprops @@ -0,0 +1,23 @@ +K 25 +svn:wc:ra_dav:version-url +V 35 +/svn/!svn/ver/1620/trunk/docs/index +END +General.html +K 25 +svn:wc:ra_dav:version-url +V 48 +/svn/!svn/ver/1620/trunk/docs/index/General.html +END +Files.html +K 25 +svn:wc:ra_dav:version-url +V 46 +/svn/!svn/ver/1607/trunk/docs/index/Files.html +END +Functions.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/index/Functions.html +END diff --git a/docs/index/.svn/entries b/docs/index/.svn/entries new file mode 100644 index 0000000..c9b11c0 --- /dev/null +++ b/docs/index/.svn/entries @@ -0,0 +1,130 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/docs/index +http://svg-edit.googlecode.com/svn + + + +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +General.html +file + + + + +2012-03-23T10:42:00.000000Z +1114df08520941319c3d6839987b2f93 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +32026 + +Files.html +file + + + + +2012-03-23T10:42:00.000000Z +8ec3c1d6f6115ad83dd6f54d99fc2e5e +2010-06-18T20:35:47.590209Z +1607 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +8185 + +Functions.html +file + + + + +2012-03-23T10:42:00.000000Z +a03cd6779b63949940317f97c5bb895e +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +30774 + diff --git a/docs/index/.svn/prop-base/Files.html.svn-base b/docs/index/.svn/prop-base/Files.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/index/.svn/prop-base/Files.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/index/.svn/prop-base/Functions.html.svn-base b/docs/index/.svn/prop-base/Functions.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/index/.svn/prop-base/Functions.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/index/.svn/prop-base/General.html.svn-base b/docs/index/.svn/prop-base/General.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/index/.svn/prop-base/General.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/index/.svn/text-base/Files.html.svn-base b/docs/index/.svn/text-base/Files.html.svn-base new file mode 100644 index 0000000..9ebbb55 --- /dev/null +++ b/docs/index/.svn/text-base/Files.html.svn-base @@ -0,0 +1,37 @@ + + +File Index + + + + + + + + + +
File Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
M
 my_svgcanvas.js
editor/my_svgcanvas.jseditor_old/my_svgcanvas.js
S
 svgcanvas-latest copy.js
editor/svgcanvas-latest copy.jseditor_old/svgcanvas-latest copy.js
 svgcanvas-mine.js
editor/svgcanvas-mine.jseditor_old/svgcanvas-mine.js
 svgcanvas-textanchor-experiment.js
editor/svgcanvas-textanchor-experiment.jseditor_old/svgcanvas-textanchor-experiment.js
 svgcanvas.js
editor/svgcanvas.jseditor_old/svgcanvas.js
 svgcanvas_subpaths.js
editor/svgcanvas_subpaths.jseditor_old/svgcanvas_subpaths.js
 svgcanvas_temp.js
editor/svgcanvas_temp.jseditor_old/svgcanvas_temp.js
+ + + + + + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/index/.svn/text-base/Functions.html.svn-base b/docs/index/.svn/text-base/Functions.html.svn-base new file mode 100644 index 0000000..9c282c2 --- /dev/null +++ b/docs/index/.svn/text-base/Functions.html.svn-base @@ -0,0 +1,53 @@ + + +Function Index + + + + + + + + + +
Function Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A
 addCommandToHistory, SvgCanvas
 addExtension, SelectorManager
 addSubCommand, SvgCanvas.BatchCommand
 addSvgElementFromJson, SelectorManager
 addToSelection, SelectorManager
 alignSelectedElements, SelectorManager
 apply
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.RemoveElementCommand
 assignAttributes, SelectorManager
B
 BatchCommand, SvgCanvas
 beginUndoableChange, SvgCanvas
 bind, SelectorManager
C
 ChangeElementCommand, SvgCanvas
 changeSelectedAttribute, SelectorManager
 changeSelectedAttributeNoUndo, SelectorManager
 cleanupElement, SelectorManager
 clear, SelectorManager
 clearSelection, SelectorManager
 cloneSelectedElements, SelectorManager
 convertToNum, SvgCanvas
 convertToPath, SelectorManager
 convertToXMLReferences, SvgCanvas.Utils
 copyElem, SelectorManager
 createLayer, SelectorManager
 cycleElement, SelectorManager
D
 decode64, SvgCanvas.Utils
 deleteCurrentLayer, SelectorManager
 deleteSelectedElements, SelectorManager
E
 elements
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.MoveElementCommandSvgCanvas.RemoveElementCommand
 embedImage, SelectorManager
 encode64, SvgCanvas.Utils
F
 ffClone, SelectorManager
 findDefs, SelectorManager
 findDuplicateGradient, SelectorManager
 finishUndoableChange, SvgCanvas
 fromXml, SvgCanvas.Utils
+ +
addCommandToHistory = c.undoCmd.add = function(cmd)
Adds a command object to the undo history stack
this.addExtension = function(name,
ext_func)
Add an extension to the editor
Adds a given command to the history stack
var addSvgElementFromJson = this.addSvgElementFromJson = function(data)
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
var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)
Adds a list of elements to the selection.
this.alignSelectedElements = function(type,
relative_to)
Aligns selected elements
Runs “apply” on all subcommands
Performs the stored change action
Re-Inserts the new element
Re-removes the new element
var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)
Assigns multiple attributes to an element.
+ + + +
var BatchCommand = this.undoCmd.batch = function(text)
History command that can contain/execute multiple other commands
c.beginUndoableChange = function(attrName,
elems)
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.bind = function(event,
f)
Attaches a callback function to an event
+ + + +
var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)
History command to make a change to an element.
var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)
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.
var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)
This function makes the changes to the elements.
var cleanupElement = this.cleanupElement = function(element)
Remove unneeded (default) attributes, makes resulting SVG smaller
this.clear = function()
Clears the current document.
var clearSelection = this.clearSelection = function(noCall)
Clears the selection.
this.cloneSelectedElements = function()
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
convertToNum = function(attr,
val)
Converts given values to numbers.
this.convertToPath = function(elem,
getBBox)
Convert selected element to a path, or get the BBox of an element-as-path
Converts a string to use XML references
var copyElem = function(el)
Create a clone of an element, updating its ID and its children’s IDs when needed
this.createLayer = function(name)
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.cycleElement = function(next)
Select the next/previous element within the current layer
+ + + +
Converts a string from base64
this.deleteCurrentLayer = function()
Deletes the current layer from the drawing and then clears the selection.
this.deleteSelectedElements = function()
Removes all selected elements from the DOM and adds the change to the history stack
+ + + +
Iterate through all our subcommands and returns all the elements we are changing
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
this.embedImage = function(val,
callback)
Converts a given image file to a data URL when possible, then runs a given callback
Converts a string to base64
+ + + +
var ffClone = function(elem)
Hack for Firefox bugs where text element features aren’t updated.
var findDefs = function()
Return the document’s defs element, create it first if necessary
var findDuplicateGradient = function(grad)
Check if exact gradient already exists
c.finishUndoableChange = function()
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
Converts XML entities in a string to single characters.
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/index/.svn/text-base/General.html.svn-base b/docs/index/.svn/text-base/General.html.svn-base new file mode 100644 index 0000000..69d5a0b --- /dev/null +++ b/docs/index/.svn/text-base/General.html.svn-base @@ -0,0 +1,53 @@ + + +Index + + + + + + + + + +
Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A
 addCommandToHistory, SvgCanvas
 addExtension, SelectorManager
 Additional editor tools, SelectorManager
 addSubCommand, SvgCanvas.BatchCommand
 addSvgElementFromJson, SelectorManager
 addToSelection, SelectorManager
 alignSelectedElements, SelectorManager
 apply
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.RemoveElementCommand
 assignAttributes, SelectorManager
B
 BatchCommand, SvgCanvas
 beginUndoableChange, SvgCanvas
 bind, SelectorManager
C
 ChangeElementCommand, SvgCanvas
 changeSelectedAttribute, SelectorManager
 changeSelectedAttributeNoUndo, SelectorManager
 cleanupElement, SelectorManager
 clear, SelectorManager
 clearSelection, SelectorManager
 cloneSelectedElements, SelectorManager
 convertToNum, SvgCanvas
 convertToPath, SelectorManager
 convertToXMLReferences, SvgCanvas.Utils
 copyElem, SelectorManager
 createLayer, SelectorManager
 cycleElement, SelectorManager
D
 decode64, SvgCanvas.Utils
 deleteCurrentLayer, SelectorManager
 deleteSelectedElements, SelectorManager
 Document functions, SelectorManager
E
 Element manipulation, SelectorManager
 Element Styling, SelectorManager
 Element Transforms, SelectorManager
 elements
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.MoveElementCommandSvgCanvas.RemoveElementCommand
 embedImage, SelectorManager
 encode64, SvgCanvas.Utils
F
 ffClone, SelectorManager
 findDefs, SelectorManager
 findDuplicateGradient, SelectorManager
 finishUndoableChange, SvgCanvas
 fromXml, SvgCanvas.Utils
 Functions, Selector
+ +
addCommandToHistory = c.undoCmd.add = function(cmd)
Adds a command object to the undo history stack
this.addExtension = function(name,
ext_func)
Add an extension to the editor
Adds a given command to the history stack
var addSvgElementFromJson = this.addSvgElementFromJson = function(data)
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
var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)
Adds a list of elements to the selection.
this.alignSelectedElements = function(type,
relative_to)
Aligns selected elements
Runs “apply” on all subcommands
Performs the stored change action
Re-Inserts the new element
Re-removes the new element
var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)
Assigns multiple attributes to an element.
+ + + +
var BatchCommand = this.undoCmd.batch = function(text)
History command that can contain/execute multiple other commands
c.beginUndoableChange = function(attrName,
elems)
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.bind = function(event,
f)
Attaches a callback function to an event
+ + + +
var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)
History command to make a change to an element.
var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)
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.
var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)
This function makes the changes to the elements.
var cleanupElement = this.cleanupElement = function(element)
Remove unneeded (default) attributes, makes resulting SVG smaller
this.clear = function()
Clears the current document.
var clearSelection = this.clearSelection = function(noCall)
Clears the selection.
this.cloneSelectedElements = function()
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
convertToNum = function(attr,
val)
Converts given values to numbers.
this.convertToPath = function(elem,
getBBox)
Convert selected element to a path, or get the BBox of an element-as-path
Converts a string to use XML references
var copyElem = function(el)
Create a clone of an element, updating its ID and its children’s IDs when needed
this.createLayer = function(name)
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.cycleElement = function(next)
Select the next/previous element within the current layer
+ + + +
Converts a string from base64
this.deleteCurrentLayer = function()
Deletes the current layer from the drawing and then clears the selection.
this.deleteSelectedElements = function()
Removes all selected elements from the DOM and adds the change to the history stack
+ + + +
Iterate through all our subcommands and returns all the elements we are changing
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
this.embedImage = function(val,
callback)
Converts a given image file to a data URL when possible, then runs a given callback
Converts a string to base64
+ + + +
var ffClone = function(elem)
Hack for Firefox bugs where text element features aren’t updated.
var findDefs = function()
Return the document’s defs element, create it first if necessary
var findDuplicateGradient = function(grad)
Check if exact gradient already exists
c.finishUndoableChange = function()
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
Converts XML entities in a string to single characters.
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/index/Files.html b/docs/index/Files.html new file mode 100644 index 0000000..9ebbb55 --- /dev/null +++ b/docs/index/Files.html @@ -0,0 +1,37 @@ + + +File Index + + + + + + + + + +
File Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
M
 my_svgcanvas.js
editor/my_svgcanvas.jseditor_old/my_svgcanvas.js
S
 svgcanvas-latest copy.js
editor/svgcanvas-latest copy.jseditor_old/svgcanvas-latest copy.js
 svgcanvas-mine.js
editor/svgcanvas-mine.jseditor_old/svgcanvas-mine.js
 svgcanvas-textanchor-experiment.js
editor/svgcanvas-textanchor-experiment.jseditor_old/svgcanvas-textanchor-experiment.js
 svgcanvas.js
editor/svgcanvas.jseditor_old/svgcanvas.js
 svgcanvas_subpaths.js
editor/svgcanvas_subpaths.jseditor_old/svgcanvas_subpaths.js
 svgcanvas_temp.js
editor/svgcanvas_temp.jseditor_old/svgcanvas_temp.js
+ + + + + + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/index/Functions.html b/docs/index/Functions.html new file mode 100644 index 0000000..9c282c2 --- /dev/null +++ b/docs/index/Functions.html @@ -0,0 +1,53 @@ + + +Function Index + + + + + + + + + +
Function Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A
 addCommandToHistory, SvgCanvas
 addExtension, SelectorManager
 addSubCommand, SvgCanvas.BatchCommand
 addSvgElementFromJson, SelectorManager
 addToSelection, SelectorManager
 alignSelectedElements, SelectorManager
 apply
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.RemoveElementCommand
 assignAttributes, SelectorManager
B
 BatchCommand, SvgCanvas
 beginUndoableChange, SvgCanvas
 bind, SelectorManager
C
 ChangeElementCommand, SvgCanvas
 changeSelectedAttribute, SelectorManager
 changeSelectedAttributeNoUndo, SelectorManager
 cleanupElement, SelectorManager
 clear, SelectorManager
 clearSelection, SelectorManager
 cloneSelectedElements, SelectorManager
 convertToNum, SvgCanvas
 convertToPath, SelectorManager
 convertToXMLReferences, SvgCanvas.Utils
 copyElem, SelectorManager
 createLayer, SelectorManager
 cycleElement, SelectorManager
D
 decode64, SvgCanvas.Utils
 deleteCurrentLayer, SelectorManager
 deleteSelectedElements, SelectorManager
E
 elements
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.MoveElementCommandSvgCanvas.RemoveElementCommand
 embedImage, SelectorManager
 encode64, SvgCanvas.Utils
F
 ffClone, SelectorManager
 findDefs, SelectorManager
 findDuplicateGradient, SelectorManager
 finishUndoableChange, SvgCanvas
 fromXml, SvgCanvas.Utils
+ +
addCommandToHistory = c.undoCmd.add = function(cmd)
Adds a command object to the undo history stack
this.addExtension = function(name,
ext_func)
Add an extension to the editor
Adds a given command to the history stack
var addSvgElementFromJson = this.addSvgElementFromJson = function(data)
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
var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)
Adds a list of elements to the selection.
this.alignSelectedElements = function(type,
relative_to)
Aligns selected elements
Runs “apply” on all subcommands
Performs the stored change action
Re-Inserts the new element
Re-removes the new element
var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)
Assigns multiple attributes to an element.
+ + + +
var BatchCommand = this.undoCmd.batch = function(text)
History command that can contain/execute multiple other commands
c.beginUndoableChange = function(attrName,
elems)
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.bind = function(event,
f)
Attaches a callback function to an event
+ + + +
var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)
History command to make a change to an element.
var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)
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.
var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)
This function makes the changes to the elements.
var cleanupElement = this.cleanupElement = function(element)
Remove unneeded (default) attributes, makes resulting SVG smaller
this.clear = function()
Clears the current document.
var clearSelection = this.clearSelection = function(noCall)
Clears the selection.
this.cloneSelectedElements = function()
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
convertToNum = function(attr,
val)
Converts given values to numbers.
this.convertToPath = function(elem,
getBBox)
Convert selected element to a path, or get the BBox of an element-as-path
Converts a string to use XML references
var copyElem = function(el)
Create a clone of an element, updating its ID and its children’s IDs when needed
this.createLayer = function(name)
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.cycleElement = function(next)
Select the next/previous element within the current layer
+ + + +
Converts a string from base64
this.deleteCurrentLayer = function()
Deletes the current layer from the drawing and then clears the selection.
this.deleteSelectedElements = function()
Removes all selected elements from the DOM and adds the change to the history stack
+ + + +
Iterate through all our subcommands and returns all the elements we are changing
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
this.embedImage = function(val,
callback)
Converts a given image file to a data URL when possible, then runs a given callback
Converts a string to base64
+ + + +
var ffClone = function(elem)
Hack for Firefox bugs where text element features aren’t updated.
var findDefs = function()
Return the document’s defs element, create it first if necessary
var findDuplicateGradient = function(grad)
Check if exact gradient already exists
c.finishUndoableChange = function()
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
Converts XML entities in a string to single characters.
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/index/General.html b/docs/index/General.html new file mode 100644 index 0000000..69d5a0b --- /dev/null +++ b/docs/index/General.html @@ -0,0 +1,53 @@ + + +Index + + + + + + + + + +
Index
$#! · 0-9 · A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z
A
 addCommandToHistory, SvgCanvas
 addExtension, SelectorManager
 Additional editor tools, SelectorManager
 addSubCommand, SvgCanvas.BatchCommand
 addSvgElementFromJson, SelectorManager
 addToSelection, SelectorManager
 alignSelectedElements, SelectorManager
 apply
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.RemoveElementCommand
 assignAttributes, SelectorManager
B
 BatchCommand, SvgCanvas
 beginUndoableChange, SvgCanvas
 bind, SelectorManager
C
 ChangeElementCommand, SvgCanvas
 changeSelectedAttribute, SelectorManager
 changeSelectedAttributeNoUndo, SelectorManager
 cleanupElement, SelectorManager
 clear, SelectorManager
 clearSelection, SelectorManager
 cloneSelectedElements, SelectorManager
 convertToNum, SvgCanvas
 convertToPath, SelectorManager
 convertToXMLReferences, SvgCanvas.Utils
 copyElem, SelectorManager
 createLayer, SelectorManager
 cycleElement, SelectorManager
D
 decode64, SvgCanvas.Utils
 deleteCurrentLayer, SelectorManager
 deleteSelectedElements, SelectorManager
 Document functions, SelectorManager
E
 Element manipulation, SelectorManager
 Element Styling, SelectorManager
 Element Transforms, SelectorManager
 elements
SvgCanvas.BatchCommandSvgCanvas.ChangeElementCommandSvgCanvas.InsertElementCommandSvgCanvas.MoveElementCommandSvgCanvas.RemoveElementCommand
 embedImage, SelectorManager
 encode64, SvgCanvas.Utils
F
 ffClone, SelectorManager
 findDefs, SelectorManager
 findDuplicateGradient, SelectorManager
 finishUndoableChange, SvgCanvas
 fromXml, SvgCanvas.Utils
 Functions, Selector
+ +
addCommandToHistory = c.undoCmd.add = function(cmd)
Adds a command object to the undo history stack
this.addExtension = function(name,
ext_func)
Add an extension to the editor
Adds a given command to the history stack
var addSvgElementFromJson = this.addSvgElementFromJson = function(data)
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
var addToSelection = this.addToSelection = function(elemsToAdd,
showGrips)
Adds a list of elements to the selection.
this.alignSelectedElements = function(type,
relative_to)
Aligns selected elements
Runs “apply” on all subcommands
Performs the stored change action
Re-Inserts the new element
Re-removes the new element
var assignAttributes = this.assignAttributes = function(node,
attrs,
suspendLength,
unitCheck)
Assigns multiple attributes to an element.
+ + + +
var BatchCommand = this.undoCmd.batch = function(text)
History command that can contain/execute multiple other commands
c.beginUndoableChange = function(attrName,
elems)
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.bind = function(event,
f)
Attaches a callback function to an event
+ + + +
var ChangeElementCommand = this.undoCmd.changeElement = function(elem,
attrs,
text)
History command to make a change to an element.
var changeSelectedAttribute = this.changeSelectedAttribute = function(attr,
val,
elems)
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.
var changeSelectedAttributeNoUndo = function(attr,
newValue,
elems)
This function makes the changes to the elements.
var cleanupElement = this.cleanupElement = function(element)
Remove unneeded (default) attributes, makes resulting SVG smaller
this.clear = function()
Clears the current document.
var clearSelection = this.clearSelection = function(noCall)
Clears the selection.
this.cloneSelectedElements = function()
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
convertToNum = function(attr,
val)
Converts given values to numbers.
this.convertToPath = function(elem,
getBBox)
Convert selected element to a path, or get the BBox of an element-as-path
Converts a string to use XML references
var copyElem = function(el)
Create a clone of an element, updating its ID and its children’s IDs when needed
this.createLayer = function(name)
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.cycleElement = function(next)
Select the next/previous element within the current layer
+ + + +
Converts a string from base64
this.deleteCurrentLayer = function()
Deletes the current layer from the drawing and then clears the selection.
this.deleteSelectedElements = function()
Removes all selected elements from the DOM and adds the change to the history stack
+ + + +
Iterate through all our subcommands and returns all the elements we are changing
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
Returns array with element associated with this command
this.embedImage = function(val,
callback)
Converts a given image file to a data URL when possible, then runs a given callback
Converts a string to base64
+ + + +
var ffClone = function(elem)
Hack for Firefox bugs where text element features aren’t updated.
var findDefs = function()
Return the document’s defs element, create it first if necessary
var findDuplicateGradient = function(grad)
Check if exact gradient already exists
c.finishUndoableChange = function()
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
Converts XML entities in a string to single characters.
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/javascript/.svn/all-wcprops b/docs/javascript/.svn/all-wcprops new file mode 100644 index 0000000..6c302fe --- /dev/null +++ b/docs/javascript/.svn/all-wcprops @@ -0,0 +1,17 @@ +K 25 +svn:wc:ra_dav:version-url +V 40 +/svn/!svn/ver/1620/trunk/docs/javascript +END +main.js +K 25 +svn:wc:ra_dav:version-url +V 47 +/svn/!svn/ver/791/trunk/docs/javascript/main.js +END +searchdata.js +K 25 +svn:wc:ra_dav:version-url +V 54 +/svn/!svn/ver/1620/trunk/docs/javascript/searchdata.js +END diff --git a/docs/javascript/.svn/entries b/docs/javascript/.svn/entries new file mode 100644 index 0000000..55271a5 --- /dev/null +++ b/docs/javascript/.svn/entries @@ -0,0 +1,96 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/docs/javascript +http://svg-edit.googlecode.com/svn + + + +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +main.js +file + + + + +2012-03-23T10:42:00.000000Z +39bb24d13aa826d1a11285cfa91a0d69 +2009-10-09T19:16:58.262697Z +791 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +25346 + +searchdata.js +file + + + + +2012-03-23T10:42:00.000000Z +5c026a814862059225b0d10f1ef421dc +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +2170 + diff --git a/docs/javascript/.svn/prop-base/main.js.svn-base b/docs/javascript/.svn/prop-base/main.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/docs/javascript/.svn/prop-base/main.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/docs/javascript/.svn/prop-base/searchdata.js.svn-base b/docs/javascript/.svn/prop-base/searchdata.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/docs/javascript/.svn/prop-base/searchdata.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/docs/javascript/.svn/text-base/main.js.svn-base b/docs/javascript/.svn/text-base/main.js.svn-base new file mode 100644 index 0000000..efcdca9 --- /dev/null +++ b/docs/javascript/.svn/text-base/main.js.svn-base @@ -0,0 +1,836 @@ +// This file is part of Natural Docs, which is Copyright (C) 2003-2008 Greg Valure +// Natural Docs is licensed under the GPL + + +// +// Browser Styles +// ____________________________________________________________________________ + +var agt=navigator.userAgent.toLowerCase(); +var browserType; +var browserVer; + +if (agt.indexOf("opera") != -1) + { + browserType = "Opera"; + + if (agt.indexOf("opera 7") != -1 || agt.indexOf("opera/7") != -1) + { browserVer = "Opera7"; } + else if (agt.indexOf("opera 8") != -1 || agt.indexOf("opera/8") != -1) + { browserVer = "Opera8"; } + else if (agt.indexOf("opera 9") != -1 || agt.indexOf("opera/9") != -1) + { browserVer = "Opera9"; } + } + +else if (agt.indexOf("applewebkit") != -1) + { + browserType = "Safari"; + + if (agt.indexOf("version/3") != -1) + { browserVer = "Safari3"; } + else if (agt.indexOf("safari/4") != -1) + { browserVer = "Safari2"; } + } + +else if (agt.indexOf("khtml") != -1) + { + browserType = "Konqueror"; + } + +else if (agt.indexOf("msie") != -1) + { + browserType = "IE"; + + if (agt.indexOf("msie 6") != -1) + { browserVer = "IE6"; } + else if (agt.indexOf("msie 7") != -1) + { browserVer = "IE7"; } + } + +else if (agt.indexOf("gecko") != -1) + { + browserType = "Firefox"; + + if (agt.indexOf("rv:1.7") != -1) + { browserVer = "Firefox1"; } + else if (agt.indexOf("rv:1.8)") != -1 || agt.indexOf("rv:1.8.0") != -1) + { browserVer = "Firefox15"; } + else if (agt.indexOf("rv:1.8.1") != -1) + { browserVer = "Firefox2"; } + } + + +// +// Support Functions +// ____________________________________________________________________________ + + +function GetXPosition(item) + { + var position = 0; + + if (item.offsetWidth != null) + { + while (item != document.body && item != null) + { + position += item.offsetLeft; + item = item.offsetParent; + }; + }; + + return position; + }; + + +function GetYPosition(item) + { + var position = 0; + + if (item.offsetWidth != null) + { + while (item != document.body && item != null) + { + position += item.offsetTop; + item = item.offsetParent; + }; + }; + + return position; + }; + + +function MoveToPosition(item, x, y) + { + // Opera 5 chokes on the px extension, so it can use the Microsoft one instead. + + if (item.style.left != null) + { + item.style.left = x + "px"; + item.style.top = y + "px"; + } + else if (item.style.pixelLeft != null) + { + item.style.pixelLeft = x; + item.style.pixelTop = y; + }; + }; + + +// +// Menu +// ____________________________________________________________________________ + + +function ToggleMenu(id) + { + if (!window.document.getElementById) + { return; }; + + var display = window.document.getElementById(id).style.display; + + if (display == "none") + { display = "block"; } + else + { display = "none"; } + + window.document.getElementById(id).style.display = display; + } + +function HideAllBut(ids, max) + { + if (document.getElementById) + { + ids.sort( function(a,b) { return a - b; } ); + var number = 1; + + while (number < max) + { + if (ids.length > 0 && number == ids[0]) + { ids.shift(); } + else + { + document.getElementById("MGroupContent" + number).style.display = "none"; + }; + + number++; + }; + }; + } + + +// +// Tooltips +// ____________________________________________________________________________ + + +var tooltipTimer = 0; + +function ShowTip(event, tooltipID, linkID) + { + if (tooltipTimer) + { clearTimeout(tooltipTimer); }; + + var docX = event.clientX + window.pageXOffset; + var docY = event.clientY + window.pageYOffset; + + var showCommand = "ReallyShowTip('" + tooltipID + "', '" + linkID + "', " + docX + ", " + docY + ")"; + + tooltipTimer = setTimeout(showCommand, 1000); + } + +function ReallyShowTip(tooltipID, linkID, docX, docY) + { + tooltipTimer = 0; + + var tooltip; + var link; + + if (document.getElementById) + { + tooltip = document.getElementById(tooltipID); + link = document.getElementById(linkID); + } +/* else if (document.all) + { + tooltip = eval("document.all['" + tooltipID + "']"); + link = eval("document.all['" + linkID + "']"); + } +*/ + if (tooltip) + { + var left = GetXPosition(link); + var top = GetYPosition(link); + top += link.offsetHeight; + + + // The fallback method is to use the mouse X and Y relative to the document. We use a separate if and test if its a number + // in case some browser snuck through the above if statement but didn't support everything. + + if (!isFinite(top) || top == 0) + { + left = docX; + top = docY; + } + + // Some spacing to get it out from under the cursor. + + top += 10; + + // Make sure the tooltip doesnt get smushed by being too close to the edge, or in some browsers, go off the edge of the + // page. We do it here because Konqueror does get offsetWidth right even if it doesnt get the positioning right. + + if (tooltip.offsetWidth != null) + { + var width = tooltip.offsetWidth; + var docWidth = document.body.clientWidth; + + if (left + width > docWidth) + { left = docWidth - width - 1; } + + // If there's a horizontal scroll bar we could go past zero because it's using the page width, not the window width. + if (left < 0) + { left = 0; }; + } + + MoveToPosition(tooltip, left, top); + tooltip.style.visibility = "visible"; + } + } + +function HideTip(tooltipID) + { + if (tooltipTimer) + { + clearTimeout(tooltipTimer); + tooltipTimer = 0; + } + + var tooltip; + + if (document.getElementById) + { tooltip = document.getElementById(tooltipID); } + else if (document.all) + { tooltip = eval("document.all['" + tooltipID + "']"); } + + if (tooltip) + { tooltip.style.visibility = "hidden"; } + } + + +// +// Blockquote fix for IE +// ____________________________________________________________________________ + + +function NDOnLoad() + { + if (browserVer == "IE6") + { + var scrollboxes = document.getElementsByTagName('blockquote'); + + if (scrollboxes.item(0)) + { + NDDoResize(); + window.onresize=NDOnResize; + }; + }; + }; + + +var resizeTimer = 0; + +function NDOnResize() + { + if (resizeTimer != 0) + { clearTimeout(resizeTimer); }; + + resizeTimer = setTimeout(NDDoResize, 250); + }; + + +function NDDoResize() + { + var scrollboxes = document.getElementsByTagName('blockquote'); + + var i; + var item; + + i = 0; + while (item = scrollboxes.item(i)) + { + item.style.width = 100; + i++; + }; + + i = 0; + while (item = scrollboxes.item(i)) + { + item.style.width = item.parentNode.offsetWidth; + i++; + }; + + clearTimeout(resizeTimer); + resizeTimer = 0; + } + + + +/* ________________________________________________________________________________________________________ + + Class: SearchPanel + ________________________________________________________________________________________________________ + + A class handling everything associated with the search panel. + + Parameters: + + name - The name of the global variable that will be storing this instance. Is needed to be able to set timeouts. + mode - The mode the search is going to work in. Pass CommandLineOption()>, so the + value will be something like "HTML" or "FramedHTML". + + ________________________________________________________________________________________________________ +*/ + + +function SearchPanel(name, mode, resultsPath) + { + if (!name || !mode || !resultsPath) + { alert("Incorrect parameters to SearchPanel."); }; + + + // Group: Variables + // ________________________________________________________________________ + + /* + var: name + The name of the global variable that will be storing this instance of the class. + */ + this.name = name; + + /* + var: mode + The mode the search is going to work in, such as "HTML" or "FramedHTML". + */ + this.mode = mode; + + /* + var: resultsPath + The relative path from the current HTML page to the results page directory. + */ + this.resultsPath = resultsPath; + + /* + var: keyTimeout + The timeout used between a keystroke and when a search is performed. + */ + this.keyTimeout = 0; + + /* + var: keyTimeoutLength + The length of in thousandths of a second. + */ + this.keyTimeoutLength = 500; + + /* + var: lastSearchValue + The last search string executed, or an empty string if none. + */ + this.lastSearchValue = ""; + + /* + var: lastResultsPage + The last results page. The value is only relevant if is set. + */ + this.lastResultsPage = ""; + + /* + var: deactivateTimeout + + The timeout used between when a control is deactivated and when the entire panel is deactivated. Is necessary + because a control may be deactivated in favor of another control in the same panel, in which case it should stay + active. + */ + this.deactivateTimout = 0; + + /* + var: deactivateTimeoutLength + The length of in thousandths of a second. + */ + this.deactivateTimeoutLength = 200; + + + + + // Group: DOM Elements + // ________________________________________________________________________ + + + // Function: DOMSearchField + this.DOMSearchField = function() + { return document.getElementById("MSearchField"); }; + + // Function: DOMSearchType + this.DOMSearchType = function() + { return document.getElementById("MSearchType"); }; + + // Function: DOMPopupSearchResults + this.DOMPopupSearchResults = function() + { return document.getElementById("MSearchResults"); }; + + // Function: DOMPopupSearchResultsWindow + this.DOMPopupSearchResultsWindow = function() + { return document.getElementById("MSearchResultsWindow"); }; + + // Function: DOMSearchPanel + this.DOMSearchPanel = function() + { return document.getElementById("MSearchPanel"); }; + + + + + // Group: Event Handlers + // ________________________________________________________________________ + + + /* + Function: OnSearchFieldFocus + Called when focus is added or removed from the search field. + */ + this.OnSearchFieldFocus = function(isActive) + { + this.Activate(isActive); + }; + + + /* + Function: OnSearchFieldChange + Called when the content of the search field is changed. + */ + this.OnSearchFieldChange = function() + { + if (this.keyTimeout) + { + clearTimeout(this.keyTimeout); + this.keyTimeout = 0; + }; + + var searchValue = this.DOMSearchField().value.replace(/ +/g, ""); + + if (searchValue != this.lastSearchValue) + { + if (searchValue != "") + { + this.keyTimeout = setTimeout(this.name + ".Search()", this.keyTimeoutLength); + } + else + { + if (this.mode == "HTML") + { this.DOMPopupSearchResultsWindow().style.display = "none"; }; + this.lastSearchValue = ""; + }; + }; + }; + + + /* + Function: OnSearchTypeFocus + Called when focus is added or removed from the search type. + */ + this.OnSearchTypeFocus = function(isActive) + { + this.Activate(isActive); + }; + + + /* + Function: OnSearchTypeChange + Called when the search type is changed. + */ + this.OnSearchTypeChange = function() + { + var searchValue = this.DOMSearchField().value.replace(/ +/g, ""); + + if (searchValue != "") + { + this.Search(); + }; + }; + + + + // Group: Action Functions + // ________________________________________________________________________ + + + /* + Function: CloseResultsWindow + Closes the results window. + */ + this.CloseResultsWindow = function() + { + this.DOMPopupSearchResultsWindow().style.display = "none"; + this.Activate(false, true); + }; + + + /* + Function: Search + Performs a search. + */ + this.Search = function() + { + this.keyTimeout = 0; + + var searchValue = this.DOMSearchField().value.replace(/^ +/, ""); + var searchTopic = this.DOMSearchType().value; + + var pageExtension = searchValue.substr(0,1); + + if (pageExtension.match(/^[a-z]/i)) + { pageExtension = pageExtension.toUpperCase(); } + else if (pageExtension.match(/^[0-9]/)) + { pageExtension = 'Numbers'; } + else + { pageExtension = "Symbols"; }; + + var resultsPage; + var resultsPageWithSearch; + var hasResultsPage; + + // indexSectionsWithContent is defined in searchdata.js + if (indexSectionsWithContent[searchTopic][pageExtension] == true) + { + resultsPage = this.resultsPath + '/' + searchTopic + pageExtension + '.html'; + resultsPageWithSearch = resultsPage+'?'+escape(searchValue); + hasResultsPage = true; + } + else + { + resultsPage = this.resultsPath + '/NoResults.html'; + resultsPageWithSearch = resultsPage; + hasResultsPage = false; + }; + + var resultsFrame; + if (this.mode == "HTML") + { resultsFrame = window.frames.MSearchResults; } + else if (this.mode == "FramedHTML") + { resultsFrame = window.top.frames['Content']; }; + + + if (resultsPage != this.lastResultsPage || + + // Bug in IE. If everything becomes hidden in a run, none of them will be able to be reshown in the next for some + // reason. It counts the right number of results, and you can even read the display as "block" after setting it, but it + // just doesn't work in IE 6 or IE 7. So if we're on the right page but the previous search had no results, reload the + // page anyway to get around the bug. + (browserType == "IE" && hasResultsPage && + (!resultsFrame.searchResults || resultsFrame.searchResults.lastMatchCount == 0)) ) + + { + resultsFrame.location.href = resultsPageWithSearch; + } + + // So if the results page is right and there's no IE bug, reperform the search on the existing page. We have to check if there + // are results because NoResults.html doesn't have any JavaScript, and it would be useless to do anything on that page even + // if it did. + else if (hasResultsPage) + { + // We need to check if this exists in case the frame is present but didn't finish loading. + if (resultsFrame.searchResults) + { resultsFrame.searchResults.Search(searchValue); } + + // Otherwise just reload instead of waiting. + else + { resultsFrame.location.href = resultsPageWithSearch; }; + }; + + + var domPopupSearchResultsWindow = this.DOMPopupSearchResultsWindow(); + + if (this.mode == "HTML" && domPopupSearchResultsWindow.style.display != "block") + { + var domSearchType = this.DOMSearchType(); + + var left = GetXPosition(domSearchType); + var top = GetYPosition(domSearchType) + domSearchType.offsetHeight; + + MoveToPosition(domPopupSearchResultsWindow, left, top); + domPopupSearchResultsWindow.style.display = 'block'; + }; + + + this.lastSearchValue = searchValue; + this.lastResultsPage = resultsPage; + }; + + + + // Group: Activation Functions + // Functions that handle whether the entire panel is active or not. + // ________________________________________________________________________ + + + /* + Function: Activate + + Activates or deactivates the search panel, resetting things to their default values if necessary. You can call this on every + control's OnBlur() and it will handle not deactivating the entire panel when focus is just switching between them transparently. + + Parameters: + + isActive - Whether you're activating or deactivating the panel. + ignoreDeactivateDelay - Set if you're positive the action will deactivate the panel and thus want to skip the delay. + */ + this.Activate = function(isActive, ignoreDeactivateDelay) + { + // We want to ignore isActive being false while the results window is open. + if (isActive || (this.mode == "HTML" && this.DOMPopupSearchResultsWindow().style.display == "block")) + { + if (this.inactivateTimeout) + { + clearTimeout(this.inactivateTimeout); + this.inactivateTimeout = 0; + }; + + this.DOMSearchPanel().className = 'MSearchPanelActive'; + + var searchField = this.DOMSearchField(); + + if (searchField.value == 'Search') + { searchField.value = ""; } + } + else if (!ignoreDeactivateDelay) + { + this.inactivateTimeout = setTimeout(this.name + ".InactivateAfterTimeout()", this.inactivateTimeoutLength); + } + else + { + this.InactivateAfterTimeout(); + }; + }; + + + /* + Function: InactivateAfterTimeout + + Called by , which is set by . Inactivation occurs on a timeout because a control may + receive OnBlur() when focus is really transferring to another control in the search panel. In this case we don't want to + actually deactivate the panel because not only would that cause a visible flicker but it could also reset the search value. + So by doing it on a timeout instead, there's a short period where the second control's OnFocus() can cancel the deactivation. + */ + this.InactivateAfterTimeout = function() + { + this.inactivateTimeout = 0; + + this.DOMSearchPanel().className = 'MSearchPanelInactive'; + this.DOMSearchField().value = "Search"; + + this.lastSearchValue = ""; + this.lastResultsPage = ""; + }; + }; + + + + +/* ________________________________________________________________________________________________________ + + Class: SearchResults + _________________________________________________________________________________________________________ + + The class that handles everything on the search results page. + _________________________________________________________________________________________________________ +*/ + + +function SearchResults(name, mode) + { + /* + var: mode + The mode the search is going to work in, such as "HTML" or "FramedHTML". + */ + this.mode = mode; + + /* + var: lastMatchCount + The number of matches from the last run of . + */ + this.lastMatchCount = 0; + + + /* + Function: Toggle + Toggles the visibility of the passed element ID. + */ + this.Toggle = function(id) + { + if (this.mode == "FramedHTML") + { return; }; + + var parentElement = document.getElementById(id); + + var element = parentElement.firstChild; + + while (element && element != parentElement) + { + if (element.nodeName == 'DIV' && element.className == 'ISubIndex') + { + if (element.style.display == 'block') + { element.style.display = "none"; } + else + { element.style.display = 'block'; } + }; + + if (element.nodeName == 'DIV' && element.hasChildNodes()) + { element = element.firstChild; } + else if (element.nextSibling) + { element = element.nextSibling; } + else + { + do + { + element = element.parentNode; + } + while (element && element != parentElement && !element.nextSibling); + + if (element && element != parentElement) + { element = element.nextSibling; }; + }; + }; + }; + + + /* + Function: Search + + Searches for the passed string. If there is no parameter, it takes it from the URL query. + + Always returns true, since other documents may try to call it and that may or may not be possible. + */ + this.Search = function(search) + { + if (!search) + { + search = window.location.search; + search = search.substring(1); // Remove the leading ? + search = unescape(search); + }; + + search = search.replace(/^ +/, ""); + search = search.replace(/ +$/, ""); + search = search.toLowerCase(); + + if (search.match(/[^a-z0-9]/)) // Just a little speedup so it doesn't have to go through the below unnecessarily. + { + search = search.replace(/\_/g, "_und"); + search = search.replace(/\ +/gi, "_spc"); + search = search.replace(/\~/g, "_til"); + search = search.replace(/\!/g, "_exc"); + search = search.replace(/\@/g, "_att"); + search = search.replace(/\#/g, "_num"); + search = search.replace(/\$/g, "_dol"); + search = search.replace(/\%/g, "_pct"); + search = search.replace(/\^/g, "_car"); + search = search.replace(/\&/g, "_amp"); + search = search.replace(/\*/g, "_ast"); + search = search.replace(/\(/g, "_lpa"); + search = search.replace(/\)/g, "_rpa"); + search = search.replace(/\-/g, "_min"); + search = search.replace(/\+/g, "_plu"); + search = search.replace(/\=/g, "_equ"); + search = search.replace(/\{/g, "_lbc"); + search = search.replace(/\}/g, "_rbc"); + search = search.replace(/\[/g, "_lbk"); + search = search.replace(/\]/g, "_rbk"); + search = search.replace(/\:/g, "_col"); + search = search.replace(/\;/g, "_sco"); + search = search.replace(/\"/g, "_quo"); + search = search.replace(/\'/g, "_apo"); + search = search.replace(/\/g, "_ran"); + search = search.replace(/\,/g, "_com"); + search = search.replace(/\./g, "_per"); + search = search.replace(/\?/g, "_que"); + search = search.replace(/\//g, "_sla"); + search = search.replace(/[^a-z0-9\_]i/gi, "_zzz"); + }; + + var resultRows = document.getElementsByTagName("div"); + var matches = 0; + + var i = 0; + while (i < resultRows.length) + { + var row = resultRows.item(i); + + if (row.className == "SRResult") + { + var rowMatchName = row.id.toLowerCase(); + rowMatchName = rowMatchName.replace(/^sr\d*_/, ''); + + if (search.length <= rowMatchName.length && rowMatchName.substr(0, search.length) == search) + { + row.style.display = "block"; + matches++; + } + else + { row.style.display = "none"; }; + }; + + i++; + }; + + document.getElementById("Searching").style.display="none"; + + if (matches == 0) + { document.getElementById("NoMatches").style.display="block"; } + else + { document.getElementById("NoMatches").style.display="none"; } + + this.lastMatchCount = matches; + + return true; + }; + }; + diff --git a/docs/javascript/.svn/text-base/searchdata.js.svn-base b/docs/javascript/.svn/text-base/searchdata.js.svn-base new file mode 100644 index 0000000..eac176a --- /dev/null +++ b/docs/javascript/.svn/text-base/searchdata.js.svn-base @@ -0,0 +1,122 @@ +var indexSectionsWithContent = { + "General": { + "Symbols": false, + "Numbers": false, + "A": true, + "B": false, + "C": true, + "D": true, + "E": false, + "F": true, + "G": true, + "H": true, + "I": true, + "J": false, + "K": false, + "L": true, + "M": true, + "N": false, + "O": true, + "P": false, + "Q": false, + "R": true, + "S": true, + "T": false, + "U": false, + "V": false, + "W": false, + "X": false, + "Y": false, + "Z": false + }, + "Functions": { + "Symbols": false, + "Numbers": false, + "A": true, + "B": true, + "C": true, + "D": true, + "E": true, + "F": true, + "G": true, + "H": true, + "I": true, + "J": false, + "K": false, + "L": true, + "M": true, + "N": false, + "O": false, + "P": true, + "Q": false, + "R": true, + "S": true, + "T": true, + "U": true, + "V": false, + "W": true, + "X": false, + "Y": false, + "Z": false + }, + "Interfaces": { + "Symbols": false, + "Numbers": false, + "A": false, + "B": false, + "C": false, + "D": false, + "E": false, + "F": false, + "G": false, + "H": false, + "I": false, + "J": false, + "K": false, + "L": false, + "M": false, + "N": false, + "O": false, + "P": false, + "Q": false, + "R": false, + "S": true, + "T": false, + "U": false, + "V": false, + "W": false, + "X": false, + "Y": false, + "Z": false + }, + "Classes": { + "Symbols": false, + "Numbers": false, + "A": false, + "B": false, + "C": false, + "D": false, + "E": false, + "F": false, + "G": false, + "H": false, + "I": false, + "J": false, + "K": false, + "L": false, + "M": false, + "N": false, + "O": false, + "P": false, + "Q": false, + "R": false, + "S": true, + "T": false, + "U": false, + "V": false, + "W": false, + "X": false, + "Y": false, + "Z": false + } + } \ No newline at end of file diff --git a/docs/javascript/main.js b/docs/javascript/main.js new file mode 100644 index 0000000..efcdca9 --- /dev/null +++ b/docs/javascript/main.js @@ -0,0 +1,836 @@ +// This file is part of Natural Docs, which is Copyright (C) 2003-2008 Greg Valure +// Natural Docs is licensed under the GPL + + +// +// Browser Styles +// ____________________________________________________________________________ + +var agt=navigator.userAgent.toLowerCase(); +var browserType; +var browserVer; + +if (agt.indexOf("opera") != -1) + { + browserType = "Opera"; + + if (agt.indexOf("opera 7") != -1 || agt.indexOf("opera/7") != -1) + { browserVer = "Opera7"; } + else if (agt.indexOf("opera 8") != -1 || agt.indexOf("opera/8") != -1) + { browserVer = "Opera8"; } + else if (agt.indexOf("opera 9") != -1 || agt.indexOf("opera/9") != -1) + { browserVer = "Opera9"; } + } + +else if (agt.indexOf("applewebkit") != -1) + { + browserType = "Safari"; + + if (agt.indexOf("version/3") != -1) + { browserVer = "Safari3"; } + else if (agt.indexOf("safari/4") != -1) + { browserVer = "Safari2"; } + } + +else if (agt.indexOf("khtml") != -1) + { + browserType = "Konqueror"; + } + +else if (agt.indexOf("msie") != -1) + { + browserType = "IE"; + + if (agt.indexOf("msie 6") != -1) + { browserVer = "IE6"; } + else if (agt.indexOf("msie 7") != -1) + { browserVer = "IE7"; } + } + +else if (agt.indexOf("gecko") != -1) + { + browserType = "Firefox"; + + if (agt.indexOf("rv:1.7") != -1) + { browserVer = "Firefox1"; } + else if (agt.indexOf("rv:1.8)") != -1 || agt.indexOf("rv:1.8.0") != -1) + { browserVer = "Firefox15"; } + else if (agt.indexOf("rv:1.8.1") != -1) + { browserVer = "Firefox2"; } + } + + +// +// Support Functions +// ____________________________________________________________________________ + + +function GetXPosition(item) + { + var position = 0; + + if (item.offsetWidth != null) + { + while (item != document.body && item != null) + { + position += item.offsetLeft; + item = item.offsetParent; + }; + }; + + return position; + }; + + +function GetYPosition(item) + { + var position = 0; + + if (item.offsetWidth != null) + { + while (item != document.body && item != null) + { + position += item.offsetTop; + item = item.offsetParent; + }; + }; + + return position; + }; + + +function MoveToPosition(item, x, y) + { + // Opera 5 chokes on the px extension, so it can use the Microsoft one instead. + + if (item.style.left != null) + { + item.style.left = x + "px"; + item.style.top = y + "px"; + } + else if (item.style.pixelLeft != null) + { + item.style.pixelLeft = x; + item.style.pixelTop = y; + }; + }; + + +// +// Menu +// ____________________________________________________________________________ + + +function ToggleMenu(id) + { + if (!window.document.getElementById) + { return; }; + + var display = window.document.getElementById(id).style.display; + + if (display == "none") + { display = "block"; } + else + { display = "none"; } + + window.document.getElementById(id).style.display = display; + } + +function HideAllBut(ids, max) + { + if (document.getElementById) + { + ids.sort( function(a,b) { return a - b; } ); + var number = 1; + + while (number < max) + { + if (ids.length > 0 && number == ids[0]) + { ids.shift(); } + else + { + document.getElementById("MGroupContent" + number).style.display = "none"; + }; + + number++; + }; + }; + } + + +// +// Tooltips +// ____________________________________________________________________________ + + +var tooltipTimer = 0; + +function ShowTip(event, tooltipID, linkID) + { + if (tooltipTimer) + { clearTimeout(tooltipTimer); }; + + var docX = event.clientX + window.pageXOffset; + var docY = event.clientY + window.pageYOffset; + + var showCommand = "ReallyShowTip('" + tooltipID + "', '" + linkID + "', " + docX + ", " + docY + ")"; + + tooltipTimer = setTimeout(showCommand, 1000); + } + +function ReallyShowTip(tooltipID, linkID, docX, docY) + { + tooltipTimer = 0; + + var tooltip; + var link; + + if (document.getElementById) + { + tooltip = document.getElementById(tooltipID); + link = document.getElementById(linkID); + } +/* else if (document.all) + { + tooltip = eval("document.all['" + tooltipID + "']"); + link = eval("document.all['" + linkID + "']"); + } +*/ + if (tooltip) + { + var left = GetXPosition(link); + var top = GetYPosition(link); + top += link.offsetHeight; + + + // The fallback method is to use the mouse X and Y relative to the document. We use a separate if and test if its a number + // in case some browser snuck through the above if statement but didn't support everything. + + if (!isFinite(top) || top == 0) + { + left = docX; + top = docY; + } + + // Some spacing to get it out from under the cursor. + + top += 10; + + // Make sure the tooltip doesnt get smushed by being too close to the edge, or in some browsers, go off the edge of the + // page. We do it here because Konqueror does get offsetWidth right even if it doesnt get the positioning right. + + if (tooltip.offsetWidth != null) + { + var width = tooltip.offsetWidth; + var docWidth = document.body.clientWidth; + + if (left + width > docWidth) + { left = docWidth - width - 1; } + + // If there's a horizontal scroll bar we could go past zero because it's using the page width, not the window width. + if (left < 0) + { left = 0; }; + } + + MoveToPosition(tooltip, left, top); + tooltip.style.visibility = "visible"; + } + } + +function HideTip(tooltipID) + { + if (tooltipTimer) + { + clearTimeout(tooltipTimer); + tooltipTimer = 0; + } + + var tooltip; + + if (document.getElementById) + { tooltip = document.getElementById(tooltipID); } + else if (document.all) + { tooltip = eval("document.all['" + tooltipID + "']"); } + + if (tooltip) + { tooltip.style.visibility = "hidden"; } + } + + +// +// Blockquote fix for IE +// ____________________________________________________________________________ + + +function NDOnLoad() + { + if (browserVer == "IE6") + { + var scrollboxes = document.getElementsByTagName('blockquote'); + + if (scrollboxes.item(0)) + { + NDDoResize(); + window.onresize=NDOnResize; + }; + }; + }; + + +var resizeTimer = 0; + +function NDOnResize() + { + if (resizeTimer != 0) + { clearTimeout(resizeTimer); }; + + resizeTimer = setTimeout(NDDoResize, 250); + }; + + +function NDDoResize() + { + var scrollboxes = document.getElementsByTagName('blockquote'); + + var i; + var item; + + i = 0; + while (item = scrollboxes.item(i)) + { + item.style.width = 100; + i++; + }; + + i = 0; + while (item = scrollboxes.item(i)) + { + item.style.width = item.parentNode.offsetWidth; + i++; + }; + + clearTimeout(resizeTimer); + resizeTimer = 0; + } + + + +/* ________________________________________________________________________________________________________ + + Class: SearchPanel + ________________________________________________________________________________________________________ + + A class handling everything associated with the search panel. + + Parameters: + + name - The name of the global variable that will be storing this instance. Is needed to be able to set timeouts. + mode - The mode the search is going to work in. Pass CommandLineOption()>, so the + value will be something like "HTML" or "FramedHTML". + + ________________________________________________________________________________________________________ +*/ + + +function SearchPanel(name, mode, resultsPath) + { + if (!name || !mode || !resultsPath) + { alert("Incorrect parameters to SearchPanel."); }; + + + // Group: Variables + // ________________________________________________________________________ + + /* + var: name + The name of the global variable that will be storing this instance of the class. + */ + this.name = name; + + /* + var: mode + The mode the search is going to work in, such as "HTML" or "FramedHTML". + */ + this.mode = mode; + + /* + var: resultsPath + The relative path from the current HTML page to the results page directory. + */ + this.resultsPath = resultsPath; + + /* + var: keyTimeout + The timeout used between a keystroke and when a search is performed. + */ + this.keyTimeout = 0; + + /* + var: keyTimeoutLength + The length of in thousandths of a second. + */ + this.keyTimeoutLength = 500; + + /* + var: lastSearchValue + The last search string executed, or an empty string if none. + */ + this.lastSearchValue = ""; + + /* + var: lastResultsPage + The last results page. The value is only relevant if is set. + */ + this.lastResultsPage = ""; + + /* + var: deactivateTimeout + + The timeout used between when a control is deactivated and when the entire panel is deactivated. Is necessary + because a control may be deactivated in favor of another control in the same panel, in which case it should stay + active. + */ + this.deactivateTimout = 0; + + /* + var: deactivateTimeoutLength + The length of in thousandths of a second. + */ + this.deactivateTimeoutLength = 200; + + + + + // Group: DOM Elements + // ________________________________________________________________________ + + + // Function: DOMSearchField + this.DOMSearchField = function() + { return document.getElementById("MSearchField"); }; + + // Function: DOMSearchType + this.DOMSearchType = function() + { return document.getElementById("MSearchType"); }; + + // Function: DOMPopupSearchResults + this.DOMPopupSearchResults = function() + { return document.getElementById("MSearchResults"); }; + + // Function: DOMPopupSearchResultsWindow + this.DOMPopupSearchResultsWindow = function() + { return document.getElementById("MSearchResultsWindow"); }; + + // Function: DOMSearchPanel + this.DOMSearchPanel = function() + { return document.getElementById("MSearchPanel"); }; + + + + + // Group: Event Handlers + // ________________________________________________________________________ + + + /* + Function: OnSearchFieldFocus + Called when focus is added or removed from the search field. + */ + this.OnSearchFieldFocus = function(isActive) + { + this.Activate(isActive); + }; + + + /* + Function: OnSearchFieldChange + Called when the content of the search field is changed. + */ + this.OnSearchFieldChange = function() + { + if (this.keyTimeout) + { + clearTimeout(this.keyTimeout); + this.keyTimeout = 0; + }; + + var searchValue = this.DOMSearchField().value.replace(/ +/g, ""); + + if (searchValue != this.lastSearchValue) + { + if (searchValue != "") + { + this.keyTimeout = setTimeout(this.name + ".Search()", this.keyTimeoutLength); + } + else + { + if (this.mode == "HTML") + { this.DOMPopupSearchResultsWindow().style.display = "none"; }; + this.lastSearchValue = ""; + }; + }; + }; + + + /* + Function: OnSearchTypeFocus + Called when focus is added or removed from the search type. + */ + this.OnSearchTypeFocus = function(isActive) + { + this.Activate(isActive); + }; + + + /* + Function: OnSearchTypeChange + Called when the search type is changed. + */ + this.OnSearchTypeChange = function() + { + var searchValue = this.DOMSearchField().value.replace(/ +/g, ""); + + if (searchValue != "") + { + this.Search(); + }; + }; + + + + // Group: Action Functions + // ________________________________________________________________________ + + + /* + Function: CloseResultsWindow + Closes the results window. + */ + this.CloseResultsWindow = function() + { + this.DOMPopupSearchResultsWindow().style.display = "none"; + this.Activate(false, true); + }; + + + /* + Function: Search + Performs a search. + */ + this.Search = function() + { + this.keyTimeout = 0; + + var searchValue = this.DOMSearchField().value.replace(/^ +/, ""); + var searchTopic = this.DOMSearchType().value; + + var pageExtension = searchValue.substr(0,1); + + if (pageExtension.match(/^[a-z]/i)) + { pageExtension = pageExtension.toUpperCase(); } + else if (pageExtension.match(/^[0-9]/)) + { pageExtension = 'Numbers'; } + else + { pageExtension = "Symbols"; }; + + var resultsPage; + var resultsPageWithSearch; + var hasResultsPage; + + // indexSectionsWithContent is defined in searchdata.js + if (indexSectionsWithContent[searchTopic][pageExtension] == true) + { + resultsPage = this.resultsPath + '/' + searchTopic + pageExtension + '.html'; + resultsPageWithSearch = resultsPage+'?'+escape(searchValue); + hasResultsPage = true; + } + else + { + resultsPage = this.resultsPath + '/NoResults.html'; + resultsPageWithSearch = resultsPage; + hasResultsPage = false; + }; + + var resultsFrame; + if (this.mode == "HTML") + { resultsFrame = window.frames.MSearchResults; } + else if (this.mode == "FramedHTML") + { resultsFrame = window.top.frames['Content']; }; + + + if (resultsPage != this.lastResultsPage || + + // Bug in IE. If everything becomes hidden in a run, none of them will be able to be reshown in the next for some + // reason. It counts the right number of results, and you can even read the display as "block" after setting it, but it + // just doesn't work in IE 6 or IE 7. So if we're on the right page but the previous search had no results, reload the + // page anyway to get around the bug. + (browserType == "IE" && hasResultsPage && + (!resultsFrame.searchResults || resultsFrame.searchResults.lastMatchCount == 0)) ) + + { + resultsFrame.location.href = resultsPageWithSearch; + } + + // So if the results page is right and there's no IE bug, reperform the search on the existing page. We have to check if there + // are results because NoResults.html doesn't have any JavaScript, and it would be useless to do anything on that page even + // if it did. + else if (hasResultsPage) + { + // We need to check if this exists in case the frame is present but didn't finish loading. + if (resultsFrame.searchResults) + { resultsFrame.searchResults.Search(searchValue); } + + // Otherwise just reload instead of waiting. + else + { resultsFrame.location.href = resultsPageWithSearch; }; + }; + + + var domPopupSearchResultsWindow = this.DOMPopupSearchResultsWindow(); + + if (this.mode == "HTML" && domPopupSearchResultsWindow.style.display != "block") + { + var domSearchType = this.DOMSearchType(); + + var left = GetXPosition(domSearchType); + var top = GetYPosition(domSearchType) + domSearchType.offsetHeight; + + MoveToPosition(domPopupSearchResultsWindow, left, top); + domPopupSearchResultsWindow.style.display = 'block'; + }; + + + this.lastSearchValue = searchValue; + this.lastResultsPage = resultsPage; + }; + + + + // Group: Activation Functions + // Functions that handle whether the entire panel is active or not. + // ________________________________________________________________________ + + + /* + Function: Activate + + Activates or deactivates the search panel, resetting things to their default values if necessary. You can call this on every + control's OnBlur() and it will handle not deactivating the entire panel when focus is just switching between them transparently. + + Parameters: + + isActive - Whether you're activating or deactivating the panel. + ignoreDeactivateDelay - Set if you're positive the action will deactivate the panel and thus want to skip the delay. + */ + this.Activate = function(isActive, ignoreDeactivateDelay) + { + // We want to ignore isActive being false while the results window is open. + if (isActive || (this.mode == "HTML" && this.DOMPopupSearchResultsWindow().style.display == "block")) + { + if (this.inactivateTimeout) + { + clearTimeout(this.inactivateTimeout); + this.inactivateTimeout = 0; + }; + + this.DOMSearchPanel().className = 'MSearchPanelActive'; + + var searchField = this.DOMSearchField(); + + if (searchField.value == 'Search') + { searchField.value = ""; } + } + else if (!ignoreDeactivateDelay) + { + this.inactivateTimeout = setTimeout(this.name + ".InactivateAfterTimeout()", this.inactivateTimeoutLength); + } + else + { + this.InactivateAfterTimeout(); + }; + }; + + + /* + Function: InactivateAfterTimeout + + Called by , which is set by . Inactivation occurs on a timeout because a control may + receive OnBlur() when focus is really transferring to another control in the search panel. In this case we don't want to + actually deactivate the panel because not only would that cause a visible flicker but it could also reset the search value. + So by doing it on a timeout instead, there's a short period where the second control's OnFocus() can cancel the deactivation. + */ + this.InactivateAfterTimeout = function() + { + this.inactivateTimeout = 0; + + this.DOMSearchPanel().className = 'MSearchPanelInactive'; + this.DOMSearchField().value = "Search"; + + this.lastSearchValue = ""; + this.lastResultsPage = ""; + }; + }; + + + + +/* ________________________________________________________________________________________________________ + + Class: SearchResults + _________________________________________________________________________________________________________ + + The class that handles everything on the search results page. + _________________________________________________________________________________________________________ +*/ + + +function SearchResults(name, mode) + { + /* + var: mode + The mode the search is going to work in, such as "HTML" or "FramedHTML". + */ + this.mode = mode; + + /* + var: lastMatchCount + The number of matches from the last run of . + */ + this.lastMatchCount = 0; + + + /* + Function: Toggle + Toggles the visibility of the passed element ID. + */ + this.Toggle = function(id) + { + if (this.mode == "FramedHTML") + { return; }; + + var parentElement = document.getElementById(id); + + var element = parentElement.firstChild; + + while (element && element != parentElement) + { + if (element.nodeName == 'DIV' && element.className == 'ISubIndex') + { + if (element.style.display == 'block') + { element.style.display = "none"; } + else + { element.style.display = 'block'; } + }; + + if (element.nodeName == 'DIV' && element.hasChildNodes()) + { element = element.firstChild; } + else if (element.nextSibling) + { element = element.nextSibling; } + else + { + do + { + element = element.parentNode; + } + while (element && element != parentElement && !element.nextSibling); + + if (element && element != parentElement) + { element = element.nextSibling; }; + }; + }; + }; + + + /* + Function: Search + + Searches for the passed string. If there is no parameter, it takes it from the URL query. + + Always returns true, since other documents may try to call it and that may or may not be possible. + */ + this.Search = function(search) + { + if (!search) + { + search = window.location.search; + search = search.substring(1); // Remove the leading ? + search = unescape(search); + }; + + search = search.replace(/^ +/, ""); + search = search.replace(/ +$/, ""); + search = search.toLowerCase(); + + if (search.match(/[^a-z0-9]/)) // Just a little speedup so it doesn't have to go through the below unnecessarily. + { + search = search.replace(/\_/g, "_und"); + search = search.replace(/\ +/gi, "_spc"); + search = search.replace(/\~/g, "_til"); + search = search.replace(/\!/g, "_exc"); + search = search.replace(/\@/g, "_att"); + search = search.replace(/\#/g, "_num"); + search = search.replace(/\$/g, "_dol"); + search = search.replace(/\%/g, "_pct"); + search = search.replace(/\^/g, "_car"); + search = search.replace(/\&/g, "_amp"); + search = search.replace(/\*/g, "_ast"); + search = search.replace(/\(/g, "_lpa"); + search = search.replace(/\)/g, "_rpa"); + search = search.replace(/\-/g, "_min"); + search = search.replace(/\+/g, "_plu"); + search = search.replace(/\=/g, "_equ"); + search = search.replace(/\{/g, "_lbc"); + search = search.replace(/\}/g, "_rbc"); + search = search.replace(/\[/g, "_lbk"); + search = search.replace(/\]/g, "_rbk"); + search = search.replace(/\:/g, "_col"); + search = search.replace(/\;/g, "_sco"); + search = search.replace(/\"/g, "_quo"); + search = search.replace(/\'/g, "_apo"); + search = search.replace(/\/g, "_ran"); + search = search.replace(/\,/g, "_com"); + search = search.replace(/\./g, "_per"); + search = search.replace(/\?/g, "_que"); + search = search.replace(/\//g, "_sla"); + search = search.replace(/[^a-z0-9\_]i/gi, "_zzz"); + }; + + var resultRows = document.getElementsByTagName("div"); + var matches = 0; + + var i = 0; + while (i < resultRows.length) + { + var row = resultRows.item(i); + + if (row.className == "SRResult") + { + var rowMatchName = row.id.toLowerCase(); + rowMatchName = rowMatchName.replace(/^sr\d*_/, ''); + + if (search.length <= rowMatchName.length && rowMatchName.substr(0, search.length) == search) + { + row.style.display = "block"; + matches++; + } + else + { row.style.display = "none"; }; + }; + + i++; + }; + + document.getElementById("Searching").style.display="none"; + + if (matches == 0) + { document.getElementById("NoMatches").style.display="block"; } + else + { document.getElementById("NoMatches").style.display="none"; } + + this.lastMatchCount = matches; + + return true; + }; + }; + diff --git a/docs/javascript/searchdata.js b/docs/javascript/searchdata.js new file mode 100644 index 0000000..eac176a --- /dev/null +++ b/docs/javascript/searchdata.js @@ -0,0 +1,122 @@ +var indexSectionsWithContent = { + "General": { + "Symbols": false, + "Numbers": false, + "A": true, + "B": false, + "C": true, + "D": true, + "E": false, + "F": true, + "G": true, + "H": true, + "I": true, + "J": false, + "K": false, + "L": true, + "M": true, + "N": false, + "O": true, + "P": false, + "Q": false, + "R": true, + "S": true, + "T": false, + "U": false, + "V": false, + "W": false, + "X": false, + "Y": false, + "Z": false + }, + "Functions": { + "Symbols": false, + "Numbers": false, + "A": true, + "B": true, + "C": true, + "D": true, + "E": true, + "F": true, + "G": true, + "H": true, + "I": true, + "J": false, + "K": false, + "L": true, + "M": true, + "N": false, + "O": false, + "P": true, + "Q": false, + "R": true, + "S": true, + "T": true, + "U": true, + "V": false, + "W": true, + "X": false, + "Y": false, + "Z": false + }, + "Interfaces": { + "Symbols": false, + "Numbers": false, + "A": false, + "B": false, + "C": false, + "D": false, + "E": false, + "F": false, + "G": false, + "H": false, + "I": false, + "J": false, + "K": false, + "L": false, + "M": false, + "N": false, + "O": false, + "P": false, + "Q": false, + "R": false, + "S": true, + "T": false, + "U": false, + "V": false, + "W": false, + "X": false, + "Y": false, + "Z": false + }, + "Classes": { + "Symbols": false, + "Numbers": false, + "A": false, + "B": false, + "C": false, + "D": false, + "E": false, + "F": false, + "G": false, + "H": false, + "I": false, + "J": false, + "K": false, + "L": false, + "M": false, + "N": false, + "O": false, + "P": false, + "Q": false, + "R": false, + "S": true, + "T": false, + "U": false, + "V": false, + "W": false, + "X": false, + "Y": false, + "Z": false + } + } \ No newline at end of file diff --git a/docs/search/.svn/all-wcprops b/docs/search/.svn/all-wcprops new file mode 100644 index 0000000..7aa49b2 --- /dev/null +++ b/docs/search/.svn/all-wcprops @@ -0,0 +1,125 @@ +K 25 +svn:wc:ra_dav:version-url +V 36 +/svn/!svn/ver/1620/trunk/docs/search +END +FunctionsD.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1620/trunk/docs/search/FunctionsD.html +END +GeneralA.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralA.html +END +FunctionsG.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1620/trunk/docs/search/FunctionsG.html +END +GeneralC.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralC.html +END +GeneralD.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralD.html +END +GeneralF.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralF.html +END +GeneralG.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralG.html +END +FilesS.html +K 25 +svn:wc:ra_dav:version-url +V 48 +/svn/!svn/ver/1607/trunk/docs/search/FilesS.html +END +FunctionsM.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1619/trunk/docs/search/FunctionsM.html +END +FunctionsO.html +K 25 +svn:wc:ra_dav:version-url +V 51 +/svn/!svn/ver/820/trunk/docs/search/FunctionsO.html +END +GeneralL.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1619/trunk/docs/search/GeneralL.html +END +FunctionsR.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1620/trunk/docs/search/FunctionsR.html +END +GeneralM.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1619/trunk/docs/search/GeneralM.html +END +FunctionsS.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1620/trunk/docs/search/FunctionsS.html +END +GeneralO.html +K 25 +svn:wc:ra_dav:version-url +V 49 +/svn/!svn/ver/820/trunk/docs/search/GeneralO.html +END +NoResults.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/791/trunk/docs/search/NoResults.html +END +GeneralR.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralR.html +END +GeneralS.html +K 25 +svn:wc:ra_dav:version-url +V 50 +/svn/!svn/ver/1620/trunk/docs/search/GeneralS.html +END +FunctionsA.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1620/trunk/docs/search/FunctionsA.html +END +FunctionsC.html +K 25 +svn:wc:ra_dav:version-url +V 52 +/svn/!svn/ver/1620/trunk/docs/search/FunctionsC.html +END diff --git a/docs/search/.svn/entries b/docs/search/.svn/entries new file mode 100644 index 0000000..40dd412 --- /dev/null +++ b/docs/search/.svn/entries @@ -0,0 +1,708 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/docs/search +http://svg-edit.googlecode.com/svn + + + +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +FunctionsD.html +file + + + + +2012-03-23T10:42:00.000000Z +96a3b3f9d03b1e9483c2cf7298ff422a +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +1972 + +GeneralA.html +file + + + + +2012-03-23T10:42:00.000000Z +2a22cbc6cd60a4c32d57e96432a29015 +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + + + + + + + + +3911 + +FunctionsG.html +file + + + + +2012-03-23T10:42:00.000000Z +f08dd46f073c1c86e10d55e3a0f63d02 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +11251 + +GeneralC.html +file + + + + +2012-03-23T10:42:00.000000Z +2d80d7688cf59e3a611797fc8c61e2d8 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +4296 + +GeneralD.html +file + + + + +2012-03-23T10:42:00.000000Z +1e9e5113f43416280f7069d7f5a90ead +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +2217 + +GeneralF.html +file + + + + +2012-03-23T10:42:00.000000Z +ca1d5c1ad22f05f2be17834d8366065b +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +2582 + +GeneralG.html +file + + + + +2012-03-23T10:42:00.000000Z +f08dd46f073c1c86e10d55e3a0f63d02 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +11251 + +FilesS.html +file + + + + +2012-03-23T10:42:00.000000Z +14fdc973925cc4fadd6dd9bdd1d57f44 +2010-06-18T20:35:47.590209Z +1607 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +4328 + +FunctionsM.html +file + + + + +2012-03-23T10:42:00.000000Z +47c3445c7304d556d0ae30b4debb5f17 +2010-06-29T20:43:44.997466Z +1619 +adeveria + + + + + + + + + + + + + + + + + + + + + +2741 + +FunctionsO.html +file + + + + +2012-03-23T10:42:00.000000Z +0870505c26889be0fdca5e9f484324d5 +2009-10-14T02:50:07.046639Z +820 +codedread + + + + + + + + + + + + + + + + + + + + + +1399 + +GeneralL.html +file + + + + +2012-03-23T10:42:00.000000Z +6935dd2f610df26893b81cc216d20823 +2010-06-29T20:43:44.997466Z +1619 +adeveria + + + + + + + + + + + + + + + + + + + + + +1704 + +FunctionsR.html +file + + + + +2012-03-23T10:42:00.000000Z +e436dcd5ed72a036dc63345d72b39090 +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + + + + + + + + +4825 + +GeneralM.html +file + + + + +2012-03-23T10:42:00.000000Z +47c3445c7304d556d0ae30b4debb5f17 +2010-06-29T20:43:44.997466Z +1619 +adeveria + + + + + + + + + + + + + + + + + + + + + +2741 + +FunctionsS.html +file + + + + +2012-03-23T10:42:00.000000Z +efc4f65c00aee8ef9a53d532f181f847 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +11152 + +GeneralO.html +file + + + + +2012-03-23T10:42:00.000000Z +0870505c26889be0fdca5e9f484324d5 +2009-10-14T02:50:07.046639Z +820 +codedread + + + + + + + + + + + + + + + + + + + + + +1399 + +NoResults.html +file + + + + +2012-03-23T10:42:00.000000Z +a17ce9c877c33f155c3c31a5155f15bd +2009-10-09T19:16:58.262697Z +791 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +857 + +GeneralR.html +file + + + + +2012-03-23T10:42:00.000000Z +e436dcd5ed72a036dc63345d72b39090 +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + + + + + + + + +4825 + +GeneralS.html +file + + + + +2012-03-23T10:42:00.000000Z +acbf07fdab02ffc5e730edda9e4468fb +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +12074 + +FunctionsA.html +file + + + + +2012-03-23T10:42:00.000000Z +9725a0addc914ae609d4d523bd5f3b8f +2010-06-30T18:27:36.402448Z +1620 +adeveria + + + + + + + + + + + + + + + + + + + + + +3648 + +FunctionsC.html +file + + + + +2012-03-23T10:42:00.000000Z +2d80d7688cf59e3a611797fc8c61e2d8 +2010-06-30T18:27:36.402448Z +1620 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +4296 + diff --git a/docs/search/.svn/prop-base/FilesS.html.svn-base b/docs/search/.svn/prop-base/FilesS.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/FilesS.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/FunctionsC.html.svn-base b/docs/search/.svn/prop-base/FunctionsC.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/FunctionsC.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/FunctionsD.html.svn-base b/docs/search/.svn/prop-base/FunctionsD.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/FunctionsD.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/FunctionsG.html.svn-base b/docs/search/.svn/prop-base/FunctionsG.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/FunctionsG.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/FunctionsS.html.svn-base b/docs/search/.svn/prop-base/FunctionsS.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/FunctionsS.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/GeneralC.html.svn-base b/docs/search/.svn/prop-base/GeneralC.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/GeneralC.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/GeneralD.html.svn-base b/docs/search/.svn/prop-base/GeneralD.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/GeneralD.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/GeneralF.html.svn-base b/docs/search/.svn/prop-base/GeneralF.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/GeneralF.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/GeneralG.html.svn-base b/docs/search/.svn/prop-base/GeneralG.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/GeneralG.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/GeneralS.html.svn-base b/docs/search/.svn/prop-base/GeneralS.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/GeneralS.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/prop-base/NoResults.html.svn-base b/docs/search/.svn/prop-base/NoResults.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/docs/search/.svn/prop-base/NoResults.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/docs/search/.svn/text-base/FilesS.html.svn-base b/docs/search/.svn/text-base/FilesS.html.svn-base new file mode 100644 index 0000000..690d961 --- /dev/null +++ b/docs/search/.svn/text-base/FilesS.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsA.html.svn-base b/docs/search/.svn/text-base/FunctionsA.html.svn-base new file mode 100644 index 0000000..de24e1f --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsA.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
addExtension, SelectorManager
addSubCommand, SvgCanvas.BatchCommand
addSvgElementFromJson, SelectorManager
addToSelection, SelectorManager
alignSelectedElements, SelectorManager
assignAttributes, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsC.html.svn-base b/docs/search/.svn/text-base/FunctionsC.html.svn-base new file mode 100644 index 0000000..eb4b747 --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsC.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
changeSelectedAttribute, SelectorManager
cleanupElement, SelectorManager
clear, SelectorManager
clearSelection, SelectorManager
cloneSelectedElements, SelectorManager
convertToNum, SvgCanvas
convertToPath, SelectorManager
convertToXMLReferences, SvgCanvas.Utils
copyElem, SelectorManager
createLayer, SelectorManager
cycleElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsD.html.svn-base b/docs/search/.svn/text-base/FunctionsD.html.svn-base new file mode 100644 index 0000000..1c28ffc --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsD.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
decode64, SvgCanvas.Utils
deleteCurrentLayer, SelectorManager
deleteSelectedElements, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsG.html.svn-base b/docs/search/.svn/text-base/FunctionsG.html.svn-base new file mode 100644 index 0000000..c7e504e --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsG.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
getBBox, SelectorManager
getBlur, SelectorManager
getBold, SelectorManager
getColor, SelectorManager
getContentElem, SelectorManager
getCurrentLayer, SelectorManager
getDocumentTitle, SelectorManager
getEditorNS, SelectorManager
getElem, SelectorManager
getFontFamily, SelectorManager
getFontSize, SelectorManager
getId, SelectorManager
getItalic, SelectorManager
getLayer, SelectorManager
getLayerOpacity, SelectorManager
getLayerVisibility, SelectorManager
getMatrix, SelectorManager
getMode, SelectorManager
getMouseTarget, SelectorManager
getNextId, SelectorManager
getNextRedoCommandText, SvgCanvas.undoMgr
getNextUndoCommandText, SvgCanvas.undoMgr
getNumLayers, SelectorManager
getOffset, SelectorManager
getOpacity, SelectorManager
getPathBBox, SelectorManager
getRedoStackSize, SvgCanvas.undoMgr
getResolution, SelectorManager
getRootElem, SelectorManager
getRotationAngle, SelectorManager
getRubberBandBox, SelectorManager.SelectorManager
getSelectedElems, SelectorManager
getStrokedBBox, SelectorManager
getStrokeOpacity, SelectorManager
getStrokeWidth, SelectorManager
getSvgString, SelectorManager
getText, SelectorManager
getTransformList, SelectorManager
getUndoStackSize, SvgCanvas.undoMgr
getUrlFromAttr, SelectorManager
getVersion, SelectorManager
getVisibleElements, SelectorManager
getZoom, SelectorManager
groupSelectedElements, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsM.html.svn-base b/docs/search/.svn/text-base/FunctionsM.html.svn-base new file mode 100644 index 0000000..fbb3112 --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsM.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
matrixMultiply, SelectorManager
moveSelectedElements, SelectorManager
moveSelectedToLayer, SelectorManager
moveToTopSelectedElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsO.html.svn-base b/docs/search/.svn/text-base/FunctionsO.html.svn-base new file mode 100644 index 0000000..76f92f6 --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsO.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsR.html.svn-base b/docs/search/.svn/text-base/FunctionsR.html.svn-base new file mode 100644 index 0000000..3153d9d --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsR.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
rasterExport, SelectorManager
recalculateDimensions, SelectorManager
rectsIntersect, SvgCanvas
redo, SvgCanvas.undoMgr
releaseSelector, SelectorManager.SelectorManager
remapElement, SelectorManager
removeFromSelection, SelectorManager
removeUnusedDefElems, SelectorManager
renameCurrentLayer, SelectorManager
requestSelector, SelectorManager.SelectorManager
reset, Selector.Selector
resetUndoStack, SvgCanvas
resize, Selector.Selector
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/FunctionsS.html.svn-base b/docs/search/.svn/text-base/FunctionsS.html.svn-base new file mode 100644 index 0000000..13e3338 --- /dev/null +++ b/docs/search/.svn/text-base/FunctionsS.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
sanitizeSvg, SelectorManager
save, SelectorManager
selectAllInCurrentLayer, SelectorManager
setBackground, SelectorManager
setBBoxZoom, SelectorManager
setBlur, SelectorManager
setBlurNoUndo, SelectorManager
setBlurOffsets, SelectorManager
setBold, SelectorManager
setColor, SelectorManager
setConfig, SelectorManager
setCurrentLayer, SelectorManager
setCurrentLayerPosition, SelectorManager
setDocumentTitle, SelectorManager
setFontFamily, SelectorManager
setFontSize, SelectorManager
setGradient, SelectorManager
setIdPrefix, SelectorManager
setImageURL, SelectorManager
setItalic, SelectorManager
setLayerOpacity, SelectorManager
setLayerVisibility, SelectorManager
setMode, SelectorManager
setOpacity, SelectorManager
setPaint, SelectorManager
setPaintOpacity, SelectorManager
setRectRadius, SelectorManager
setResolution, SelectorManager
setRotationAngle, SelectorManager
setSegType, SelectorManager
setStrokeAttr, SelectorManager
setStrokeWidth, SelectorManager
setSvgString, SelectorManager
setTextContent, SelectorManager
setUiStrings, SelectorManager
setUnitAttr, SvgCanvas
setZoom, SelectorManager
shortFloat, SelectorManager
showGrips, Selector.Selector
smoothControlPoints, SelectorManager
snapToAngle, SvgCanvas
svgCanvasToString, SelectorManager
svgToString, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralA.html.svn-base b/docs/search/.svn/text-base/GeneralA.html.svn-base new file mode 100644 index 0000000..f3ee0f6 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralA.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
addExtension, SelectorManager
Additional editor tools, SelectorManager
addSubCommand, SvgCanvas.BatchCommand
addSvgElementFromJson, SelectorManager
addToSelection, SelectorManager
alignSelectedElements, SelectorManager
assignAttributes, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralC.html.svn-base b/docs/search/.svn/text-base/GeneralC.html.svn-base new file mode 100644 index 0000000..eb4b747 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralC.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
changeSelectedAttribute, SelectorManager
cleanupElement, SelectorManager
clear, SelectorManager
clearSelection, SelectorManager
cloneSelectedElements, SelectorManager
convertToNum, SvgCanvas
convertToPath, SelectorManager
convertToXMLReferences, SvgCanvas.Utils
copyElem, SelectorManager
createLayer, SelectorManager
cycleElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralD.html.svn-base b/docs/search/.svn/text-base/GeneralD.html.svn-base new file mode 100644 index 0000000..6735300 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralD.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
decode64, SvgCanvas.Utils
deleteCurrentLayer, SelectorManager
deleteSelectedElements, SelectorManager
Document functions, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralF.html.svn-base b/docs/search/.svn/text-base/GeneralF.html.svn-base new file mode 100644 index 0000000..55c21a8 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralF.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
ffClone, SelectorManager
findDefs, SelectorManager
findDuplicateGradient, SelectorManager
fromXml, SvgCanvas.Utils
Functions, Selector
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralG.html.svn-base b/docs/search/.svn/text-base/GeneralG.html.svn-base new file mode 100644 index 0000000..c7e504e --- /dev/null +++ b/docs/search/.svn/text-base/GeneralG.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
getBBox, SelectorManager
getBlur, SelectorManager
getBold, SelectorManager
getColor, SelectorManager
getContentElem, SelectorManager
getCurrentLayer, SelectorManager
getDocumentTitle, SelectorManager
getEditorNS, SelectorManager
getElem, SelectorManager
getFontFamily, SelectorManager
getFontSize, SelectorManager
getId, SelectorManager
getItalic, SelectorManager
getLayer, SelectorManager
getLayerOpacity, SelectorManager
getLayerVisibility, SelectorManager
getMatrix, SelectorManager
getMode, SelectorManager
getMouseTarget, SelectorManager
getNextId, SelectorManager
getNextRedoCommandText, SvgCanvas.undoMgr
getNextUndoCommandText, SvgCanvas.undoMgr
getNumLayers, SelectorManager
getOffset, SelectorManager
getOpacity, SelectorManager
getPathBBox, SelectorManager
getRedoStackSize, SvgCanvas.undoMgr
getResolution, SelectorManager
getRootElem, SelectorManager
getRotationAngle, SelectorManager
getRubberBandBox, SelectorManager.SelectorManager
getSelectedElems, SelectorManager
getStrokedBBox, SelectorManager
getStrokeOpacity, SelectorManager
getStrokeWidth, SelectorManager
getSvgString, SelectorManager
getText, SelectorManager
getTransformList, SelectorManager
getUndoStackSize, SvgCanvas.undoMgr
getUrlFromAttr, SelectorManager
getVersion, SelectorManager
getVisibleElements, SelectorManager
getZoom, SelectorManager
groupSelectedElements, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralL.html.svn-base b/docs/search/.svn/text-base/GeneralL.html.svn-base new file mode 100644 index 0000000..09038de --- /dev/null +++ b/docs/search/.svn/text-base/GeneralL.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
Layers, SelectorManager
linkControlPoints, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralM.html.svn-base b/docs/search/.svn/text-base/GeneralM.html.svn-base new file mode 100644 index 0000000..fbb3112 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralM.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
matrixMultiply, SelectorManager
moveSelectedElements, SelectorManager
moveSelectedToLayer, SelectorManager
moveToTopSelectedElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralO.html.svn-base b/docs/search/.svn/text-base/GeneralO.html.svn-base new file mode 100644 index 0000000..76f92f6 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralO.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralR.html.svn-base b/docs/search/.svn/text-base/GeneralR.html.svn-base new file mode 100644 index 0000000..3153d9d --- /dev/null +++ b/docs/search/.svn/text-base/GeneralR.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
rasterExport, SelectorManager
recalculateDimensions, SelectorManager
rectsIntersect, SvgCanvas
redo, SvgCanvas.undoMgr
releaseSelector, SelectorManager.SelectorManager
remapElement, SelectorManager
removeFromSelection, SelectorManager
removeUnusedDefElems, SelectorManager
renameCurrentLayer, SelectorManager
requestSelector, SelectorManager.SelectorManager
reset, Selector.Selector
resetUndoStack, SvgCanvas
resize, Selector.Selector
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/GeneralS.html.svn-base b/docs/search/.svn/text-base/GeneralS.html.svn-base new file mode 100644 index 0000000..1176986 --- /dev/null +++ b/docs/search/.svn/text-base/GeneralS.html.svn-base @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
sanitizeSvg, SelectorManager
save, SelectorManager
selectAllInCurrentLayer, SelectorManager
Selection, SelectorManager
Serialization, SelectorManager
setBackground, SelectorManager
setBBoxZoom, SelectorManager
setBlur, SelectorManager
setBlurNoUndo, SelectorManager
setBlurOffsets, SelectorManager
setBold, SelectorManager
setColor, SelectorManager
setConfig, SelectorManager
setCurrentLayer, SelectorManager
setCurrentLayerPosition, SelectorManager
setDocumentTitle, SelectorManager
setFontFamily, SelectorManager
setFontSize, SelectorManager
setGradient, SelectorManager
setIdPrefix, SelectorManager
setImageURL, SelectorManager
setItalic, SelectorManager
setLayerOpacity, SelectorManager
setLayerVisibility, SelectorManager
setMode, SelectorManager
setOpacity, SelectorManager
setPaint, SelectorManager
setPaintOpacity, SelectorManager
setRectRadius, SelectorManager
setResolution, SelectorManager
setRotationAngle, SelectorManager
setSegType, SelectorManager
setStrokeAttr, SelectorManager
setStrokeWidth, SelectorManager
setSvgString, SelectorManager
setTextContent, SelectorManager
setUiStrings, SelectorManager
setUnitAttr, SvgCanvas
setZoom, SelectorManager
shortFloat, SelectorManager
showGrips, Selector.Selector
smoothControlPoints, SelectorManager
snapToAngle, SvgCanvas
svgCanvasToString, SelectorManager
svgToString, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/.svn/text-base/NoResults.html.svn-base b/docs/search/.svn/text-base/NoResults.html.svn-base new file mode 100644 index 0000000..02ce888 --- /dev/null +++ b/docs/search/.svn/text-base/NoResults.html.svn-base @@ -0,0 +1,15 @@ + + + + + + + + + + + + +
No Matches
\ No newline at end of file diff --git a/docs/search/FilesS.html b/docs/search/FilesS.html new file mode 100644 index 0000000..690d961 --- /dev/null +++ b/docs/search/FilesS.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/search/FunctionsA.html b/docs/search/FunctionsA.html new file mode 100644 index 0000000..de24e1f --- /dev/null +++ b/docs/search/FunctionsA.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
addExtension, SelectorManager
addSubCommand, SvgCanvas.BatchCommand
addSvgElementFromJson, SelectorManager
addToSelection, SelectorManager
alignSelectedElements, SelectorManager
assignAttributes, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsC.html b/docs/search/FunctionsC.html new file mode 100644 index 0000000..eb4b747 --- /dev/null +++ b/docs/search/FunctionsC.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
changeSelectedAttribute, SelectorManager
cleanupElement, SelectorManager
clear, SelectorManager
clearSelection, SelectorManager
cloneSelectedElements, SelectorManager
convertToNum, SvgCanvas
convertToPath, SelectorManager
convertToXMLReferences, SvgCanvas.Utils
copyElem, SelectorManager
createLayer, SelectorManager
cycleElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsD.html b/docs/search/FunctionsD.html new file mode 100644 index 0000000..1c28ffc --- /dev/null +++ b/docs/search/FunctionsD.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
decode64, SvgCanvas.Utils
deleteCurrentLayer, SelectorManager
deleteSelectedElements, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsG.html b/docs/search/FunctionsG.html new file mode 100644 index 0000000..c7e504e --- /dev/null +++ b/docs/search/FunctionsG.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
getBBox, SelectorManager
getBlur, SelectorManager
getBold, SelectorManager
getColor, SelectorManager
getContentElem, SelectorManager
getCurrentLayer, SelectorManager
getDocumentTitle, SelectorManager
getEditorNS, SelectorManager
getElem, SelectorManager
getFontFamily, SelectorManager
getFontSize, SelectorManager
getId, SelectorManager
getItalic, SelectorManager
getLayer, SelectorManager
getLayerOpacity, SelectorManager
getLayerVisibility, SelectorManager
getMatrix, SelectorManager
getMode, SelectorManager
getMouseTarget, SelectorManager
getNextId, SelectorManager
getNextRedoCommandText, SvgCanvas.undoMgr
getNextUndoCommandText, SvgCanvas.undoMgr
getNumLayers, SelectorManager
getOffset, SelectorManager
getOpacity, SelectorManager
getPathBBox, SelectorManager
getRedoStackSize, SvgCanvas.undoMgr
getResolution, SelectorManager
getRootElem, SelectorManager
getRotationAngle, SelectorManager
getRubberBandBox, SelectorManager.SelectorManager
getSelectedElems, SelectorManager
getStrokedBBox, SelectorManager
getStrokeOpacity, SelectorManager
getStrokeWidth, SelectorManager
getSvgString, SelectorManager
getText, SelectorManager
getTransformList, SelectorManager
getUndoStackSize, SvgCanvas.undoMgr
getUrlFromAttr, SelectorManager
getVersion, SelectorManager
getVisibleElements, SelectorManager
getZoom, SelectorManager
groupSelectedElements, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsM.html b/docs/search/FunctionsM.html new file mode 100644 index 0000000..fbb3112 --- /dev/null +++ b/docs/search/FunctionsM.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
matrixMultiply, SelectorManager
moveSelectedElements, SelectorManager
moveSelectedToLayer, SelectorManager
moveToTopSelectedElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsO.html b/docs/search/FunctionsO.html new file mode 100644 index 0000000..76f92f6 --- /dev/null +++ b/docs/search/FunctionsO.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsR.html b/docs/search/FunctionsR.html new file mode 100644 index 0000000..3153d9d --- /dev/null +++ b/docs/search/FunctionsR.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
rasterExport, SelectorManager
recalculateDimensions, SelectorManager
rectsIntersect, SvgCanvas
redo, SvgCanvas.undoMgr
releaseSelector, SelectorManager.SelectorManager
remapElement, SelectorManager
removeFromSelection, SelectorManager
removeUnusedDefElems, SelectorManager
renameCurrentLayer, SelectorManager
requestSelector, SelectorManager.SelectorManager
reset, Selector.Selector
resetUndoStack, SvgCanvas
resize, Selector.Selector
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/FunctionsS.html b/docs/search/FunctionsS.html new file mode 100644 index 0000000..13e3338 --- /dev/null +++ b/docs/search/FunctionsS.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
sanitizeSvg, SelectorManager
save, SelectorManager
selectAllInCurrentLayer, SelectorManager
setBackground, SelectorManager
setBBoxZoom, SelectorManager
setBlur, SelectorManager
setBlurNoUndo, SelectorManager
setBlurOffsets, SelectorManager
setBold, SelectorManager
setColor, SelectorManager
setConfig, SelectorManager
setCurrentLayer, SelectorManager
setCurrentLayerPosition, SelectorManager
setDocumentTitle, SelectorManager
setFontFamily, SelectorManager
setFontSize, SelectorManager
setGradient, SelectorManager
setIdPrefix, SelectorManager
setImageURL, SelectorManager
setItalic, SelectorManager
setLayerOpacity, SelectorManager
setLayerVisibility, SelectorManager
setMode, SelectorManager
setOpacity, SelectorManager
setPaint, SelectorManager
setPaintOpacity, SelectorManager
setRectRadius, SelectorManager
setResolution, SelectorManager
setRotationAngle, SelectorManager
setSegType, SelectorManager
setStrokeAttr, SelectorManager
setStrokeWidth, SelectorManager
setSvgString, SelectorManager
setTextContent, SelectorManager
setUiStrings, SelectorManager
setUnitAttr, SvgCanvas
setZoom, SelectorManager
shortFloat, SelectorManager
showGrips, Selector.Selector
smoothControlPoints, SelectorManager
snapToAngle, SvgCanvas
svgCanvasToString, SelectorManager
svgToString, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralA.html b/docs/search/GeneralA.html new file mode 100644 index 0000000..f3ee0f6 --- /dev/null +++ b/docs/search/GeneralA.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
addExtension, SelectorManager
Additional editor tools, SelectorManager
addSubCommand, SvgCanvas.BatchCommand
addSvgElementFromJson, SelectorManager
addToSelection, SelectorManager
alignSelectedElements, SelectorManager
assignAttributes, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralC.html b/docs/search/GeneralC.html new file mode 100644 index 0000000..eb4b747 --- /dev/null +++ b/docs/search/GeneralC.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
changeSelectedAttribute, SelectorManager
cleanupElement, SelectorManager
clear, SelectorManager
clearSelection, SelectorManager
cloneSelectedElements, SelectorManager
convertToNum, SvgCanvas
convertToPath, SelectorManager
convertToXMLReferences, SvgCanvas.Utils
copyElem, SelectorManager
createLayer, SelectorManager
cycleElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralD.html b/docs/search/GeneralD.html new file mode 100644 index 0000000..6735300 --- /dev/null +++ b/docs/search/GeneralD.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
decode64, SvgCanvas.Utils
deleteCurrentLayer, SelectorManager
deleteSelectedElements, SelectorManager
Document functions, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralF.html b/docs/search/GeneralF.html new file mode 100644 index 0000000..55c21a8 --- /dev/null +++ b/docs/search/GeneralF.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
ffClone, SelectorManager
findDefs, SelectorManager
findDuplicateGradient, SelectorManager
fromXml, SvgCanvas.Utils
Functions, Selector
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralG.html b/docs/search/GeneralG.html new file mode 100644 index 0000000..c7e504e --- /dev/null +++ b/docs/search/GeneralG.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
getBBox, SelectorManager
getBlur, SelectorManager
getBold, SelectorManager
getColor, SelectorManager
getContentElem, SelectorManager
getCurrentLayer, SelectorManager
getDocumentTitle, SelectorManager
getEditorNS, SelectorManager
getElem, SelectorManager
getFontFamily, SelectorManager
getFontSize, SelectorManager
getId, SelectorManager
getItalic, SelectorManager
getLayer, SelectorManager
getLayerOpacity, SelectorManager
getLayerVisibility, SelectorManager
getMatrix, SelectorManager
getMode, SelectorManager
getMouseTarget, SelectorManager
getNextId, SelectorManager
getNextRedoCommandText, SvgCanvas.undoMgr
getNextUndoCommandText, SvgCanvas.undoMgr
getNumLayers, SelectorManager
getOffset, SelectorManager
getOpacity, SelectorManager
getPathBBox, SelectorManager
getRedoStackSize, SvgCanvas.undoMgr
getResolution, SelectorManager
getRootElem, SelectorManager
getRotationAngle, SelectorManager
getRubberBandBox, SelectorManager.SelectorManager
getSelectedElems, SelectorManager
getStrokedBBox, SelectorManager
getStrokeOpacity, SelectorManager
getStrokeWidth, SelectorManager
getSvgString, SelectorManager
getText, SelectorManager
getTransformList, SelectorManager
getUndoStackSize, SvgCanvas.undoMgr
getUrlFromAttr, SelectorManager
getVersion, SelectorManager
getVisibleElements, SelectorManager
getZoom, SelectorManager
groupSelectedElements, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralL.html b/docs/search/GeneralL.html new file mode 100644 index 0000000..09038de --- /dev/null +++ b/docs/search/GeneralL.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
Layers, SelectorManager
linkControlPoints, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralM.html b/docs/search/GeneralM.html new file mode 100644 index 0000000..fbb3112 --- /dev/null +++ b/docs/search/GeneralM.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
matrixMultiply, SelectorManager
moveSelectedElements, SelectorManager
moveSelectedToLayer, SelectorManager
moveToTopSelectedElement, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralO.html b/docs/search/GeneralO.html new file mode 100644 index 0000000..76f92f6 --- /dev/null +++ b/docs/search/GeneralO.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralR.html b/docs/search/GeneralR.html new file mode 100644 index 0000000..3153d9d --- /dev/null +++ b/docs/search/GeneralR.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
rasterExport, SelectorManager
recalculateDimensions, SelectorManager
rectsIntersect, SvgCanvas
redo, SvgCanvas.undoMgr
releaseSelector, SelectorManager.SelectorManager
remapElement, SelectorManager
removeFromSelection, SelectorManager
removeUnusedDefElems, SelectorManager
renameCurrentLayer, SelectorManager
requestSelector, SelectorManager.SelectorManager
reset, Selector.Selector
resetUndoStack, SvgCanvas
resize, Selector.Selector
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/GeneralS.html b/docs/search/GeneralS.html new file mode 100644 index 0000000..1176986 --- /dev/null +++ b/docs/search/GeneralS.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + +
Loading...
sanitizeSvg, SelectorManager
save, SelectorManager
selectAllInCurrentLayer, SelectorManager
Selection, SelectorManager
Serialization, SelectorManager
setBackground, SelectorManager
setBBoxZoom, SelectorManager
setBlur, SelectorManager
setBlurNoUndo, SelectorManager
setBlurOffsets, SelectorManager
setBold, SelectorManager
setColor, SelectorManager
setConfig, SelectorManager
setCurrentLayer, SelectorManager
setCurrentLayerPosition, SelectorManager
setDocumentTitle, SelectorManager
setFontFamily, SelectorManager
setFontSize, SelectorManager
setGradient, SelectorManager
setIdPrefix, SelectorManager
setImageURL, SelectorManager
setItalic, SelectorManager
setLayerOpacity, SelectorManager
setLayerVisibility, SelectorManager
setMode, SelectorManager
setOpacity, SelectorManager
setPaint, SelectorManager
setPaintOpacity, SelectorManager
setRectRadius, SelectorManager
setResolution, SelectorManager
setRotationAngle, SelectorManager
setSegType, SelectorManager
setStrokeAttr, SelectorManager
setStrokeWidth, SelectorManager
setSvgString, SelectorManager
setTextContent, SelectorManager
setUiStrings, SelectorManager
setUnitAttr, SvgCanvas
setZoom, SelectorManager
shortFloat, SelectorManager
showGrips, Selector.Selector
smoothControlPoints, SelectorManager
snapToAngle, SvgCanvas
svgCanvasToString, SelectorManager
svgToString, SelectorManager
Searching...
No Matches
\ No newline at end of file diff --git a/docs/search/NoResults.html b/docs/search/NoResults.html new file mode 100644 index 0000000..02ce888 --- /dev/null +++ b/docs/search/NoResults.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + +
No Matches
\ No newline at end of file diff --git a/docs/styles/.svn/all-wcprops b/docs/styles/.svn/all-wcprops new file mode 100644 index 0000000..8f13f65 --- /dev/null +++ b/docs/styles/.svn/all-wcprops @@ -0,0 +1,11 @@ +K 25 +svn:wc:ra_dav:version-url +V 35 +/svn/!svn/ver/789/trunk/docs/styles +END +main.css +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/789/trunk/docs/styles/main.css +END diff --git a/docs/styles/.svn/entries b/docs/styles/.svn/entries new file mode 100644 index 0000000..450876c --- /dev/null +++ b/docs/styles/.svn/entries @@ -0,0 +1,62 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/docs/styles +http://svg-edit.googlecode.com/svn + + + +2009-10-09T19:08:59.341200Z +789 +codedread + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +main.css +file + + + + +2012-03-23T10:42:00.000000Z +35741f8545e92d4526798a79ef6f7829 +2009-10-09T19:08:59.341200Z +789 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +19459 + diff --git a/docs/styles/.svn/prop-base/main.css.svn-base b/docs/styles/.svn/prop-base/main.css.svn-base new file mode 100644 index 0000000..69cd899 --- /dev/null +++ b/docs/styles/.svn/prop-base/main.css.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 8 +text/css +END diff --git a/docs/styles/.svn/text-base/main.css.svn-base b/docs/styles/.svn/text-base/main.css.svn-base new file mode 100644 index 0000000..17e9cbc --- /dev/null +++ b/docs/styles/.svn/text-base/main.css.svn-base @@ -0,0 +1,767 @@ +/* + IMPORTANT: If you're editing this file in the output directory of one of + your projects, your changes will be overwritten the next time you run + Natural Docs. Instead, copy this file to your project directory, make your + changes, and you can use it with -s. Even better would be to make a CSS + file in your project directory with only your changes, which you can then + use with -s [original style] [your changes]. + + On the other hand, if you're editing this file in the Natural Docs styles + directory, the changes will automatically be applied to all your projects + that use this style the next time Natural Docs is run on them. + + This file is part of Natural Docs, which is Copyright (C) 2003-2008 Greg Valure + Natural Docs is licensed under the GPL +*/ + +body { + font: 10pt Verdana, Arial, sans-serif; + color: #000000; + margin: 0; padding: 0; + } + +.ContentPage, +.IndexPage, +.FramedMenuPage { + background-color: #E8E8E8; + } +.FramedContentPage, +.FramedIndexPage, +.FramedSearchResultsPage, +.PopupSearchResultsPage { + background-color: #FFFFFF; + } + + +a:link, +a:visited { color: #900000; text-decoration: none } +a:hover { color: #900000; text-decoration: underline } +a:active { color: #FF0000; text-decoration: underline } + +td { + vertical-align: top } + +img { border: 0; } + + +/* + Comment out this line to use web-style paragraphs (blank line between + paragraphs, no indent) instead of print-style paragraphs (no blank line, + indented.) +*/ +p { + text-indent: 5ex; margin: 0 } + + +/* Opera doesn't break with just wbr, but will if you add this. */ +.Opera wbr:after { + content: "\00200B"; + } + + +/* Blockquotes are used as containers for things that may need to scroll. */ +blockquote { + padding: 0; + margin: 0; + overflow: auto; + } + + +.Firefox1 blockquote { + padding-bottom: .5em; + } + +/* Turn off scrolling when printing. */ +@media print { + blockquote { + overflow: visible; + } + .IE blockquote { + width: auto; + } + } + + + +#Menu { + font-size: 9pt; + padding: 10px 0 0 0; + } +.ContentPage #Menu, +.IndexPage #Menu { + position: absolute; + top: 0; + left: 0; + width: 31ex; + overflow: hidden; + } +.ContentPage .Firefox #Menu, +.IndexPage .Firefox #Menu { + width: 27ex; + } + + + .MTitle { + font-size: 16pt; font-weight: bold; font-variant: small-caps; + text-align: center; + padding: 5px 10px 15px 10px; + border-bottom: 1px dotted #000000; + margin-bottom: 15px } + + .MSubTitle { + font-size: 9pt; font-weight: normal; font-variant: normal; + margin-top: 1ex; margin-bottom: 5px } + + + .MEntry a:link, + .MEntry a:hover, + .MEntry a:visited { color: #606060; margin-right: 0 } + .MEntry a:active { color: #A00000; margin-right: 0 } + + + .MGroup { + font-variant: small-caps; font-weight: bold; + margin: 1em 0 1em 10px; + } + + .MGroupContent { + font-variant: normal; font-weight: normal } + + .MGroup a:link, + .MGroup a:hover, + .MGroup a:visited { color: #545454; margin-right: 10px } + .MGroup a:active { color: #A00000; margin-right: 10px } + + + .MFile, + .MText, + .MLink, + .MIndex { + padding: 1px 17px 2px 10px; + margin: .25em 0 .25em 0; + } + + .MText { + font-size: 8pt; font-style: italic } + + .MLink { + font-style: italic } + + #MSelected { + color: #000000; background-color: #FFFFFF; + /* Replace padding with border. */ + padding: 0 10px 0 10px; + border-width: 1px 2px 2px 0; border-style: solid; border-color: #000000; + margin-right: 5px; + } + + /* Close off the left side when its in a group. */ + .MGroup #MSelected { + padding-left: 9px; border-left-width: 1px } + + /* A treat for Mozilla users. Blatantly non-standard. Will be replaced with CSS 3 attributes when finalized/supported. */ + .Firefox #MSelected { + -moz-border-radius-topright: 10px; + -moz-border-radius-bottomright: 10px } + .Firefox .MGroup #MSelected { + -moz-border-radius-topleft: 10px; + -moz-border-radius-bottomleft: 10px } + + + #MSearchPanel { + padding: 0px 6px; + margin: .25em 0; + } + + + #MSearchField { + font: italic 9pt Verdana, sans-serif; + color: #606060; + background-color: #E8E8E8; + border: none; + padding: 2px 4px; + width: 100%; + } + /* Only Opera gets it right. */ + .Firefox #MSearchField, + .IE #MSearchField, + .Safari #MSearchField { + width: 94%; + } + .Opera9 #MSearchField, + .Konqueror #MSearchField { + width: 97%; + } + .FramedMenuPage .Firefox #MSearchField, + .FramedMenuPage .Safari #MSearchField, + .FramedMenuPage .Konqueror #MSearchField { + width: 98%; + } + + /* Firefox doesn't do this right in frames without #MSearchPanel added on. + It's presence doesn't hurt anything other browsers. */ + #MSearchPanel.MSearchPanelInactive:hover #MSearchField { + background-color: #FFFFFF; + border: 1px solid #C0C0C0; + padding: 1px 3px; + } + .MSearchPanelActive #MSearchField { + background-color: #FFFFFF; + border: 1px solid #C0C0C0; + font-style: normal; + padding: 1px 3px; + } + + #MSearchType { + visibility: hidden; + font: 8pt Verdana, sans-serif; + width: 98%; + padding: 0; + border: 1px solid #C0C0C0; + } + .MSearchPanelActive #MSearchType, + /* As mentioned above, Firefox doesn't do this right in frames without #MSearchPanel added on. */ + #MSearchPanel.MSearchPanelInactive:hover #MSearchType, + #MSearchType:focus { + visibility: visible; + color: #606060; + } + #MSearchType option#MSearchEverything { + font-weight: bold; + } + + .Opera8 .MSearchPanelInactive:hover, + .Opera8 .MSearchPanelActive { + margin-left: -1px; + } + + + iframe#MSearchResults { + width: 60ex; + height: 15em; + } + #MSearchResultsWindow { + display: none; + position: absolute; + left: 0; top: 0; + border: 1px solid #000000; + background-color: #E8E8E8; + } + #MSearchResultsWindowClose { + font-weight: bold; + font-size: 8pt; + display: block; + padding: 2px 5px; + } + #MSearchResultsWindowClose:link, + #MSearchResultsWindowClose:visited { + color: #000000; + text-decoration: none; + } + #MSearchResultsWindowClose:active, + #MSearchResultsWindowClose:hover { + color: #800000; + text-decoration: none; + background-color: #F4F4F4; + } + + + + +#Content { + padding-bottom: 15px; + } + +.ContentPage #Content { + border-width: 0 0 1px 1px; + border-style: solid; + border-color: #000000; + background-color: #FFFFFF; + font-size: 9pt; /* To make 31ex match the menu's 31ex. */ + margin-left: 31ex; + } +.ContentPage .Firefox #Content { + margin-left: 27ex; + } + + + + .CTopic { + font-size: 10pt; + margin-bottom: 3em; + } + + + .CTitle { + font-size: 12pt; font-weight: bold; + border-width: 0 0 1px 0; border-style: solid; border-color: #A0A0A0; + margin: 0 15px .5em 15px } + + .CGroup .CTitle { + font-size: 16pt; font-variant: small-caps; + padding-left: 15px; padding-right: 15px; + border-width: 0 0 2px 0; border-color: #000000; + margin-left: 0; margin-right: 0 } + + .CClass .CTitle, + .CInterface .CTitle, + .CDatabase .CTitle, + .CDatabaseTable .CTitle, + .CSection .CTitle { + font-size: 18pt; + color: #FFFFFF; background-color: #A0A0A0; + padding: 10px 15px 10px 15px; + border-width: 2px 0; border-color: #000000; + margin-left: 0; margin-right: 0 } + + #MainTopic .CTitle { + font-size: 20pt; + color: #FFFFFF; background-color: #7070C0; + padding: 10px 15px 10px 15px; + border-width: 0 0 3px 0; border-color: #000000; + margin-left: 0; margin-right: 0 } + + .CBody { + margin-left: 15px; margin-right: 15px } + + + .CToolTip { + position: absolute; visibility: hidden; + left: 0; top: 0; + background-color: #FFFFE0; + padding: 5px; + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #000000; + font-size: 8pt; + } + + .Opera .CToolTip { + max-width: 98%; + } + + /* Scrollbars would be useless. */ + .CToolTip blockquote { + overflow: hidden; + } + .IE6 .CToolTip blockquote { + overflow: visible; + } + + .CHeading { + font-weight: bold; font-size: 10pt; + margin: 1.5em 0 .5em 0; + } + + .CBody pre { + font: 10pt "Courier New", Courier, monospace; + margin: 1em 0; + } + + .CBody ul { + /* I don't know why CBody's margin doesn't apply, but it's consistent across browsers so whatever. + Reapply it here as padding. */ + padding-left: 15px; padding-right: 15px; + margin: .5em 5ex .5em 5ex; + } + + .CDescriptionList { + margin: .5em 5ex 0 5ex } + + .CDLEntry { + font: 10pt "Courier New", Courier, monospace; color: #808080; + padding-bottom: .25em; + white-space: nowrap } + + .CDLDescription { + font-size: 10pt; /* For browsers that don't inherit correctly, like Opera 5. */ + padding-bottom: .5em; padding-left: 5ex } + + + .CTopic img { + text-align: center; + display: block; + margin: 1em auto; + } + .CImageCaption { + font-variant: small-caps; + font-size: 8pt; + color: #808080; + text-align: center; + position: relative; + top: 1em; + } + + .CImageLink { + color: #808080; + font-style: italic; + } + a.CImageLink:link, + a.CImageLink:visited, + a.CImageLink:hover { color: #808080 } + + + + + +.Prototype { + font: 10pt "Courier New", Courier, monospace; + padding: 5px 3ex; + border-width: 1px; border-style: solid; + margin: 0 5ex 1.5em 5ex; + } + + .Prototype td { + font-size: 10pt; + } + + .PDefaultValue, + .PDefaultValuePrefix, + .PTypePrefix { + color: #8F8F8F; + } + .PTypePrefix { + text-align: right; + } + .PAfterParameters { + vertical-align: bottom; + } + + .IE .Prototype table { + padding: 0; + } + + .CFunction .Prototype { + background-color: #F4F4F4; border-color: #D0D0D0 } + .CProperty .Prototype { + background-color: #F4F4FF; border-color: #C0C0E8 } + .CVariable .Prototype { + background-color: #FFFFF0; border-color: #E0E0A0 } + + .CClass .Prototype { + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0A0; + background-color: #F4F4F4; + } + .CInterface .Prototype { + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0D0; + background-color: #F4F4FF; + } + + .CDatabaseIndex .Prototype, + .CConstant .Prototype { + background-color: #D0D0D0; border-color: #000000 } + .CType .Prototype, + .CEnumeration .Prototype { + background-color: #FAF0F0; border-color: #E0B0B0; + } + .CDatabaseTrigger .Prototype, + .CEvent .Prototype, + .CDelegate .Prototype { + background-color: #F0FCF0; border-color: #B8E4B8 } + + .CToolTip .Prototype { + margin: 0 0 .5em 0; + white-space: nowrap; + } + + + + + +.Summary { + margin: 1.5em 5ex 0 5ex } + + .STitle { + font-size: 12pt; font-weight: bold; + margin-bottom: .5em } + + + .SBorder { + background-color: #FFFFF0; + padding: 15px; + border: 1px solid #C0C060 } + + /* In a frame IE 6 will make them too long unless you set the width to 100%. Without frames it will be correct without a width + or slightly too long (but not enough to scroll) with a width. This arbitrary weirdness simply astounds me. IE 7 has the same + problem with frames, haven't tested it without. */ + .FramedContentPage .IE .SBorder { + width: 100% } + + /* A treat for Mozilla users. Blatantly non-standard. Will be replaced with CSS 3 attributes when finalized/supported. */ + .Firefox .SBorder { + -moz-border-radius: 20px } + + + .STable { + font-size: 9pt; width: 100% } + + .SEntry { + width: 30% } + .SDescription { + width: 70% } + + + .SMarked { + background-color: #F8F8D8 } + + .SDescription { padding-left: 2ex } + .SIndent1 .SEntry { padding-left: 1.5ex } .SIndent1 .SDescription { padding-left: 3.5ex } + .SIndent2 .SEntry { padding-left: 3.0ex } .SIndent2 .SDescription { padding-left: 5.0ex } + .SIndent3 .SEntry { padding-left: 4.5ex } .SIndent3 .SDescription { padding-left: 6.5ex } + .SIndent4 .SEntry { padding-left: 6.0ex } .SIndent4 .SDescription { padding-left: 8.0ex } + .SIndent5 .SEntry { padding-left: 7.5ex } .SIndent5 .SDescription { padding-left: 9.5ex } + + .SDescription a { color: #800000} + .SDescription a:active { color: #A00000 } + + .SGroup td { + padding-top: .5em; padding-bottom: .25em } + + .SGroup .SEntry { + font-weight: bold; font-variant: small-caps } + + .SGroup .SEntry a { color: #800000 } + .SGroup .SEntry a:active { color: #F00000 } + + + .SMain td, + .SClass td, + .SDatabase td, + .SDatabaseTable td, + .SSection td { + font-size: 10pt; + padding-bottom: .25em } + + .SClass td, + .SDatabase td, + .SDatabaseTable td, + .SSection td { + padding-top: 1em } + + .SMain .SEntry, + .SClass .SEntry, + .SDatabase .SEntry, + .SDatabaseTable .SEntry, + .SSection .SEntry { + font-weight: bold; + } + + .SMain .SEntry a, + .SClass .SEntry a, + .SDatabase .SEntry a, + .SDatabaseTable .SEntry a, + .SSection .SEntry a { color: #000000 } + + .SMain .SEntry a:active, + .SClass .SEntry a:active, + .SDatabase .SEntry a:active, + .SDatabaseTable .SEntry a:active, + .SSection .SEntry a:active { color: #A00000 } + + + + + +.ClassHierarchy { + margin: 0 15px 1em 15px } + + .CHEntry { + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0A0; + margin-bottom: 3px; + padding: 2px 2ex; + font-size: 10pt; + background-color: #F4F4F4; color: #606060; + } + + .Firefox .CHEntry { + -moz-border-radius: 4px; + } + + .CHCurrent .CHEntry { + font-weight: bold; + border-color: #000000; + color: #000000; + } + + .CHChildNote .CHEntry { + font-style: italic; + font-size: 8pt; + } + + .CHIndent { + margin-left: 3ex; + } + + .CHEntry a:link, + .CHEntry a:visited, + .CHEntry a:hover { + color: #606060; + } + .CHEntry a:active { + color: #800000; + } + + + + + +#Index { + background-color: #FFFFFF; + } + +/* As opposed to .PopupSearchResultsPage #Index */ +.IndexPage #Index, +.FramedIndexPage #Index, +.FramedSearchResultsPage #Index { + padding: 15px; + } + +.IndexPage #Index { + border-width: 0 0 1px 1px; + border-style: solid; + border-color: #000000; + font-size: 9pt; /* To make 27ex match the menu's 27ex. */ + margin-left: 27ex; + } + + + .IPageTitle { + font-size: 20pt; font-weight: bold; + color: #FFFFFF; background-color: #7070C0; + padding: 10px 15px 10px 15px; + border-width: 0 0 3px 0; border-color: #000000; border-style: solid; + margin: -15px -15px 0 -15px } + + .FramedSearchResultsPage .IPageTitle { + margin-bottom: 15px; + } + + .INavigationBar { + font-size: 10pt; + text-align: center; + background-color: #FFFFF0; + padding: 5px; + border-bottom: solid 1px black; + margin: 0 -15px 15px -15px; + } + + .INavigationBar a { + font-weight: bold } + + .IHeading { + font-size: 16pt; font-weight: bold; + padding: 2.5em 0 .5em 0; + text-align: center; + width: 3.5ex; + } + #IFirstHeading { + padding-top: 0; + } + + .IEntry { + font-size: 10pt; + padding-left: 1ex; + } + .PopupSearchResultsPage .IEntry { + font-size: 8pt; + padding: 1px 5px; + } + .PopupSearchResultsPage .Opera9 .IEntry, + .FramedSearchResultsPage .Opera9 .IEntry { + text-align: left; + } + .FramedSearchResultsPage .IEntry { + padding: 0; + } + + .ISubIndex { + padding-left: 3ex; padding-bottom: .5em } + .PopupSearchResultsPage .ISubIndex { + display: none; + } + + /* While it may cause some entries to look like links when they aren't, I found it's much easier to read the + index if everything's the same color. */ + .ISymbol { + font-weight: bold; color: #900000 } + + .IndexPage .ISymbolPrefix, + .FramedIndexPage .ISymbolPrefix { + font-size: 10pt; + text-align: right; + color: #C47C7C; + background-color: #F8F8F8; + border-right: 3px solid #E0E0E0; + border-left: 1px solid #E0E0E0; + padding: 0 1px 0 2px; + } + .PopupSearchResultsPage .ISymbolPrefix, + .FramedSearchResultsPage .ISymbolPrefix { + color: #900000; + } + .PopupSearchResultsPage .ISymbolPrefix { + font-size: 8pt; + } + + .IndexPage #IFirstSymbolPrefix, + .FramedIndexPage #IFirstSymbolPrefix { + border-top: 1px solid #E0E0E0; + } + .IndexPage #ILastSymbolPrefix, + .FramedIndexPage #ILastSymbolPrefix { + border-bottom: 1px solid #E0E0E0; + } + .IndexPage #IOnlySymbolPrefix, + .FramedIndexPage #IOnlySymbolPrefix { + border-top: 1px solid #E0E0E0; + border-bottom: 1px solid #E0E0E0; + } + + a.IParent, + a.IFile { + display: block; + } + + .PopupSearchResultsPage .SRStatus { + padding: 2px 5px; + font-size: 8pt; + font-style: italic; + } + .FramedSearchResultsPage .SRStatus { + font-size: 10pt; + font-style: italic; + } + + .SRResult { + display: none; + } + + + +#Footer { + font-size: 8pt; + color: #989898; + text-align: right; + } + +#Footer p { + text-indent: 0; + margin-bottom: .5em; + } + +.ContentPage #Footer, +.IndexPage #Footer { + text-align: right; + margin: 2px; + } + +.FramedMenuPage #Footer { + text-align: center; + margin: 5em 10px 10px 10px; + padding-top: 1em; + border-top: 1px solid #C8C8C8; + } + + #Footer a:link, + #Footer a:hover, + #Footer a:visited { color: #989898 } + #Footer a:active { color: #A00000 } + diff --git a/docs/styles/main.css b/docs/styles/main.css new file mode 100644 index 0000000..17e9cbc --- /dev/null +++ b/docs/styles/main.css @@ -0,0 +1,767 @@ +/* + IMPORTANT: If you're editing this file in the output directory of one of + your projects, your changes will be overwritten the next time you run + Natural Docs. Instead, copy this file to your project directory, make your + changes, and you can use it with -s. Even better would be to make a CSS + file in your project directory with only your changes, which you can then + use with -s [original style] [your changes]. + + On the other hand, if you're editing this file in the Natural Docs styles + directory, the changes will automatically be applied to all your projects + that use this style the next time Natural Docs is run on them. + + This file is part of Natural Docs, which is Copyright (C) 2003-2008 Greg Valure + Natural Docs is licensed under the GPL +*/ + +body { + font: 10pt Verdana, Arial, sans-serif; + color: #000000; + margin: 0; padding: 0; + } + +.ContentPage, +.IndexPage, +.FramedMenuPage { + background-color: #E8E8E8; + } +.FramedContentPage, +.FramedIndexPage, +.FramedSearchResultsPage, +.PopupSearchResultsPage { + background-color: #FFFFFF; + } + + +a:link, +a:visited { color: #900000; text-decoration: none } +a:hover { color: #900000; text-decoration: underline } +a:active { color: #FF0000; text-decoration: underline } + +td { + vertical-align: top } + +img { border: 0; } + + +/* + Comment out this line to use web-style paragraphs (blank line between + paragraphs, no indent) instead of print-style paragraphs (no blank line, + indented.) +*/ +p { + text-indent: 5ex; margin: 0 } + + +/* Opera doesn't break with just wbr, but will if you add this. */ +.Opera wbr:after { + content: "\00200B"; + } + + +/* Blockquotes are used as containers for things that may need to scroll. */ +blockquote { + padding: 0; + margin: 0; + overflow: auto; + } + + +.Firefox1 blockquote { + padding-bottom: .5em; + } + +/* Turn off scrolling when printing. */ +@media print { + blockquote { + overflow: visible; + } + .IE blockquote { + width: auto; + } + } + + + +#Menu { + font-size: 9pt; + padding: 10px 0 0 0; + } +.ContentPage #Menu, +.IndexPage #Menu { + position: absolute; + top: 0; + left: 0; + width: 31ex; + overflow: hidden; + } +.ContentPage .Firefox #Menu, +.IndexPage .Firefox #Menu { + width: 27ex; + } + + + .MTitle { + font-size: 16pt; font-weight: bold; font-variant: small-caps; + text-align: center; + padding: 5px 10px 15px 10px; + border-bottom: 1px dotted #000000; + margin-bottom: 15px } + + .MSubTitle { + font-size: 9pt; font-weight: normal; font-variant: normal; + margin-top: 1ex; margin-bottom: 5px } + + + .MEntry a:link, + .MEntry a:hover, + .MEntry a:visited { color: #606060; margin-right: 0 } + .MEntry a:active { color: #A00000; margin-right: 0 } + + + .MGroup { + font-variant: small-caps; font-weight: bold; + margin: 1em 0 1em 10px; + } + + .MGroupContent { + font-variant: normal; font-weight: normal } + + .MGroup a:link, + .MGroup a:hover, + .MGroup a:visited { color: #545454; margin-right: 10px } + .MGroup a:active { color: #A00000; margin-right: 10px } + + + .MFile, + .MText, + .MLink, + .MIndex { + padding: 1px 17px 2px 10px; + margin: .25em 0 .25em 0; + } + + .MText { + font-size: 8pt; font-style: italic } + + .MLink { + font-style: italic } + + #MSelected { + color: #000000; background-color: #FFFFFF; + /* Replace padding with border. */ + padding: 0 10px 0 10px; + border-width: 1px 2px 2px 0; border-style: solid; border-color: #000000; + margin-right: 5px; + } + + /* Close off the left side when its in a group. */ + .MGroup #MSelected { + padding-left: 9px; border-left-width: 1px } + + /* A treat for Mozilla users. Blatantly non-standard. Will be replaced with CSS 3 attributes when finalized/supported. */ + .Firefox #MSelected { + -moz-border-radius-topright: 10px; + -moz-border-radius-bottomright: 10px } + .Firefox .MGroup #MSelected { + -moz-border-radius-topleft: 10px; + -moz-border-radius-bottomleft: 10px } + + + #MSearchPanel { + padding: 0px 6px; + margin: .25em 0; + } + + + #MSearchField { + font: italic 9pt Verdana, sans-serif; + color: #606060; + background-color: #E8E8E8; + border: none; + padding: 2px 4px; + width: 100%; + } + /* Only Opera gets it right. */ + .Firefox #MSearchField, + .IE #MSearchField, + .Safari #MSearchField { + width: 94%; + } + .Opera9 #MSearchField, + .Konqueror #MSearchField { + width: 97%; + } + .FramedMenuPage .Firefox #MSearchField, + .FramedMenuPage .Safari #MSearchField, + .FramedMenuPage .Konqueror #MSearchField { + width: 98%; + } + + /* Firefox doesn't do this right in frames without #MSearchPanel added on. + It's presence doesn't hurt anything other browsers. */ + #MSearchPanel.MSearchPanelInactive:hover #MSearchField { + background-color: #FFFFFF; + border: 1px solid #C0C0C0; + padding: 1px 3px; + } + .MSearchPanelActive #MSearchField { + background-color: #FFFFFF; + border: 1px solid #C0C0C0; + font-style: normal; + padding: 1px 3px; + } + + #MSearchType { + visibility: hidden; + font: 8pt Verdana, sans-serif; + width: 98%; + padding: 0; + border: 1px solid #C0C0C0; + } + .MSearchPanelActive #MSearchType, + /* As mentioned above, Firefox doesn't do this right in frames without #MSearchPanel added on. */ + #MSearchPanel.MSearchPanelInactive:hover #MSearchType, + #MSearchType:focus { + visibility: visible; + color: #606060; + } + #MSearchType option#MSearchEverything { + font-weight: bold; + } + + .Opera8 .MSearchPanelInactive:hover, + .Opera8 .MSearchPanelActive { + margin-left: -1px; + } + + + iframe#MSearchResults { + width: 60ex; + height: 15em; + } + #MSearchResultsWindow { + display: none; + position: absolute; + left: 0; top: 0; + border: 1px solid #000000; + background-color: #E8E8E8; + } + #MSearchResultsWindowClose { + font-weight: bold; + font-size: 8pt; + display: block; + padding: 2px 5px; + } + #MSearchResultsWindowClose:link, + #MSearchResultsWindowClose:visited { + color: #000000; + text-decoration: none; + } + #MSearchResultsWindowClose:active, + #MSearchResultsWindowClose:hover { + color: #800000; + text-decoration: none; + background-color: #F4F4F4; + } + + + + +#Content { + padding-bottom: 15px; + } + +.ContentPage #Content { + border-width: 0 0 1px 1px; + border-style: solid; + border-color: #000000; + background-color: #FFFFFF; + font-size: 9pt; /* To make 31ex match the menu's 31ex. */ + margin-left: 31ex; + } +.ContentPage .Firefox #Content { + margin-left: 27ex; + } + + + + .CTopic { + font-size: 10pt; + margin-bottom: 3em; + } + + + .CTitle { + font-size: 12pt; font-weight: bold; + border-width: 0 0 1px 0; border-style: solid; border-color: #A0A0A0; + margin: 0 15px .5em 15px } + + .CGroup .CTitle { + font-size: 16pt; font-variant: small-caps; + padding-left: 15px; padding-right: 15px; + border-width: 0 0 2px 0; border-color: #000000; + margin-left: 0; margin-right: 0 } + + .CClass .CTitle, + .CInterface .CTitle, + .CDatabase .CTitle, + .CDatabaseTable .CTitle, + .CSection .CTitle { + font-size: 18pt; + color: #FFFFFF; background-color: #A0A0A0; + padding: 10px 15px 10px 15px; + border-width: 2px 0; border-color: #000000; + margin-left: 0; margin-right: 0 } + + #MainTopic .CTitle { + font-size: 20pt; + color: #FFFFFF; background-color: #7070C0; + padding: 10px 15px 10px 15px; + border-width: 0 0 3px 0; border-color: #000000; + margin-left: 0; margin-right: 0 } + + .CBody { + margin-left: 15px; margin-right: 15px } + + + .CToolTip { + position: absolute; visibility: hidden; + left: 0; top: 0; + background-color: #FFFFE0; + padding: 5px; + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #000000; + font-size: 8pt; + } + + .Opera .CToolTip { + max-width: 98%; + } + + /* Scrollbars would be useless. */ + .CToolTip blockquote { + overflow: hidden; + } + .IE6 .CToolTip blockquote { + overflow: visible; + } + + .CHeading { + font-weight: bold; font-size: 10pt; + margin: 1.5em 0 .5em 0; + } + + .CBody pre { + font: 10pt "Courier New", Courier, monospace; + margin: 1em 0; + } + + .CBody ul { + /* I don't know why CBody's margin doesn't apply, but it's consistent across browsers so whatever. + Reapply it here as padding. */ + padding-left: 15px; padding-right: 15px; + margin: .5em 5ex .5em 5ex; + } + + .CDescriptionList { + margin: .5em 5ex 0 5ex } + + .CDLEntry { + font: 10pt "Courier New", Courier, monospace; color: #808080; + padding-bottom: .25em; + white-space: nowrap } + + .CDLDescription { + font-size: 10pt; /* For browsers that don't inherit correctly, like Opera 5. */ + padding-bottom: .5em; padding-left: 5ex } + + + .CTopic img { + text-align: center; + display: block; + margin: 1em auto; + } + .CImageCaption { + font-variant: small-caps; + font-size: 8pt; + color: #808080; + text-align: center; + position: relative; + top: 1em; + } + + .CImageLink { + color: #808080; + font-style: italic; + } + a.CImageLink:link, + a.CImageLink:visited, + a.CImageLink:hover { color: #808080 } + + + + + +.Prototype { + font: 10pt "Courier New", Courier, monospace; + padding: 5px 3ex; + border-width: 1px; border-style: solid; + margin: 0 5ex 1.5em 5ex; + } + + .Prototype td { + font-size: 10pt; + } + + .PDefaultValue, + .PDefaultValuePrefix, + .PTypePrefix { + color: #8F8F8F; + } + .PTypePrefix { + text-align: right; + } + .PAfterParameters { + vertical-align: bottom; + } + + .IE .Prototype table { + padding: 0; + } + + .CFunction .Prototype { + background-color: #F4F4F4; border-color: #D0D0D0 } + .CProperty .Prototype { + background-color: #F4F4FF; border-color: #C0C0E8 } + .CVariable .Prototype { + background-color: #FFFFF0; border-color: #E0E0A0 } + + .CClass .Prototype { + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0A0; + background-color: #F4F4F4; + } + .CInterface .Prototype { + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0D0; + background-color: #F4F4FF; + } + + .CDatabaseIndex .Prototype, + .CConstant .Prototype { + background-color: #D0D0D0; border-color: #000000 } + .CType .Prototype, + .CEnumeration .Prototype { + background-color: #FAF0F0; border-color: #E0B0B0; + } + .CDatabaseTrigger .Prototype, + .CEvent .Prototype, + .CDelegate .Prototype { + background-color: #F0FCF0; border-color: #B8E4B8 } + + .CToolTip .Prototype { + margin: 0 0 .5em 0; + white-space: nowrap; + } + + + + + +.Summary { + margin: 1.5em 5ex 0 5ex } + + .STitle { + font-size: 12pt; font-weight: bold; + margin-bottom: .5em } + + + .SBorder { + background-color: #FFFFF0; + padding: 15px; + border: 1px solid #C0C060 } + + /* In a frame IE 6 will make them too long unless you set the width to 100%. Without frames it will be correct without a width + or slightly too long (but not enough to scroll) with a width. This arbitrary weirdness simply astounds me. IE 7 has the same + problem with frames, haven't tested it without. */ + .FramedContentPage .IE .SBorder { + width: 100% } + + /* A treat for Mozilla users. Blatantly non-standard. Will be replaced with CSS 3 attributes when finalized/supported. */ + .Firefox .SBorder { + -moz-border-radius: 20px } + + + .STable { + font-size: 9pt; width: 100% } + + .SEntry { + width: 30% } + .SDescription { + width: 70% } + + + .SMarked { + background-color: #F8F8D8 } + + .SDescription { padding-left: 2ex } + .SIndent1 .SEntry { padding-left: 1.5ex } .SIndent1 .SDescription { padding-left: 3.5ex } + .SIndent2 .SEntry { padding-left: 3.0ex } .SIndent2 .SDescription { padding-left: 5.0ex } + .SIndent3 .SEntry { padding-left: 4.5ex } .SIndent3 .SDescription { padding-left: 6.5ex } + .SIndent4 .SEntry { padding-left: 6.0ex } .SIndent4 .SDescription { padding-left: 8.0ex } + .SIndent5 .SEntry { padding-left: 7.5ex } .SIndent5 .SDescription { padding-left: 9.5ex } + + .SDescription a { color: #800000} + .SDescription a:active { color: #A00000 } + + .SGroup td { + padding-top: .5em; padding-bottom: .25em } + + .SGroup .SEntry { + font-weight: bold; font-variant: small-caps } + + .SGroup .SEntry a { color: #800000 } + .SGroup .SEntry a:active { color: #F00000 } + + + .SMain td, + .SClass td, + .SDatabase td, + .SDatabaseTable td, + .SSection td { + font-size: 10pt; + padding-bottom: .25em } + + .SClass td, + .SDatabase td, + .SDatabaseTable td, + .SSection td { + padding-top: 1em } + + .SMain .SEntry, + .SClass .SEntry, + .SDatabase .SEntry, + .SDatabaseTable .SEntry, + .SSection .SEntry { + font-weight: bold; + } + + .SMain .SEntry a, + .SClass .SEntry a, + .SDatabase .SEntry a, + .SDatabaseTable .SEntry a, + .SSection .SEntry a { color: #000000 } + + .SMain .SEntry a:active, + .SClass .SEntry a:active, + .SDatabase .SEntry a:active, + .SDatabaseTable .SEntry a:active, + .SSection .SEntry a:active { color: #A00000 } + + + + + +.ClassHierarchy { + margin: 0 15px 1em 15px } + + .CHEntry { + border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0A0; + margin-bottom: 3px; + padding: 2px 2ex; + font-size: 10pt; + background-color: #F4F4F4; color: #606060; + } + + .Firefox .CHEntry { + -moz-border-radius: 4px; + } + + .CHCurrent .CHEntry { + font-weight: bold; + border-color: #000000; + color: #000000; + } + + .CHChildNote .CHEntry { + font-style: italic; + font-size: 8pt; + } + + .CHIndent { + margin-left: 3ex; + } + + .CHEntry a:link, + .CHEntry a:visited, + .CHEntry a:hover { + color: #606060; + } + .CHEntry a:active { + color: #800000; + } + + + + + +#Index { + background-color: #FFFFFF; + } + +/* As opposed to .PopupSearchResultsPage #Index */ +.IndexPage #Index, +.FramedIndexPage #Index, +.FramedSearchResultsPage #Index { + padding: 15px; + } + +.IndexPage #Index { + border-width: 0 0 1px 1px; + border-style: solid; + border-color: #000000; + font-size: 9pt; /* To make 27ex match the menu's 27ex. */ + margin-left: 27ex; + } + + + .IPageTitle { + font-size: 20pt; font-weight: bold; + color: #FFFFFF; background-color: #7070C0; + padding: 10px 15px 10px 15px; + border-width: 0 0 3px 0; border-color: #000000; border-style: solid; + margin: -15px -15px 0 -15px } + + .FramedSearchResultsPage .IPageTitle { + margin-bottom: 15px; + } + + .INavigationBar { + font-size: 10pt; + text-align: center; + background-color: #FFFFF0; + padding: 5px; + border-bottom: solid 1px black; + margin: 0 -15px 15px -15px; + } + + .INavigationBar a { + font-weight: bold } + + .IHeading { + font-size: 16pt; font-weight: bold; + padding: 2.5em 0 .5em 0; + text-align: center; + width: 3.5ex; + } + #IFirstHeading { + padding-top: 0; + } + + .IEntry { + font-size: 10pt; + padding-left: 1ex; + } + .PopupSearchResultsPage .IEntry { + font-size: 8pt; + padding: 1px 5px; + } + .PopupSearchResultsPage .Opera9 .IEntry, + .FramedSearchResultsPage .Opera9 .IEntry { + text-align: left; + } + .FramedSearchResultsPage .IEntry { + padding: 0; + } + + .ISubIndex { + padding-left: 3ex; padding-bottom: .5em } + .PopupSearchResultsPage .ISubIndex { + display: none; + } + + /* While it may cause some entries to look like links when they aren't, I found it's much easier to read the + index if everything's the same color. */ + .ISymbol { + font-weight: bold; color: #900000 } + + .IndexPage .ISymbolPrefix, + .FramedIndexPage .ISymbolPrefix { + font-size: 10pt; + text-align: right; + color: #C47C7C; + background-color: #F8F8F8; + border-right: 3px solid #E0E0E0; + border-left: 1px solid #E0E0E0; + padding: 0 1px 0 2px; + } + .PopupSearchResultsPage .ISymbolPrefix, + .FramedSearchResultsPage .ISymbolPrefix { + color: #900000; + } + .PopupSearchResultsPage .ISymbolPrefix { + font-size: 8pt; + } + + .IndexPage #IFirstSymbolPrefix, + .FramedIndexPage #IFirstSymbolPrefix { + border-top: 1px solid #E0E0E0; + } + .IndexPage #ILastSymbolPrefix, + .FramedIndexPage #ILastSymbolPrefix { + border-bottom: 1px solid #E0E0E0; + } + .IndexPage #IOnlySymbolPrefix, + .FramedIndexPage #IOnlySymbolPrefix { + border-top: 1px solid #E0E0E0; + border-bottom: 1px solid #E0E0E0; + } + + a.IParent, + a.IFile { + display: block; + } + + .PopupSearchResultsPage .SRStatus { + padding: 2px 5px; + font-size: 8pt; + font-style: italic; + } + .FramedSearchResultsPage .SRStatus { + font-size: 10pt; + font-style: italic; + } + + .SRResult { + display: none; + } + + + +#Footer { + font-size: 8pt; + color: #989898; + text-align: right; + } + +#Footer p { + text-indent: 0; + margin-bottom: .5em; + } + +.ContentPage #Footer, +.IndexPage #Footer { + text-align: right; + margin: 2px; + } + +.FramedMenuPage #Footer { + text-align: center; + margin: 5em 10px 10px 10px; + padding-top: 1em; + border-top: 1px solid #C8C8C8; + } + + #Footer a:link, + #Footer a:hover, + #Footer a:visited { color: #989898 } + #Footer a:active { color: #A00000 } + diff --git a/editor/.svn/all-wcprops b/editor/.svn/all-wcprops new file mode 100644 index 0000000..853c9b0 --- /dev/null +++ b/editor/.svn/all-wcprops @@ -0,0 +1,125 @@ +K 25 +svn:wc:ra_dav:version-url +V 31 +/svn/!svn/ver/2080/trunk/editor +END +embedapi.js +K 25 +svn:wc:ra_dav:version-url +V 43 +/svn/!svn/ver/1984/trunk/editor/embedapi.js +END +contextmenu.js +K 25 +svn:wc:ra_dav:version-url +V 46 +/svn/!svn/ver/2055/trunk/editor/contextmenu.js +END +svg-editor.html +K 25 +svn:wc:ra_dav:version-url +V 47 +/svn/!svn/ver/2076/trunk/editor/svg-editor.html +END +svg-editor.manifest +K 25 +svn:wc:ra_dav:version-url +V 51 +/svn/!svn/ver/1201/trunk/editor/svg-editor.manifest +END +jquery.js +K 25 +svn:wc:ra_dav:version-url +V 41 +/svn/!svn/ver/2052/trunk/editor/jquery.js +END +select.js +K 25 +svn:wc:ra_dav:version-url +V 41 +/svn/!svn/ver/1984/trunk/editor/select.js +END +svgutils.js +K 25 +svn:wc:ra_dav:version-url +V 43 +/svn/!svn/ver/2072/trunk/editor/svgutils.js +END +browser.js +K 25 +svn:wc:ra_dav:version-url +V 42 +/svn/!svn/ver/2065/trunk/editor/browser.js +END +svg-editor.js +K 25 +svn:wc:ra_dav:version-url +V 45 +/svn/!svn/ver/2076/trunk/editor/svg-editor.js +END +sanitize.js +K 25 +svn:wc:ra_dav:version-url +V 43 +/svn/!svn/ver/2057/trunk/editor/sanitize.js +END +svgtransformlist.js +K 25 +svn:wc:ra_dav:version-url +V 51 +/svn/!svn/ver/1984/trunk/editor/svgtransformlist.js +END +math.js +K 25 +svn:wc:ra_dav:version-url +V 39 +/svn/!svn/ver/1984/trunk/editor/math.js +END +svgcanvas.js +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/2070/trunk/editor/svgcanvas.js +END +browser-not-supported.html +K 25 +svn:wc:ra_dav:version-url +V 58 +/svn/!svn/ver/1923/trunk/editor/browser-not-supported.html +END +path.js +K 25 +svn:wc:ra_dav:version-url +V 39 +/svn/!svn/ver/2025/trunk/editor/path.js +END +draw.js +K 25 +svn:wc:ra_dav:version-url +V 39 +/svn/!svn/ver/1993/trunk/editor/draw.js +END +embedapi.html +K 25 +svn:wc:ra_dav:version-url +V 45 +/svn/!svn/ver/1734/trunk/editor/embedapi.html +END +svg-editor.css +K 25 +svn:wc:ra_dav:version-url +V 46 +/svn/!svn/ver/2076/trunk/editor/svg-editor.css +END +history.js +K 25 +svn:wc:ra_dav:version-url +V 42 +/svn/!svn/ver/1993/trunk/editor/history.js +END +units.js +K 25 +svn:wc:ra_dav:version-url +V 40 +/svn/!svn/ver/1991/trunk/editor/units.js +END diff --git a/editor/.svn/entries b/editor/.svn/entries new file mode 100644 index 0000000..0308567 --- /dev/null +++ b/editor/.svn/entries @@ -0,0 +1,720 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/editor +http://svg-edit.googlecode.com/svn + + + +2012-05-08T20:09:38.998857Z +2080 +rusnakp + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +embedapi.js +file + + + + +2012-03-23T10:42:00.000000Z +5616d0cf42836b152bc7f8e6b6c4205f +2011-02-09T06:14:47.166399Z +1984 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +7329 + +contextmenu.js +file + + + + +2012-03-23T10:42:00.000000Z +958c8c4ac1d6e460f2bb1c37b1e1260d +2012-02-25T02:13:18.242841Z +2055 +codedread + + + + + + + + + + + + + + + + + + + + + +2587 + +jquery.js +file + + + + +2012-03-23T10:42:00.000000Z +ddb84c1587287b2df08966081ef063bf +2012-02-23T02:48:21.539764Z +2052 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +93868 + +select.js +file + + + + +2012-03-23T10:42:00.000000Z +eebadb50afe7a0f10f1d9a381742a083 +2011-02-09T06:14:47.166399Z +1984 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +15322 + +svgicons +dir + +browser.js +file + + + + +2012-03-23T10:42:00.000000Z +430b41c722c1b76417d7fa2ce97599cd +2012-03-20T08:58:24.542557Z +2065 +asyazwan@gmail.com +has-props + + + + + + + + + + + + + + + + + + + + +6189 + +extensions +dir + +locale +dir + +js-hotkeys +dir + +svgtransformlist.js +file + + + + +2012-03-23T10:42:00.000000Z +aa0d3a29eb7e4f973705e8a5f3d1ffb8 +2011-02-09T06:14:47.166399Z +1984 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +7935 + +math.js +file + + + + +2012-03-23T10:42:00.000000Z +9c30d37ef11fc244809dbfbf995bc37e +2011-02-09T06:14:47.166399Z +1984 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +7455 + +images +dir + +svgcanvas.js +file + + + + + +781cf4d49f773a4670f46ab12124124f +2012-03-26T13:33:48.295754Z +2070 +asyazwan@gmail.com +has-props + +jgraduate +dir + +browser-not-supported.html +file + + + + +2012-03-23T10:42:00.000000Z +6e008f38ba0ddb2442d32a7d0c9ce0b4 +2011-01-16T20:40:17.194658Z +1923 +adrianbjones@gmail.com +has-props + + + + + + + + + + + + + + + + + + + + +1543 + +path.js +file + + + + +2012-03-23T10:42:00.000000Z +04e2bd9f48097a7599da80350e4d924b +2011-03-07T18:26:12.602539Z +2025 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +25391 + +draw.js +file + + + + +2012-03-23T10:42:00.000000Z +9b61fc3cb8df9b2696bc9ceb561fe4df +2011-02-10T19:09:35.759706Z +1993 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +16020 + +units.js +file + + + + +2012-03-23T10:42:00.000000Z +9fb5d209da93f595775168a56426848b +2011-02-10T04:11:19.905059Z +1991 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +7819 + +svg-editor.html +file + + + + +2012-05-16T23:42:07.000000Z +5981341ae4bb764270aebc941bf482be +2012-03-31T18:02:08.849195Z +2076 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +29017 + +svg-editor.manifest +file + + + + +2012-03-23T10:42:00.000000Z +79f3195254ea0c5660b429b22a222c61 +2010-01-12T20:39:03.457662Z +1201 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +2316 + +jquery-ui +dir + +svgutils.js +file + + + + +2012-05-16T23:42:07.000000Z +7f89fcfd48a5a3e645578ece0faf12c1 +2012-03-30T03:50:54.215739Z +2072 +asyazwan@gmail.com +has-props + + + + + + + + + + + + + + + + + + + + +17517 + +svg-editor.js +file + + + + +2012-05-16T23:42:07.000000Z +33a25c26af44b6f060d5e8bdcc371577 +2012-03-31T18:02:08.849195Z +2076 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +149127 + +canvg +dir + +sanitize.js +file + + + + +2012-03-23T10:42:00.000000Z +47af7f26c9338f5199edc30e2e36a878 +2012-02-26T18:08:34.679053Z +2057 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +14407 + +jquerybbq +dir + +embedapi.html +file + + + + +2012-03-23T10:42:00.000000Z +e1814119a6d8e5c220c2bec48b2caba3 +2010-09-20T18:55:10.937330Z +1734 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +1875 + +contextmenu +dir + +svg-editor.css +file + + + + +2012-05-16T23:42:07.000000Z +f6b582f9b1e0d9f92a13ae04f929f1d2 +2012-03-31T18:02:08.849195Z +2076 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +24142 + +history.js +file + + + + +2012-03-23T10:42:00.000000Z +921cd902514fbf0228660fb473ac201b +2011-02-10T19:09:35.759706Z +1993 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +20219 + +spinbtn +dir + diff --git a/editor/.svn/prop-base/browser-not-supported.html.svn-base b/editor/.svn/prop-base/browser-not-supported.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/editor/.svn/prop-base/browser-not-supported.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/editor/.svn/prop-base/browser.js.svn-base b/editor/.svn/prop-base/browser.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/browser.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/draw.js.svn-base b/editor/.svn/prop-base/draw.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/draw.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/embedapi.html.svn-base b/editor/.svn/prop-base/embedapi.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/editor/.svn/prop-base/embedapi.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/editor/.svn/prop-base/embedapi.js.svn-base b/editor/.svn/prop-base/embedapi.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/embedapi.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/history.js.svn-base b/editor/.svn/prop-base/history.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/history.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/jquery.js.svn-base b/editor/.svn/prop-base/jquery.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/jquery.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/math.js.svn-base b/editor/.svn/prop-base/math.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/math.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/path.js.svn-base b/editor/.svn/prop-base/path.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/path.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/sanitize.js.svn-base b/editor/.svn/prop-base/sanitize.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/sanitize.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/select.js.svn-base b/editor/.svn/prop-base/select.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/select.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/svg-editor.css.svn-base b/editor/.svn/prop-base/svg-editor.css.svn-base new file mode 100644 index 0000000..69cd899 --- /dev/null +++ b/editor/.svn/prop-base/svg-editor.css.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 8 +text/css +END diff --git a/editor/.svn/prop-base/svg-editor.html.svn-base b/editor/.svn/prop-base/svg-editor.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/editor/.svn/prop-base/svg-editor.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/editor/.svn/prop-base/svg-editor.js.svn-base b/editor/.svn/prop-base/svg-editor.js.svn-base new file mode 100644 index 0000000..2f297d1 --- /dev/null +++ b/editor/.svn/prop-base/svg-editor.js.svn-base @@ -0,0 +1,9 @@ +K 12 +svn:keywords +V 3 +Rev +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/svg-editor.manifest.svn-base b/editor/.svn/prop-base/svg-editor.manifest.svn-base new file mode 100644 index 0000000..e5b8705 --- /dev/null +++ b/editor/.svn/prop-base/svg-editor.manifest.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 19 +text/cache-manifest +END diff --git a/editor/.svn/prop-base/svgcanvas.js.svn-base b/editor/.svn/prop-base/svgcanvas.js.svn-base new file mode 100644 index 0000000..2f297d1 --- /dev/null +++ b/editor/.svn/prop-base/svgcanvas.js.svn-base @@ -0,0 +1,9 @@ +K 12 +svn:keywords +V 3 +Rev +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/svgtransformlist.js.svn-base b/editor/.svn/prop-base/svgtransformlist.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/svgtransformlist.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/svgutils.js.svn-base b/editor/.svn/prop-base/svgutils.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/svgutils.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/prop-base/units.js.svn-base b/editor/.svn/prop-base/units.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/.svn/prop-base/units.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/.svn/text-base/browser-not-supported.html.svn-base b/editor/.svn/text-base/browser-not-supported.html.svn-base new file mode 100644 index 0000000..3010fcf --- /dev/null +++ b/editor/.svn/text-base/browser-not-supported.html.svn-base @@ -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/.svn/text-base/browser.js.svn-base b/editor/.svn/text-base/browser.js.svn-base new file mode 100644 index 0000000..ff9441a --- /dev/null +++ b/editor/.svn/text-base/browser.js.svn-base @@ -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/.svn/text-base/contextmenu.js.svn-base b/editor/.svn/text-base/contextmenu.js.svn-base new file mode 100644 index 0000000..0d5dd34 --- /dev/null +++ b/editor/.svn/text-base/contextmenu.js.svn-base @@ -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/.svn/text-base/draw.js.svn-base b/editor/.svn/text-base/draw.js.svn-base new file mode 100644 index 0000000..8db3138 --- /dev/null +++ b/editor/.svn/text-base/draw.js.svn-base @@ -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/.svn/text-base/embedapi.html.svn-base b/editor/.svn/text-base/embedapi.html.svn-base new file mode 100644 index 0000000..3db0364 --- /dev/null +++ b/editor/.svn/text-base/embedapi.html.svn-base @@ -0,0 +1,56 @@ + + + + + + + + + + + + + +
    + + + + diff --git a/editor/.svn/text-base/embedapi.js.svn-base b/editor/.svn/text-base/embedapi.js.svn-base new file mode 100644 index 0000000..8debfd6 --- /dev/null +++ b/editor/.svn/text-base/embedapi.js.svn-base @@ -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= 0; i--) { + this.stack[i].unapply(handler); + } + + if (handler) { + handler.handleHistoryEvent(svgedit.history.HistoryEventTypes.AFTER_UNAPPLY, this); + } +}; + +// Function: svgedit.history.BatchCommand.elements +// Iterate through all our subcommands and returns all the elements we are changing +svgedit.history.BatchCommand.prototype.elements = function() { + var elems = []; + var cmd = this.stack.length; + while (cmd--) { + var thisElems = this.stack[cmd].elements(); + var elem = thisElems.length; + while (elem--) { + if (elems.indexOf(thisElems[elem]) == -1) elems.push(thisElems[elem]); + } + } + return elems; +}; + +// Function: svgedit.history.BatchCommand.addSubCommand +// Adds a given command to the history stack +// +// Parameters: +// cmd - The undo command object to add +svgedit.history.BatchCommand.prototype.addSubCommand = function(cmd) { + this.stack.push(cmd); +}; + +// Function: svgedit.history.BatchCommand.isEmpty +// Returns a boolean indicating whether or not the batch command is empty +svgedit.history.BatchCommand.prototype.isEmpty = function() { + return this.stack.length == 0; +}; + + +// Class: svgedit.history.UndoManager +// Parameters: +// historyEventHandler - an object that conforms to the HistoryEventHandler interface +// (see above) +svgedit.history.UndoManager = function(historyEventHandler) { + this.handler_ = historyEventHandler || null; + this.undoStackPointer = 0; + this.undoStack = []; + + // this is the stack that stores the original values, the elements and + // the attribute name for begin/finish + this.undoChangeStackPointer = -1; + this.undoableChangeStack = []; +}; + +// Function: svgedit.history.UndoManager.resetUndoStack +// Resets the undo stack, effectively clearing the undo/redo history +svgedit.history.UndoManager.prototype.resetUndoStack = function() { + this.undoStack = []; + this.undoStackPointer = 0; +}; + +// Function: svgedit.history.UndoManager.getUndoStackSize +// Returns: +// Integer with the current size of the undo history stack +svgedit.history.UndoManager.prototype.getUndoStackSize = function() { + return this.undoStackPointer; +}; + +// Function: svgedit.history.UndoManager.getRedoStackSize +// Returns: +// Integer with the current size of the redo history stack +svgedit.history.UndoManager.prototype.getRedoStackSize = function() { + return this.undoStack.length - this.undoStackPointer; +}; + +// Function: svgedit.history.UndoManager.getNextUndoCommandText +// Returns: +// String associated with the next undo command +svgedit.history.UndoManager.prototype.getNextUndoCommandText = function() { + return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer-1].getText() : ""; +}; + +// Function: svgedit.history.UndoManager.getNextRedoCommandText +// Returns: +// String associated with the next redo command +svgedit.history.UndoManager.prototype.getNextRedoCommandText = function() { + return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : ""; +}; + +// Function: svgedit.history.UndoManager.undo +// Performs an undo step +svgedit.history.UndoManager.prototype.undo = function() { + if (this.undoStackPointer > 0) { + var cmd = this.undoStack[--this.undoStackPointer]; + cmd.unapply(this.handler_); + } +}; + +// Function: svgedit.history.UndoManager.redo +// Performs a redo step +svgedit.history.UndoManager.prototype.redo = function() { + if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) { + var cmd = this.undoStack[this.undoStackPointer++]; + cmd.apply(this.handler_); + } +}; + +// Function: svgedit.history.UndoManager.addCommandToHistory +// Adds a command object to the undo history stack +// +// Parameters: +// cmd - The command object to add +svgedit.history.UndoManager.prototype.addCommandToHistory = function(cmd) { + // FIXME: we MUST compress consecutive text changes to the same element + // (right now each keystroke is saved as a separate command that includes the + // entire text contents of the text element) + // TODO: consider limiting the history that we store here (need to do some slicing) + + // if our stack pointer is not at the end, then we have to remove + // all commands after the pointer and insert the new command + if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) { + this.undoStack = this.undoStack.splice(0, this.undoStackPointer); + } + this.undoStack.push(cmd); + this.undoStackPointer = this.undoStack.length; +}; + + +// Function: svgedit.history.UndoManager.beginUndoableChange +// This function tells the canvas to remember the old values of the +// attrName attribute for each element sent in. The elements and values +// are stored on a stack, so the next call to finishUndoableChange() will +// pop the elements and old values off the stack, gets the current values +// from the DOM and uses all of these to construct the undo-able command. +// +// Parameters: +// attrName - The name of the attribute being changed +// elems - Array of DOM elements being changed +svgedit.history.UndoManager.prototype.beginUndoableChange = function(attrName, elems) { + var p = ++this.undoChangeStackPointer; + var i = elems.length; + var oldValues = new Array(i), elements = new Array(i); + while (i--) { + var elem = elems[i]; + if (elem == null) continue; + elements[i] = elem; + oldValues[i] = elem.getAttribute(attrName); + } + this.undoableChangeStack[p] = {'attrName': attrName, + 'oldValues': oldValues, + 'elements': elements}; +}; + +// Function: svgedit.history.UndoManager.finishUndoableChange +// This function returns a BatchCommand object which summarizes the +// change since beginUndoableChange was called. The command can then +// be added to the command history +// +// Returns: +// Batch command object with resulting changes +svgedit.history.UndoManager.prototype.finishUndoableChange = function() { + var p = this.undoChangeStackPointer--; + var changeset = this.undoableChangeStack[p]; + var i = changeset['elements'].length; + var attrName = changeset['attrName']; + var batchCmd = new svgedit.history.BatchCommand("Change " + attrName); + while (i--) { + var elem = changeset['elements'][i]; + if (elem == null) continue; + var changes = {}; + changes[attrName] = changeset['oldValues'][i]; + if (changes[attrName] != elem.getAttribute(attrName)) { + batchCmd.addSubCommand(new svgedit.history.ChangeElementCommand(elem, changes, attrName)); + } + } + this.undoableChangeStack[p] = null; + return batchCmd; +}; + + +})(); \ No newline at end of file diff --git a/editor/.svn/text-base/jquery.js.svn-base b/editor/.svn/text-base/jquery.js.svn-base new file mode 100644 index 0000000..198b3ff --- /dev/null +++ b/editor/.svn/text-base/jquery.js.svn-base @@ -0,0 +1,4 @@ +/*! jQuery v1.7.1 jquery.com | jquery.org/license */ +(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"":"")+""),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;g=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c
    a",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="
    "+""+"
    ",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="
    t
    ",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="
    ",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")}; +f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;le&&i.push({elem:this,matches:d.slice(e)});for(j=0;j0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

    ";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
    ";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h0)for(h=g;h=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/",""],legend:[1,"
    ","
    "],thead:[1,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],col:[2,"","
    "],area:[1,"",""],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div
    ","
    "]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function() +{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1>");try{for(var c=0,d=this.length;c1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]===""&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
    ").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window); \ No newline at end of file diff --git a/editor/.svn/text-base/math.js.svn-base b/editor/.svn/text-base/math.js.svn-base new file mode 100644 index 0000000..86ee4cf --- /dev/null +++ b/editor/.svn/text-base/math.js.svn-base @@ -0,0 +1,246 @@ +/** + * Package: svedit.math + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Jeff Schiller + */ + +// Dependencies: +// None. + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.math) { + svgedit.math = {}; +} + +// Constants +var NEAR_ZERO = 1e-14; + +// Throw away SVGSVGElement used for creating matrices/transforms. +var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + +// Function: svgedit.math.transformPoint +// A (hopefully) quicker function to transform a point by a matrix +// (this function avoids any DOM calls and just does the math) +// +// Parameters: +// x - Float representing the x coordinate +// y - Float representing the y coordinate +// m - Matrix object to transform the point with +// Returns a x,y object representing the transformed point +svgedit.math.transformPoint = function(x, y, m) { + return { x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f}; +}; + + +// Function: svgedit.math.isIdentity +// Helper function to check if the matrix performs no actual transform +// (i.e. exists for identity purposes) +// +// Parameters: +// m - The matrix object to check +// +// Returns: +// Boolean indicating whether or not the matrix is 1,0,0,1,0,0 +svgedit.math.isIdentity = function(m) { + return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0); +}; + + +// Function: svgedit.math.matrixMultiply +// This function tries to return a SVGMatrix that is the multiplication m1*m2. +// We also round to zero when it's near zero +// +// Parameters: +// >= 2 Matrix objects to multiply +// +// Returns: +// The matrix object resulting from the calculation +svgedit.math.matrixMultiply = function() { + var args = arguments, i = args.length, m = args[i-1]; + + while(i-- > 1) { + var m1 = args[i-1]; + m = m1.multiply(m); + } + if (Math.abs(m.a) < NEAR_ZERO) m.a = 0; + if (Math.abs(m.b) < NEAR_ZERO) m.b = 0; + if (Math.abs(m.c) < NEAR_ZERO) m.c = 0; + if (Math.abs(m.d) < NEAR_ZERO) m.d = 0; + if (Math.abs(m.e) < NEAR_ZERO) m.e = 0; + if (Math.abs(m.f) < NEAR_ZERO) m.f = 0; + + return m; +}; + +// Function: svgedit.math.hasMatrixTransform +// See if the given transformlist includes a non-indentity matrix transform +// +// Parameters: +// tlist - The transformlist to check +// +// Returns: +// Boolean on whether or not a matrix transform was found +svgedit.math.hasMatrixTransform = function(tlist) { + if(!tlist) return false; + var num = tlist.numberOfItems; + while (num--) { + var xform = tlist.getItem(num); + if (xform.type == 1 && !svgedit.math.isIdentity(xform.matrix)) return true; + } + return false; +}; + +// Function: svgedit.math.transformBox +// Transforms a rectangle based on the given matrix +// +// Parameters: +// l - Float with the box's left coordinate +// t - Float with the box's top coordinate +// w - Float with the box width +// h - Float with the box height +// m - Matrix object to transform the box by +// +// Returns: +// An object with the following values: +// * tl - The top left coordinate (x,y object) +// * tr - The top right coordinate (x,y object) +// * bl - The bottom left coordinate (x,y object) +// * br - The bottom right coordinate (x,y object) +// * aabox - Object with the following values: +// * Float with the axis-aligned x coordinate +// * Float with the axis-aligned y coordinate +// * Float with the axis-aligned width coordinate +// * Float with the axis-aligned height coordinate +svgedit.math.transformBox = function(l, t, w, h, m) { + var topleft = {x:l,y:t}, + topright = {x:(l+w),y:t}, + botright = {x:(l+w),y:(t+h)}, + botleft = {x:l,y:(t+h)}; + var transformPoint = svgedit.math.transformPoint; + topleft = transformPoint( topleft.x, topleft.y, m ); + var minx = topleft.x, + maxx = topleft.x, + miny = topleft.y, + maxy = topleft.y; + topright = transformPoint( topright.x, topright.y, m ); + minx = Math.min(minx, topright.x); + maxx = Math.max(maxx, topright.x); + miny = Math.min(miny, topright.y); + maxy = Math.max(maxy, topright.y); + botleft = transformPoint( botleft.x, botleft.y, m); + minx = Math.min(minx, botleft.x); + maxx = Math.max(maxx, botleft.x); + miny = Math.min(miny, botleft.y); + maxy = Math.max(maxy, botleft.y); + botright = transformPoint( botright.x, botright.y, m ); + minx = Math.min(minx, botright.x); + maxx = Math.max(maxx, botright.x); + miny = Math.min(miny, botright.y); + maxy = Math.max(maxy, botright.y); + + return {tl:topleft, tr:topright, bl:botleft, br:botright, + aabox: {x:minx, y:miny, width:(maxx-minx), height:(maxy-miny)} }; +}; + +// Function: svgedit.math.transformListToTransform +// This returns a single matrix Transform for a given Transform List +// (this is the equivalent of SVGTransformList.consolidate() but unlike +// that method, this one does not modify the actual SVGTransformList) +// This function is very liberal with its min,max arguments +// +// Parameters: +// tlist - The transformlist object +// min - Optional integer indicating start transform position +// max - Optional integer indicating end transform position +// +// Returns: +// A single matrix transform object +svgedit.math.transformListToTransform = function(tlist, min, max) { + if(tlist == null) { + // Or should tlist = null have been prevented before this? + return svg.createSVGTransformFromMatrix(svg.createSVGMatrix()); + } + var min = min == undefined ? 0 : min; + var max = max == undefined ? (tlist.numberOfItems-1) : max; + min = parseInt(min); + max = parseInt(max); + if (min > max) { var temp = max; max = min; min = temp; } + var m = svg.createSVGMatrix(); + for (var i = min; i <= max; ++i) { + // if our indices are out of range, just use a harmless identity matrix + var mtom = (i >= 0 && i < tlist.numberOfItems ? + tlist.getItem(i).matrix : + svg.createSVGMatrix()); + m = svgedit.math.matrixMultiply(m, mtom); + } + return svg.createSVGTransformFromMatrix(m); +}; + + +// Function: svgedit.math.getMatrix +// Get the matrix object for a given element +// +// Parameters: +// elem - The DOM element to check +// +// Returns: +// The matrix object associated with the element's transformlist +svgedit.math.getMatrix = function(elem) { + var tlist = svgedit.transformlist.getTransformList(elem); + return svgedit.math.transformListToTransform(tlist).matrix; +}; + + +// Function: svgedit.math.snapToAngle +// Returns a 45 degree angle coordinate associated with the two given +// coordinates +// +// Parameters: +// x1 - First coordinate's x value +// x2 - Second coordinate's x value +// y1 - First coordinate's y value +// y2 - Second coordinate's y value +// +// Returns: +// Object with the following values: +// x - The angle-snapped x value +// y - The angle-snapped y value +// snapangle - The angle at which to snap +svgedit.math.snapToAngle = function(x1,y1,x2,y2) { + var snap = Math.PI/4; // 45 degrees + var dx = x2 - x1; + var dy = y2 - y1; + var angle = Math.atan2(dy,dx); + var dist = Math.sqrt(dx * dx + dy * dy); + var snapangle= Math.round(angle/snap)*snap; + var x = x1 + dist*Math.cos(snapangle); + var y = y1 + dist*Math.sin(snapangle); + //console.log(x1,y1,x2,y2,x,y,angle) + return {x:x, y:y, a:snapangle}; +}; + + +// Function: rectsIntersect +// Check if two rectangles (BBoxes objects) intersect each other +// +// Paramaters: +// r1 - The first BBox-like object +// r2 - The second BBox-like object +// +// Returns: +// Boolean that's true if rectangles intersect +svgedit.math.rectsIntersect = function(r1, r2) { + return r2.x < (r1.x+r1.width) && + (r2.x+r2.width) > r1.x && + r2.y < (r1.y+r1.height) && + (r2.y+r2.height) > r1.y; +}; + + +})(); \ No newline at end of file diff --git a/editor/.svn/text-base/path.js.svn-base b/editor/.svn/text-base/path.js.svn-base new file mode 100644 index 0000000..e490182 --- /dev/null +++ b/editor/.svn/text-base/path.js.svn-base @@ -0,0 +1,980 @@ +/** + * Package: svgedit.path + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2011 Alexis Deveria + * Copyright(c) 2011 Jeff Schiller + */ + +// Dependencies: +// 1) jQuery +// 2) browser.js +// 3) math.js +// 4) svgutils.js + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.path) { + svgedit.path = {}; +} + +var svgns = "http://www.w3.org/2000/svg"; + +var uiStrings = { + "pathNodeTooltip": "Drag node to move it. Double-click node to change segment type", + "pathCtrlPtTooltip": "Drag control point to adjust curve properties" +}; + +var segData = { + 2: ['x','y'], + 4: ['x','y'], + 6: ['x','y','x1','y1','x2','y2'], + 8: ['x','y','x1','y1'], + 10: ['x','y','r1','r2','angle','largeArcFlag','sweepFlag'], + 12: ['x'], + 14: ['y'], + 16: ['x','y','x2','y2'], + 18: ['x','y'] +}; + +var pathFuncs = []; + +var link_control_pts = true; + +// Stores references to paths via IDs. +// TODO: Make this cross-document happy. +var pathData = {}; + +svgedit.path.setLinkControlPoints = function(lcp) { + link_control_pts = lcp; +}; + +svgedit.path.path = null; + +var editorContext_ = null; + +svgedit.path.init = function(editorContext) { + editorContext_ = editorContext; + + pathFuncs = [0,'ClosePath']; + var pathFuncsStrs = ['Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc', + 'LinetoHorizontal', 'LinetoVertical','CurvetoCubicSmooth','CurvetoQuadraticSmooth']; + $.each(pathFuncsStrs, function(i,s) { + pathFuncs.push(s+'Abs'); + pathFuncs.push(s+'Rel'); + }); +}; + +svgedit.path.insertItemBefore = function(elem, newseg, index) { + // Support insertItemBefore on paths for FF2 + var list = elem.pathSegList; + + if(svgedit.browser.supportsPathInsertItemBefore()) { + list.insertItemBefore(newseg, index); + return; + } + var len = list.numberOfItems; + var arr = []; + for(var i=0; i 0) { + new_anglea = angleBetween < Math.PI ? (anglea + angleDiff) : (anglea - angleDiff); + new_angleb = angleBetween < Math.PI ? (angleb - angleDiff) : (angleb + angleDiff); + } + else { + new_anglea = angleBetween < Math.PI ? (anglea - angleDiff) : (anglea + angleDiff); + new_angleb = angleBetween < Math.PI ? (angleb + angleDiff) : (angleb - angleDiff); + } + + // rotate the points + nct1.x = r1 * Math.cos(new_anglea) + pt.x; + nct1.y = r1 * Math.sin(new_anglea) + pt.y; + nct2.x = r2 * Math.cos(new_angleb) + pt.x; + nct2.y = r2 * Math.sin(new_angleb) + pt.y; + + return [nct1, nct2]; + } + return undefined; +}; + +svgedit.path.Segment = function(index, item) { + this.selected = false; + this.index = index; + this.item = item; + this.type = item.pathSegType; + + this.ctrlpts = []; + this.ptgrip = null; + this.segsel = null; +}; + +svgedit.path.Segment.prototype.showCtrlPts = function(y) { + for (var i in this.ctrlpts) { + this.ctrlpts[i].setAttribute("display", y ? "inline" : "none"); + } +}; + +svgedit.path.Segment.prototype.selectCtrls = function(y) { + $('#ctrlpointgrip_' + this.index + 'c1, #ctrlpointgrip_' + this.index + 'c2'). + attr('fill', y ? '#0FF' : '#EEE'); +}; + +svgedit.path.Segment.prototype.show = function(y) { + if(this.ptgrip) { + this.ptgrip.setAttribute("display", y ? "inline" : "none"); + this.segsel.setAttribute("display", y ? "inline" : "none"); + // Show/hide all control points if available + this.showCtrlPts(y); + } +}; + +svgedit.path.Segment.prototype.select = function(y) { + if(this.ptgrip) { + this.ptgrip.setAttribute("stroke", y ? "#0FF" : "#00F"); + this.segsel.setAttribute("display", y ? "inline" : "none"); + if(this.ctrlpts) { + this.selectCtrls(y); + } + this.selected = y; + } +}; + +svgedit.path.Segment.prototype.addGrip = function() { + this.ptgrip = svgedit.path.getPointGrip(this, true); + this.ctrlpts = svgedit.path.getControlPoints(this, true); + this.segsel = svgedit.path.getSegSelector(this, true); +}; + +svgedit.path.Segment.prototype.update = function(full) { + if(this.ptgrip) { + var pt = svgedit.path.getGripPt(this); + svgedit.utilities.assignAttributes(this.ptgrip, { + 'cx': pt.x, + 'cy': pt.y + }); + + svgedit.path.getSegSelector(this, true); + + if(this.ctrlpts) { + if(full) { + this.item = svgedit.path.path.elem.pathSegList.getItem(this.index); + this.type = this.item.pathSegType; + } + svgedit.path.getControlPoints(this); + } + // this.segsel.setAttribute("display", y?"inline":"none"); + } +}; + +svgedit.path.Segment.prototype.move = function(dx, dy) { + var item = this.item; + + if(this.ctrlpts) { + var cur_pts = [item.x += dx, item.y += dy, + item.x1, item.y1, item.x2 += dx, item.y2 += dy]; + } else { + var cur_pts = [item.x += dx, item.y += dy]; + } + svgedit.path.replacePathSeg(this.type, this.index, cur_pts); + + if(this.next && this.next.ctrlpts) { + var next = this.next.item; + var next_pts = [next.x, next.y, + next.x1 += dx, next.y1 += dy, next.x2, next.y2]; + svgedit.path.replacePathSeg(this.next.type, this.next.index, next_pts); + } + + if(this.mate) { + // The last point of a closed subpath has a "mate", + // which is the "M" segment of the subpath + var item = this.mate.item; + var pts = [item.x += dx, item.y += dy]; + svgedit.path.replacePathSeg(this.mate.type, this.mate.index, pts); + // Has no grip, so does not need "updating"? + } + + this.update(true); + if(this.next) this.next.update(true); +}; + +svgedit.path.Segment.prototype.setLinked = function(num) { + var seg, anum, pt; + if (num == 2) { + anum = 1; + seg = this.next; + if(!seg) return; + pt = this.item; + } else { + anum = 2; + seg = this.prev; + if(!seg) return; + pt = seg.item; + } + + var item = seg.item; + + item['x' + anum] = pt.x + (pt.x - this.item['x' + num]); + item['y' + anum] = pt.y + (pt.y - this.item['y' + num]); + + var pts = [item.x, item.y, + item.x1, item.y1, + item.x2, item.y2]; + + svgedit.path.replacePathSeg(seg.type, seg.index, pts); + seg.update(true); +}; + +svgedit.path.Segment.prototype.moveCtrl = function(num, dx, dy) { + var item = this.item; + + item['x' + num] += dx; + item['y' + num] += dy; + + var pts = [item.x,item.y, + item.x1,item.y1, item.x2,item.y2]; + + svgedit.path.replacePathSeg(this.type, this.index, pts); + this.update(true); +}; + +svgedit.path.Segment.prototype.setType = function(new_type, pts) { + svgedit.path.replacePathSeg(new_type, this.index, pts); + this.type = new_type; + this.item = svgedit.path.path.elem.pathSegList.getItem(this.index); + this.showCtrlPts(new_type === 6); + this.ctrlpts = svgedit.path.getControlPoints(this); + this.update(true); +}; + +svgedit.path.Path = function(elem) { + if(!elem || elem.tagName !== "path") { + throw "svgedit.path.Path constructed without a element"; + } + + this.elem = elem; + this.segs = []; + this.selected_pts = []; + svgedit.path.path = this; + + this.init(); +}; + +// Reset path data +svgedit.path.Path.prototype.init = function() { + // Hide all grips, etc + $(svgedit.path.getGripContainer()).find("*").attr("display", "none"); + var segList = this.elem.pathSegList; + var len = segList.numberOfItems; + this.segs = []; + this.selected_pts = []; + this.first_seg = null; + + // Set up segs array + for(var i=0; i < len; i++) { + var item = segList.getItem(i); + var segment = new svgedit.path.Segment(i, item); + segment.path = this; + this.segs.push(segment); + } + + var segs = this.segs; + var start_i = null; + + for(var i=0; i < len; i++) { + var seg = segs[i]; + var next_seg = (i+1) >= len ? null : segs[i+1]; + var prev_seg = (i-1) < 0 ? null : segs[i-1]; + + if(seg.type === 2) { + if(prev_seg && prev_seg.type !== 1) { + // New sub-path, last one is open, + // so add a grip to last sub-path's first point + var start_seg = segs[start_i]; + start_seg.next = segs[start_i+1]; + start_seg.next.prev = start_seg; + start_seg.addGrip(); + } + // Remember that this is a starter seg + start_i = i; + } else if(next_seg && next_seg.type === 1) { + // This is the last real segment of a closed sub-path + // Next is first seg after "M" + seg.next = segs[start_i+1]; + + // First seg after "M"'s prev is this + seg.next.prev = seg; + seg.mate = segs[start_i]; + seg.addGrip(); + if(this.first_seg == null) { + this.first_seg = seg; + } + } else if(!next_seg) { + if(seg.type !== 1) { + // Last seg, doesn't close so add a grip + // to last sub-path's first point + var start_seg = segs[start_i]; + start_seg.next = segs[start_i+1]; + start_seg.next.prev = start_seg; + start_seg.addGrip(); + seg.addGrip(); + + if(!this.first_seg) { + // Open path, so set first as real first and add grip + this.first_seg = segs[start_i]; + } + } + } else if(seg.type !== 1){ + // Regular segment, so add grip and its "next" + seg.addGrip(); + + // Don't set its "next" if it's an "M" + if(next_seg && next_seg.type !== 2) { + seg.next = next_seg; + seg.next.prev = seg; + } + } + } + return this; +}; + +svgedit.path.Path.prototype.eachSeg = function(fn) { + var len = this.segs.length + for(var i=0; i < len; i++) { + var ret = fn.call(this.segs[i], i); + if(ret === false) break; + } +}; + +svgedit.path.Path.prototype.addSeg = function(index) { + // Adds a new segment + var seg = this.segs[index]; + if(!seg.prev) return; + + var prev = seg.prev; + var newseg; + switch(seg.item.pathSegType) { + case 4: + var new_x = (seg.item.x + prev.item.x) / 2; + var new_y = (seg.item.y + prev.item.y) / 2; + newseg = this.elem.createSVGPathSegLinetoAbs(new_x, new_y); + break; + case 6: //make it a curved segment to preserve the shape (WRS) + // http://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm#Geometric_interpretation + var p0_x = (prev.item.x + seg.item.x1)/2; + var p1_x = (seg.item.x1 + seg.item.x2)/2; + var p2_x = (seg.item.x2 + seg.item.x)/2; + var p01_x = (p0_x + p1_x)/2; + var p12_x = (p1_x + p2_x)/2; + var new_x = (p01_x + p12_x)/2; + var p0_y = (prev.item.y + seg.item.y1)/2; + var p1_y = (seg.item.y1 + seg.item.y2)/2; + var p2_y = (seg.item.y2 + seg.item.y)/2; + var p01_y = (p0_y + p1_y)/2; + var p12_y = (p1_y + p2_y)/2; + var new_y = (p01_y + p12_y)/2; + newseg = this.elem.createSVGPathSegCurvetoCubicAbs(new_x,new_y, p0_x,p0_y, p01_x,p01_y); + var pts = [seg.item.x,seg.item.y,p12_x,p12_y,p2_x,p2_y]; + svgedit.path.replacePathSeg(seg.type,index,pts); + break; + } + + svgedit.path.insertItemBefore(this.elem, newseg, index); +}; + +svgedit.path.Path.prototype.deleteSeg = function(index) { + var seg = this.segs[index]; + var list = this.elem.pathSegList; + + seg.show(false); + var next = seg.next; + if(seg.mate) { + // Make the next point be the "M" point + var pt = [next.item.x, next.item.y]; + svgedit.path.replacePathSeg(2, next.index, pt); + + // Reposition last node + svgedit.path.replacePathSeg(4, seg.index, pt); + + list.removeItem(seg.mate.index); + } else if(!seg.prev) { + // First node of open path, make next point the M + var item = seg.item; + var pt = [next.item.x, next.item.y]; + svgedit.path.replacePathSeg(2, seg.next.index, pt); + list.removeItem(index); + + } else { + list.removeItem(index); + } +}; + +svgedit.path.Path.prototype.subpathIsClosed = function(index) { + var closed = false; + // Check if subpath is already open + svgedit.path.path.eachSeg(function(i) { + if(i <= index) return true; + if(this.type === 2) { + // Found M first, so open + return false; + } else if(this.type === 1) { + // Found Z first, so closed + closed = true; + return false; + } + }); + + return closed; +}; + +svgedit.path.Path.prototype.removePtFromSelection = function(index) { + var pos = this.selected_pts.indexOf(index); + if(pos == -1) { + return; + } + this.segs[index].select(false); + this.selected_pts.splice(pos, 1); +}; + +svgedit.path.Path.prototype.clearSelection = function() { + this.eachSeg(function(i) { + // 'this' is the segment here + this.select(false); + }); + this.selected_pts = []; +}; + +svgedit.path.Path.prototype.storeD = function() { + this.last_d = this.elem.getAttribute('d'); +}; + +svgedit.path.Path.prototype.show = function(y) { + // Shows this path's segment grips + this.eachSeg(function() { + // 'this' is the segment here + this.show(y); + }); + if(y) { + this.selectPt(this.first_seg.index); + } + return this; +}; + +// Move selected points +svgedit.path.Path.prototype.movePts = function(d_x, d_y) { + var i = this.selected_pts.length; + while(i--) { + var seg = this.segs[this.selected_pts[i]]; + seg.move(d_x, d_y); + } +}; + +svgedit.path.Path.prototype.moveCtrl = function(d_x, d_y) { + var seg = this.segs[this.selected_pts[0]]; + seg.moveCtrl(this.dragctrl, d_x, d_y); + if(link_control_pts) { + seg.setLinked(this.dragctrl); + } +}; + +svgedit.path.Path.prototype.setSegType = function(new_type) { + this.storeD(); + var i = this.selected_pts.length; + var text; + while(i--) { + var sel_pt = this.selected_pts[i]; + + // Selected seg + var cur = this.segs[sel_pt]; + var prev = cur.prev; + if(!prev) continue; + + if(!new_type) { // double-click, so just toggle + text = "Toggle Path Segment Type"; + + // Toggle segment to curve/straight line + var old_type = cur.type; + + new_type = (old_type == 6) ? 4 : 6; + } + + new_type = new_type-0; + + var cur_x = cur.item.x; + var cur_y = cur.item.y; + var prev_x = prev.item.x; + var prev_y = prev.item.y; + var points; + switch ( new_type ) { + case 6: + if(cur.olditem) { + var old = cur.olditem; + points = [cur_x,cur_y, old.x1,old.y1, old.x2,old.y2]; + } else { + var diff_x = cur_x - prev_x; + var diff_y = cur_y - prev_y; + // get control points from straight line segment + /* + var ct1_x = (prev_x + (diff_y/2)); + var ct1_y = (prev_y - (diff_x/2)); + var ct2_x = (cur_x + (diff_y/2)); + var ct2_y = (cur_y - (diff_x/2)); + */ + //create control points on the line to preserve the shape (WRS) + var ct1_x = (prev_x + (diff_x/3)); + var ct1_y = (prev_y + (diff_y/3)); + var ct2_x = (cur_x - (diff_x/3)); + var ct2_y = (cur_y - (diff_y/3)); + points = [cur_x,cur_y, ct1_x,ct1_y, ct2_x,ct2_y]; + } + break; + case 4: + points = [cur_x,cur_y]; + + // Store original prevve segment nums + cur.olditem = cur.item; + break; + } + + cur.setType(new_type, points); + } + svgedit.path.path.endChanges(text); +}; + +svgedit.path.Path.prototype.selectPt = function(pt, ctrl_num) { + this.clearSelection(); + if(pt == null) { + this.eachSeg(function(i) { + // 'this' is the segment here. + if(this.prev) { + pt = i; + } + }); + } + this.addPtsToSelection(pt); + if(ctrl_num) { + this.dragctrl = ctrl_num; + + if(link_control_pts) { + this.segs[pt].setLinked(ctrl_num); + } + } +}; + +// Update position of all points +svgedit.path.Path.prototype.update = function() { + var elem = this.elem; + if(svgedit.utilities.getRotationAngle(elem)) { + this.matrix = svgedit.math.getMatrix(elem); + this.imatrix = this.matrix.inverse(); + } else { + this.matrix = null; + this.imatrix = null; + } + + this.eachSeg(function(i) { + this.item = elem.pathSegList.getItem(i); + this.update(); + }); + + return this; +}; + +svgedit.path.getPath_ = function(elem) { + var p = pathData[elem.id]; + if(!p) p = pathData[elem.id] = new svgedit.path.Path(elem); + return p; +}; + +svgedit.path.removePath_ = function(id) { + if(id in pathData) delete pathData[id]; +}; + +var getRotVals = function(x, y) { + dx = x - oldcx; + dy = y - oldcy; + + // rotate the point around the old center + r = Math.sqrt(dx*dx + dy*dy); + theta = Math.atan2(dy,dx) + angle; + dx = r * Math.cos(theta) + oldcx; + dy = r * Math.sin(theta) + oldcy; + + // dx,dy should now hold the actual coordinates of each + // point after being rotated + + // now we want to rotate them around the new center in the reverse direction + dx -= newcx; + dy -= newcy; + + r = Math.sqrt(dx*dx + dy*dy); + theta = Math.atan2(dy,dx) - angle; + + return {'x':(r * Math.cos(theta) + newcx)/1, + 'y':(r * Math.sin(theta) + newcy)/1}; +}; + +// If the path was rotated, we must now pay the piper: +// Every path point must be rotated into the rotated coordinate system of +// its old center, then determine the new center, then rotate it back +// This is because we want the path to remember its rotation + +// TODO: This is still using ye olde transform methods, can probably +// be optimized or even taken care of by recalculateDimensions +svgedit.path.recalcRotatedPath = function() { + var current_path = svgedit.path.path.elem; + var angle = svgedit.utilities.getRotationAngle(current_path, true); + if(!angle) return; +// selectedBBoxes[0] = svgedit.path.path.oldbbox; + var box = svgedit.utilities.getBBox(current_path), + oldbox = svgedit.path.path.oldbbox,//selectedBBoxes[0], + oldcx = oldbox.x + oldbox.width/2, + oldcy = oldbox.y + oldbox.height/2, + newcx = box.x + box.width/2, + newcy = box.y + box.height/2, + + // un-rotate the new center to the proper position + dx = newcx - oldcx, + dy = newcy - oldcy, + r = Math.sqrt(dx*dx + dy*dy), + theta = Math.atan2(dy,dx) + angle; + + newcx = r * Math.cos(theta) + oldcx; + newcy = r * Math.sin(theta) + oldcy; + + var list = current_path.pathSegList, + i = list.numberOfItems; + while (i) { + i -= 1; + var seg = list.getItem(i), + type = seg.pathSegType; + if(type == 1) continue; + + var rvals = getRotVals(seg.x,seg.y), + points = [rvals.x, rvals.y]; + if(seg.x1 != null && seg.x2 != null) { + c_vals1 = getRotVals(seg.x1, seg.y1); + c_vals2 = getRotVals(seg.x2, seg.y2); + points.splice(points.length, 0, c_vals1.x , c_vals1.y, c_vals2.x, c_vals2.y); + } + svgedit.path.replacePathSeg(type, i, points); + } // loop for each point + + box = svgedit.utilities.getBBox(current_path); +// selectedBBoxes[0].x = box.x; selectedBBoxes[0].y = box.y; +// selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height; + + // now we must set the new transform to be rotated around the new center + var R_nc = svgroot.createSVGTransform(), + tlist = svgedit.transformlist.getTransformList(current_path); + R_nc.setRotate((angle * 180.0 / Math.PI), newcx, newcy); + tlist.replaceItem(R_nc,0); +}; + +// ==================================== +// Public API starts here + +svgedit.path.clearData = function() { + pathData = {}; +}; + +})(); diff --git a/editor/.svn/text-base/sanitize.js.svn-base b/editor/.svn/text-base/sanitize.js.svn-base new file mode 100644 index 0000000..5924a59 --- /dev/null +++ b/editor/.svn/text-base/sanitize.js.svn-base @@ -0,0 +1,273 @@ +/** + * Package: svgedit.sanitize + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Jeff Schiller + */ + +// Dependencies: +// 1) browser.js +// 2) svgutils.js + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.sanitize) { + svgedit.sanitize = {}; +} + +// 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"; + +// map namespace URIs to prefixes +var nsMap_ = {}; +nsMap_[xlinkns] = 'xlink'; +nsMap_[xmlns] = 'xml'; +nsMap_[xmlnsns] = 'xmlns'; +nsMap_[se_ns] = 'se'; +nsMap_[htmlns] = 'xhtml'; +nsMap_[mathns] = 'mathml'; + +// map prefixes to namespace URIs +var nsRevMap_ = {}; +$.each(nsMap_, function(key,value){ + nsRevMap_[value] = key; +}); + +// this defines which elements and attributes that we support +var svgWhiteList_ = { + // SVG Elements + "a": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "xlink:href", "xlink:title"], + "circle": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "r", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], + "clipPath": ["class", "clipPathUnits", "id"], + "defs": [], + "style" : ["type"], + "desc": [], + "ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], + "feGaussianBlur": ["class", "color-interpolation-filters", "id", "requiredFeatures", "stdDeviation"], + "filter": ["class", "color-interpolation-filters", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"], + "foreignObject": ["class", "font-size", "height", "id", "opacity", "requiredFeatures", "style", "transform", "width", "x", "y"], + "g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "font-family", "font-size", "font-style", "font-weight", "text-anchor"], + "image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"], + "line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"], + "linearGradient": ["class", "id", "gradientTransform", "gradientUnits", "requiredFeatures", "spreadMethod", "systemLanguage", "x1", "x2", "xlink:href", "y1", "y2"], + "marker": ["id", "class", "markerHeight", "markerUnits", "markerWidth", "orient", "preserveAspectRatio", "refX", "refY", "systemLanguage", "viewBox"], + "mask": ["class", "height", "id", "maskContentUnits", "maskUnits", "width", "x", "y"], + "metadata": ["class", "id"], + "path": ["class", "clip-path", "clip-rule", "d", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], + "pattern": ["class", "height", "id", "patternContentUnits", "patternTransform", "patternUnits", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xlink:href", "y"], + "polygon": ["class", "clip-path", "clip-rule", "id", "fill", "fill-opacity", "fill-rule", "filter", "id", "class", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "points", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], + "polyline": ["class", "clip-path", "clip-rule", "id", "fill", "fill-opacity", "fill-rule", "filter", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "points", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], + "radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"], + "rect": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"], + "stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"], + "svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xmlns", "xmlns:se", "xmlns:xlink", "y"], + "switch": ["class", "id", "requiredFeatures", "systemLanguage"], + "symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"], + "text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"], + "textPath": ["class", "id", "method", "requiredFeatures", "spacing", "startOffset", "style", "systemLanguage", "transform", "xlink:href"], + "title": [], + "tspan": ["class", "clip-path", "clip-rule", "dx", "dy", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "rotate", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "textLength", "transform", "x", "xml:space", "y"], + "use": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "transform", "width", "x", "xlink:href", "y"], + + // MathML Elements + "annotation": ["encoding"], + "annotation-xml": ["encoding"], + "maction": ["actiontype", "other", "selection"], + "math": ["class", "id", "display", "xmlns"], + "menclose": ["notation"], + "merror": [], + "mfrac": ["linethickness"], + "mi": ["mathvariant"], + "mmultiscripts": [], + "mn": [], + "mo": ["fence", "lspace", "maxsize", "minsize", "rspace", "stretchy"], + "mover": [], + "mpadded": ["lspace", "width", "height", "depth", "voffset"], + "mphantom": [], + "mprescripts": [], + "mroot": [], + "mrow": ["xlink:href", "xlink:type", "xmlns:xlink"], + "mspace": ["depth", "height", "width"], + "msqrt": [], + "mstyle": ["displaystyle", "mathbackground", "mathcolor", "mathvariant", "scriptlevel"], + "msub": [], + "msubsup": [], + "msup": [], + "mtable": ["align", "columnalign", "columnlines", "columnspacing", "displaystyle", "equalcolumns", "equalrows", "frame", "rowalign", "rowlines", "rowspacing", "width"], + "mtd": ["columnalign", "columnspan", "rowalign", "rowspan"], + "mtext": [], + "mtr": ["columnalign", "rowalign"], + "munder": [], + "munderover": [], + "none": [], + "semantics": [] +}; + +// Produce a Namespace-aware version of svgWhitelist +var svgWhiteListNS_ = {}; +$.each(svgWhiteList_, function(elt,atts){ + var attNS = {}; + $.each(atts, function(i, att){ + if (att.indexOf(':') >= 0) { + var v = att.split(':'); + attNS[v[1]] = nsRevMap_[v[0]]; + } else { + attNS[att] = att == 'xmlns' ? xmlnsns : null; + } + }); + svgWhiteListNS_[elt] = attNS; +}); + +// temporarily expose these +svgedit.sanitize.getNSMap = function() { return nsMap_; } + +// Function: svgedit.sanitize.sanitizeSvg +// Sanitizes the input node and its children +// It only keeps what is allowed from our whitelist defined above +// +// Parameters: +// node - The DOM element to be checked, will also check its children +svgedit.sanitize.sanitizeSvg = function(node) { + // we only care about element nodes + // automatically return for all comment, etc nodes + // for text, we do a whitespace trim + if (node.nodeType == 3) { + node.nodeValue = node.nodeValue.replace(/^\s+|\s+$/g, ""); + // Remove empty text nodes + if(!node.nodeValue.length) node.parentNode.removeChild(node); + } + if (node.nodeType != 1) return; + var doc = node.ownerDocument; + var parent = node.parentNode; + // can parent ever be null here? I think the root node's parent is the document... + if (!doc || !parent) return; + + var allowedAttrs = svgWhiteList_[node.nodeName]; + var allowedAttrsNS = svgWhiteListNS_[node.nodeName]; + + // if this element is allowed + if (allowedAttrs != undefined) { + + var se_attrs = []; + + var i = node.attributes.length; + while (i--) { + // if the attribute is not in our whitelist, then remove it + // could use jQuery's inArray(), but I don't know if that's any better + var attr = node.attributes.item(i); + var attrName = attr.nodeName; + var attrLocalName = attr.localName; + var attrNsURI = attr.namespaceURI; + // Check that an attribute with the correct localName in the correct namespace is on + // our whitelist or is a namespace declaration for one of our allowed namespaces + if (!(allowedAttrsNS.hasOwnProperty(attrLocalName) && attrNsURI == allowedAttrsNS[attrLocalName] && attrNsURI != xmlnsns) && + !(attrNsURI == xmlnsns && nsMap_[attr.nodeValue]) ) + { + // TODO(codedread): Programmatically add the se: attributes to the NS-aware whitelist. + // Bypassing the whitelist to allow se: prefixes. Is there + // a more appropriate way to do this? + if(attrName.indexOf('se:') == 0) { + se_attrs.push([attrName, attr.nodeValue]); + } + node.removeAttributeNS(attrNsURI, attrLocalName); + } + + // Add spaces before negative signs where necessary + if(svgedit.browser.isGecko()) { + switch ( attrName ) { + case "transform": + case "gradientTransform": + case "patternTransform": + var val = attr.nodeValue.replace(/(\d)-/g, "$1 -"); + node.setAttribute(attrName, val); + } + } + + // for the style attribute, rewrite it in terms of XML presentational attributes + if (attrName == "style") { + var props = attr.nodeValue.split(";"), + p = props.length; + while(p--) { + var nv = props[p].split(":"); + // now check that this attribute is supported + if (allowedAttrs.indexOf(nv[0]) >= 0) { + node.setAttribute(nv[0],nv[1]); + } + } + node.removeAttribute('style'); + } + } + + $.each(se_attrs, function(i, attr) { + node.setAttributeNS(se_ns, attr[0], attr[1]); + }); + + // for some elements that have a xlink:href, ensure the URI refers to a local element + // (but not for links) + var href = svgedit.utilities.getHref(node); + if(href && + ["filter", "linearGradient", "pattern", + "radialGradient", "textPath", "use"].indexOf(node.nodeName) >= 0) + { + // TODO: we simply check if the first character is a #, is this bullet-proof? + if (href[0] != "#") { + // remove the attribute (but keep the element) + svgedit.utilities.setHref(node, ""); + node.removeAttributeNS(xlinkns, "href"); + } + } + + // Safari crashes on a without a xlink:href, so we just remove the node here + if (node.nodeName == "use" && !svgedit.utilities.getHref(node)) { + parent.removeChild(node); + return; + } + // if the element has attributes pointing to a non-local reference, + // need to remove the attribute + $.each(["clip-path", "fill", "filter", "marker-end", "marker-mid", "marker-start", "mask", "stroke"],function(i,attr) { + var val = node.getAttribute(attr); + if (val) { + val = svgedit.utilities.getUrlFromAttr(val); + // simply check for first character being a '#' + if (val && val[0] !== "#") { + node.setAttribute(attr, ""); + node.removeAttribute(attr); + } + } + }); + + // recurse to children + i = node.childNodes.length; + while (i--) { svgedit.sanitize.sanitizeSvg(node.childNodes.item(i)); } + } + // else, remove this element + else { + // remove all children from this node and insert them before this node + // FIXME: in the case of animation elements this will hardly ever be correct + var children = []; + while (node.hasChildNodes()) { + children.push(parent.insertBefore(node.firstChild, node)); + } + + // remove this node from the document altogether + parent.removeChild(node); + + // call sanitizeSvg on each of those children + var i = children.length; + while (i--) { svgedit.sanitize.sanitizeSvg(children[i]); } + + } +}; + +})(); + diff --git a/editor/.svn/text-base/select.js.svn-base b/editor/.svn/text-base/select.js.svn-base new file mode 100644 index 0000000..c13f291 --- /dev/null +++ b/editor/.svn/text-base/select.js.svn-base @@ -0,0 +1,529 @@ +/** + * Package: svedit.select + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Jeff Schiller + */ + +// Dependencies: +// 1) jQuery +// 2) browser.js +// 3) math.js +// 4) svgutils.js + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.select) { + svgedit.select = {}; +} + +var svgFactory_; +var config_; +var selectorManager_; // A Singleton + +// Class: svgedit.select.Selector +// Private class for DOM element selection boxes +// +// Parameters: +// id - integer to internally indentify the selector +// elem - DOM element associated with this selector +svgedit.select.Selector = function(id, elem) { + // this is the selector's unique number + this.id = id; + + // this holds a reference to the element for which this selector is being used + this.selectedElement = elem; + + // this is a flag used internally to track whether the selector is being used or not + this.locked = true; + + // this holds a reference to the element that holds all visual elements of the selector + this.selectorGroup = svgFactory_.createSVGElement({ + 'element': 'g', + 'attr': {'id': ('selectorGroup' + this.id)} + }); + + // this holds a reference to the path rect + this.selectorRect = this.selectorGroup.appendChild( + svgFactory_.createSVGElement({ + 'element': 'path', + 'attr': { + 'id': ('selectedBox' + this.id), + 'fill': 'none', + 'stroke': '#22C', + 'stroke-width': '1', + 'stroke-dasharray': '5,5', + // need to specify this so that the rect is not selectable + 'style': 'pointer-events:none' + } + }) + ); + + // this holds a reference to the grip coordinates for this selector + this.gripCoords = { + 'nw': null, + 'n' : null, + 'ne': null, + 'e' : null, + 'se': null, + 's' : null, + 'sw': null, + 'w' : null + }; + + this.reset(this.selectedElement); +}; + + +// Function: svgedit.select.Selector.reset +// Used to reset the id and element that the selector is attached to +// +// Parameters: +// e - DOM element associated with this selector +svgedit.select.Selector.prototype.reset = function(e) { + this.locked = true; + this.selectedElement = e; + this.resize(); + this.selectorGroup.setAttribute('display', 'inline'); +}; + +// Function: svgedit.select.Selector.updateGripCursors +// Updates cursors for corner grips on rotation so arrows point the right way +// +// Parameters: +// angle - Float indicating current rotation angle in degrees +svgedit.select.Selector.prototype.updateGripCursors = function(angle) { + var dir_arr = []; + var steps = Math.round(angle / 45); + if(steps < 0) steps += 8; + for (var dir in selectorManager_.selectorGrips) { + dir_arr.push(dir); + } + while(steps > 0) { + dir_arr.push(dir_arr.shift()); + steps--; + } + var i = 0; + for (var dir in selectorManager_.selectorGrips) { + selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dir_arr[i] + '-resize')); + i++; + }; +}; + +// Function: svgedit.select.Selector.showGrips +// Show the resize grips of this selector +// +// Parameters: +// show - boolean indicating whether grips should be shown or not +svgedit.select.Selector.prototype.showGrips = function(show) { + // TODO: use suspendRedraw() here + var bShow = show ? 'inline' : 'none'; + selectorManager_.selectorGripsGroup.setAttribute('display', bShow); + var elem = this.selectedElement; + this.hasGrips = show; + if(elem && show) { + this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup); + this.updateGripCursors(svgedit.utilities.getRotationAngle(elem)); + } +}; + +// Function: svgedit.select.Selector.resize +// Updates the selector to match the element's size +svgedit.select.Selector.prototype.resize = function() { + var selectedBox = this.selectorRect, + mgr = selectorManager_, + selectedGrips = mgr.selectorGrips, + selected = this.selectedElement, + sw = selected.getAttribute('stroke-width'), + current_zoom = svgFactory_.currentZoom(); + var offset = 1/current_zoom; + if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) { + offset += (sw/2); + } + + var tagName = selected.tagName; + if (tagName === 'text') { + offset += 2/current_zoom; + } + + // loop and transform our bounding box until we reach our first rotation + var tlist = svgedit.transformlist.getTransformList(selected); + var m = svgedit.math.transformListToTransform(tlist).matrix; + + // This should probably be handled somewhere else, but for now + // it keeps the selection box correctly positioned when zoomed + m.e *= current_zoom; + m.f *= current_zoom; + + var bbox = svgedit.utilities.getBBox(selected); + if(tagName === 'g' && !$.data(selected, 'gsvg')) { + // The bbox for a group does not include stroke vals, so we + // get the bbox based on its children. + var stroked_bbox = svgFactory_.getStrokedBBox(selected.childNodes); + if(stroked_bbox) { + bbox = stroked_bbox; + } + } + + // apply the transforms + var l=bbox.x, t=bbox.y, w=bbox.width, h=bbox.height, + bbox = {x:l, y:t, width:w, height:h}; + + // we need to handle temporary transforms too + // if skewed, get its transformed box, then find its axis-aligned bbox + + //* + offset *= current_zoom; + + var nbox = svgedit.math.transformBox(l*current_zoom, t*current_zoom, w*current_zoom, h*current_zoom, m), + aabox = nbox.aabox, + nbax = aabox.x - offset, + nbay = aabox.y - offset, + nbaw = aabox.width + (offset * 2), + nbah = aabox.height + (offset * 2); + + // now if the shape is rotated, un-rotate it + var cx = nbax + nbaw/2, + cy = nbay + nbah/2; + + var angle = svgedit.utilities.getRotationAngle(selected); + if (angle) { + var rot = svgFactory_.svgRoot().createSVGTransform(); + rot.setRotate(-angle,cx,cy); + var rotm = rot.matrix; + nbox.tl = svgedit.math.transformPoint(nbox.tl.x,nbox.tl.y,rotm); + nbox.tr = svgedit.math.transformPoint(nbox.tr.x,nbox.tr.y,rotm); + nbox.bl = svgedit.math.transformPoint(nbox.bl.x,nbox.bl.y,rotm); + nbox.br = svgedit.math.transformPoint(nbox.br.x,nbox.br.y,rotm); + + // calculate the axis-aligned bbox + var tl = nbox.tl; + var minx = tl.x, + miny = tl.y, + maxx = tl.x, + maxy = tl.y; + + var Min = Math.min, Max = Math.max; + + minx = Min(minx, Min(nbox.tr.x, Min(nbox.bl.x, nbox.br.x) ) ) - offset; + miny = Min(miny, Min(nbox.tr.y, Min(nbox.bl.y, nbox.br.y) ) ) - offset; + maxx = Max(maxx, Max(nbox.tr.x, Max(nbox.bl.x, nbox.br.x) ) ) + offset; + maxy = Max(maxy, Max(nbox.tr.y, Max(nbox.bl.y, nbox.br.y) ) ) + offset; + + nbax = minx; + nbay = miny; + nbaw = (maxx-minx); + nbah = (maxy-miny); + } + var sr_handle = svgFactory_.svgRoot().suspendRedraw(100); + + var dstr = 'M' + nbax + ',' + nbay + + ' L' + (nbax+nbaw) + ',' + nbay + + ' ' + (nbax+nbaw) + ',' + (nbay+nbah) + + ' ' + nbax + ',' + (nbay+nbah) + 'z'; + selectedBox.setAttribute('d', dstr); + + var xform = angle ? 'rotate(' + [angle,cx,cy].join(',') + ')' : ''; + this.selectorGroup.setAttribute('transform', xform); + + // TODO(codedread): Is this if needed? +// if(selected === selectedElements[0]) { + this.gripCoords = { + 'nw': [nbax, nbay], + 'ne': [nbax+nbaw, nbay], + 'sw': [nbax, nbay+nbah], + 'se': [nbax+nbaw, nbay+nbah], + 'n': [nbax + (nbaw)/2, nbay], + 'w': [nbax, nbay + (nbah)/2], + 'e': [nbax + nbaw, nbay + (nbah)/2], + 's': [nbax + (nbaw)/2, nbay + nbah] + }; + + for(var dir in this.gripCoords) { + var coords = this.gripCoords[dir]; + selectedGrips[dir].setAttribute('cx', coords[0]); + selectedGrips[dir].setAttribute('cy', coords[1]); + }; + + // we want to go 20 pixels in the negative transformed y direction, ignoring scale + mgr.rotateGripConnector.setAttribute('x1', nbax + (nbaw)/2); + mgr.rotateGripConnector.setAttribute('y1', nbay); + mgr.rotateGripConnector.setAttribute('x2', nbax + (nbaw)/2); + mgr.rotateGripConnector.setAttribute('y2', nbay - 20); + + mgr.rotateGrip.setAttribute('cx', nbax + (nbaw)/2); + mgr.rotateGrip.setAttribute('cy', nbay - 20); +// } + + svgFactory_.svgRoot().unsuspendRedraw(sr_handle); +}; + + +// Class: svgedit.select.SelectorManager +svgedit.select.SelectorManager = function() { + // this will hold the element that contains all selector rects/grips + this.selectorParentGroup = null; + + // this is a special rect that is used for multi-select + this.rubberBandBox = null; + + // this will hold objects of type svgedit.select.Selector (see above) + this.selectors = []; + + // this holds a map of SVG elements to their Selector object + this.selectorMap = {}; + + // this holds a reference to the grip elements + this.selectorGrips = { + 'nw': null, + 'n' : null, + 'ne': null, + 'e' : null, + 'se': null, + 's' : null, + 'sw': null, + 'w' : null + }; + + this.selectorGripsGroup = null; + this.rotateGripConnector = null; + this.rotateGrip = null; + + this.initGroup(); +}; + +// Function: svgedit.select.SelectorManager.initGroup +// Resets the parent selector group element +svgedit.select.SelectorManager.prototype.initGroup = function() { + // remove old selector parent group if it existed + if (this.selectorParentGroup && this.selectorParentGroup.parentNode) { + this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup); + } + + // create parent selector group and add it to svgroot + this.selectorParentGroup = svgFactory_.createSVGElement({ + 'element': 'g', + 'attr': {'id': 'selectorParentGroup'} + }); + this.selectorGripsGroup = svgFactory_.createSVGElement({ + 'element': 'g', + 'attr': {'display': 'none'} + }); + this.selectorParentGroup.appendChild(this.selectorGripsGroup); + svgFactory_.svgRoot().appendChild(this.selectorParentGroup); + + this.selectorMap = {}; + this.selectors = []; + this.rubberBandBox = null; + + // add the corner grips + for (var dir in this.selectorGrips) { + var grip = svgFactory_.createSVGElement({ + 'element': 'circle', + 'attr': { + 'id': ('selectorGrip_resize_' + dir), + 'fill': '#22C', + 'r': 4, + 'style': ('cursor:' + dir + '-resize'), + // This expands the mouse-able area of the grips making them + // easier to grab with the mouse. + // This works in Opera and WebKit, but does not work in Firefox + // see https://bugzilla.mozilla.org/show_bug.cgi?id=500174 + 'stroke-width': 2, + 'pointer-events': 'all' + } + }); + + $.data(grip, 'dir', dir); + $.data(grip, 'type', 'resize'); + this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip); + } + + // add rotator elems + this.rotateGripConnector = this.selectorGripsGroup.appendChild( + svgFactory_.createSVGElement({ + 'element': 'line', + 'attr': { + 'id': ('selectorGrip_rotateconnector'), + 'stroke': '#22C', + 'stroke-width': '1' + } + }) + ); + + this.rotateGrip = this.selectorGripsGroup.appendChild( + svgFactory_.createSVGElement({ + 'element': 'circle', + 'attr': { + 'id': 'selectorGrip_rotate', + 'fill': 'lime', + 'r': 4, + 'stroke': '#22C', + 'stroke-width': 2, + 'style': 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;' + } + }) + ); + $.data(this.rotateGrip, 'type', 'rotate'); + + if($('#canvasBackground').length) return; + + var dims = config_.dimensions; + var canvasbg = svgFactory_.createSVGElement({ + 'element': 'svg', + 'attr': { + 'id': 'canvasBackground', + 'width': dims[0], + 'height': dims[1], + 'x': 0, + 'y': 0, + 'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out + 'style': 'pointer-events:none' + } + }); + + var rect = svgFactory_.createSVGElement({ + 'element': 'rect', + 'attr': { + 'width': '100%', + 'height': '100%', + 'x': 0, + 'y': 0, + 'stroke-width': 1, + 'stroke': '#000', + 'fill': '#FFF', + 'style': 'pointer-events:none' + } + }); + + // Both Firefox and WebKit are too slow with this filter region (especially at higher + // zoom levels) and Opera has at least one bug +// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)'); + canvasbg.appendChild(rect); + svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent()); +}; + +// Function: svgedit.select.SelectorManager.requestSelector +// Returns the selector based on the given element +// +// Parameters: +// elem - DOM element to get the selector for +svgedit.select.SelectorManager.prototype.requestSelector = function(elem) { + if (elem == null) return null; + var N = this.selectors.length; + // If we've already acquired one for this element, return it. + if (typeof(this.selectorMap[elem.id]) == 'object') { + this.selectorMap[elem.id].locked = true; + return this.selectorMap[elem.id]; + } + for (var i = 0; i < N; ++i) { + if (this.selectors[i] && !this.selectors[i].locked) { + this.selectors[i].locked = true; + this.selectors[i].reset(elem); + this.selectorMap[elem.id] = this.selectors[i]; + return this.selectors[i]; + } + } + // if we reached here, no available selectors were found, we create one + this.selectors[N] = new svgedit.select.Selector(N, elem); + this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup); + this.selectorMap[elem.id] = this.selectors[N]; + return this.selectors[N]; +}; + +// Function: svgedit.select.SelectorManager.releaseSelector +// Removes the selector of the given element (hides selection box) +// +// Parameters: +// elem - DOM element to remove the selector for +svgedit.select.SelectorManager.prototype.releaseSelector = function(elem) { + if (elem == null) return; + var N = this.selectors.length, + sel = this.selectorMap[elem.id]; + for (var i = 0; i < N; ++i) { + if (this.selectors[i] && this.selectors[i] == sel) { + if (sel.locked == false) { + // TODO(codedread): Ensure this exists in this module. + console.log('WARNING! selector was released but was already unlocked'); + } + delete this.selectorMap[elem.id]; + sel.locked = false; + sel.selectedElement = null; + sel.showGrips(false); + + // remove from DOM and store reference in JS but only if it exists in the DOM + try { + sel.selectorGroup.setAttribute('display', 'none'); + } catch(e) { } + + break; + } + } +}; + +// Function: svgedit.select.SelectorManager.getRubberBandBox +// Returns the rubberBandBox DOM element. This is the rectangle drawn by the user for selecting/zooming +svgedit.select.SelectorManager.prototype.getRubberBandBox = function() { + if (!this.rubberBandBox) { + this.rubberBandBox = this.selectorParentGroup.appendChild( + svgFactory_.createSVGElement({ + 'element': 'rect', + 'attr': { + 'id': 'selectorRubberBand', + 'fill': '#22C', + 'fill-opacity': 0.15, + 'stroke': '#22C', + 'stroke-width': 0.5, + 'display': 'none', + 'style': 'pointer-events:none' + } + }) + ); + } + return this.rubberBandBox; +}; + + +/** + * Interface: svgedit.select.SVGFactory + * An object that creates SVG elements for the canvas. + * + * interface svgedit.select.SVGFactory { + * SVGElement createSVGElement(jsonMap); + * SVGSVGElement svgRoot(); + * SVGSVGElement svgContent(); + * + * Number currentZoom(); + * Object getStrokedBBox(Element[]); // TODO(codedread): Remove when getStrokedBBox() has been put into svgutils.js + * } + */ + +/** + * Function: svgedit.select.init() + * Initializes this module. + * + * Parameters: + * config - an object containing configurable parameters (imgPath) + * svgFactory - an object implementing the SVGFactory interface (see above). + */ +svgedit.select.init = function(config, svgFactory) { + config_ = config; + svgFactory_ = svgFactory; + selectorManager_ = new svgedit.select.SelectorManager(); +}; + +/** + * Function: svgedit.select.getSelectorManager + * + * Returns: + * The SelectorManager instance. + */ +svgedit.select.getSelectorManager = function() { + return selectorManager_; +}; + +})(); \ No newline at end of file diff --git a/editor/.svn/text-base/svg-editor.css.svn-base b/editor/.svn/text-base/svg-editor.css.svn-base new file mode 100644 index 0000000..a56e603 --- /dev/null +++ b/editor/.svn/text-base/svg-editor.css.svn-base @@ -0,0 +1,1419 @@ +body { + background: #D0D0D0; +} + +html, body, div{ + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -o-user-select: text; + user-select: text; + /* this will work for QtWebKit in future */ + -webkit-user-drag: text; +} + +#browser-not-supported { + font-size: 0.8em; + font-family: Verdana, Helvetica, Arial; + color: #000000; +} + + +#svg_editor * { + transform-origin: 0 0; + -moz-transform-origin: 0 0; + -o-transform-origin: 0 0; + -webkit-transform-origin: 0 0; +} + +#svg_editor { + font-size: 8pt; + font-family: Verdana, Helvetica, Arial; + color: #000000; +} + +#svg_editor a { + color: #0000FF; +} + +#svg_editor hr { + border: none; + border-bottom: 1px solid #808080; +} + +#svg_editor select { + margin-top: 4px; +} + +#svg_editor #svgroot { + -moz-user-select: none; + -webkit-user-select: none; + position: absolute; + top: 0; + left: 0; +} + +#svg_editor #svgcanvas { + line-height: normal; + display: inline-block; + background-color: #A0A0A0; + text-align: center; + vertical-align: middle; + width: 640px; + height: 480px; + -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */ + position: relative; + /* + A subtle gradient effect in the canvas. + Just experimenting - not sure if this is worth it. + */ + background: -moz-radial-gradient(45deg,#bbb,#222); + background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222)); +} + +#rulers > div { + position: absolute; + background: #DDD; + z-index: 1; + overflow: hidden; +} + +#ruler_corner { + top: 76px; + left: 41px; + width: 15px; + height: 15px; +} + +#ruler_x { + height: 15px; + top: 76px; + left: 56px; + right: 30px; + border-bottom: 1px solid; + border-left: 1px solid #777; +} + +#rulers.moved #ruler_corner, +#rulers.moved #ruler_x { + top: 101px; +} + +#ruler_y { + width: 15px; + top: 91px; + left: 41px; + bottom: 78px; + border-right: 1px solid; + border-top: 1px solid #777; +} + +#rulers.moved #ruler_y { + top: 116px; +} + + +#ruler_x canvas:first-child { + margin-left: -16px; +} + +#ruler_x canvas { + float: left; +} + +#ruler_y canvas { + margin-top: -16px; +} + +#ruler_x > div, +#ruler_y > div { + overflow: hidden; +} + + + + +#svg_editor div#palette_holder { + overflow-x: scroll; + overflow-y: hidden; + height: 31px; + border: 1px solid #808080; + border-top: none; + margin-top: 2px; + margin-left: 4px; + position: relative; + z-index: 2; +} + +#svg_editor #stroke_bg, +#svg_editor #fill_bg { + height: 16px; + width: 16px; + margin: 1px; +} + +#svg_editor #fill_color, #svg_editor #stroke_color { + height: 16px; + width: 16px; + border: 1px solid #808080; + cursor: pointer; + margin-top: -18px; + margin-left: 1px; +} + +#tool_stroke select { + margin-top: 0; +} + +#svg_editor #color_tools .icon_label { + padding: 3px 19%; + width: 28px; + height: 100%; + cursor: pointer; + +} + +#svg_editor #group_opacityLabel, +#svg_editor #zoomLabel { + cursor: pointer; + margin-right: 5px; + padding-top: 4px +} + +#svg_editor #linkLabel > svg { + height: 20px; + padding-top: 4px; +} + +#color_tools .icon_label > * { + position: relative; + top: 1px; +} + +#svg_editor div#palette { + float: left; + width: 672px; + height: 16px; +} + +#svg_editor div#workarea { + display: inline-table-cell; + position:absolute; + top: 75px; + left: 40px; + bottom: 62px; + right: 14px; + background-color: #A0A0A0; + border: 1px solid #808080; + overflow: auto; + text-align: center; +} + +#svg_editor #sidepanels { + display: inline-block; + position:absolute; + top: 75px; + bottom: 60px; + right: 0px; + width: 2px; + padding: 10px; + border-color: #808080; + border-style: solid; + border-width: 1px; + border-left: none; +} + +#svg_editor #layerpanel { + display: inline-block; + position:absolute; + top: 1px; + bottom: 0px; + right: 0px; + width: 0px; + overflow: auto; + margin: 0px; + -moz-user-select: none; + -webkit-user-select: none; + +} + +/* + border-style: solid; + border-color: #666; + border-width: 0px 0px 0px 1px; +*/ +#svg_editor #sidepanel_handle { + display: inline-block; + position: absolute; + background-color: #D0D0D0; + font-weight: bold; + left: 0px; + top: 40%; + width: 1em; + padding: 5px 1px 5px 5px; + margin-left: 3px; + cursor: pointer; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -moz-user-select: none; + -webkit-user-select: none; +} + +#svg_editor #sidepanel_handle:hover { + font-weight: bold; +} + +#svg_editor #sidepanel_handle * { + cursor: pointer; + -moz-user-select: none; + -webkit-user-select: none; +} +#svg_editor #layerbuttons { + margin: 0px; + padding: 0px; + padding-left: 2px; + padding-right: 2px; + width: 125px; + height: 20px; + border-right: 1px solid #FFFFFF; + border-bottom: 1px solid #FFFFFF; + border-left: 1px solid #808080; + border-top: 1px solid #808080; + overflow: hidden; +} + +#svg_editor .layer_button { + width: 14px; + height: 14px; + padding: 1px; + border-left: 1px solid #FFFFFF; + border-top: 1px solid #FFFFFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + cursor: pointer; + float: left; + margin-right: 3px; +} + +#svg_editor .layer_button:last-child { + margin-right: 0; +} + +#svg_editor .layer_buttonpressed { + width: 14px; + height: 14px; + padding: 1px; + border-right: 1px solid #FFFFFF; + border-bottom: 1px solid #FFFFFF; + border-left: 1px solid #808080; + border-top: 1px solid #808080; + cursor: pointer; +} + +#svg_editor #layerlist { + margin: 1px; + padding: 0px; + width: 127px; + border-collapse: collapse; + border: 1px solid #808080; + background-color: #FFFFFF; +} + +#svg_editor #layerlist tr.layer { + background-color: #FFFFFF; + margin: 0px; + padding: 0px; +} +#svg_editor #layerlist tr.layersel { + border: 1px solid #808080; + background-color: #CCCCCC; +} + +#svg_editor #layerlist td.layervis { + width: 22px; + cursor:pointer; +} +#svg_editor #layerlist td.layerinvis { + background-image: none; + cursor:pointer; +} + +#svg_editor #layerlist td.layervis * { + display: block; +} + +#svg_editor #layerlist td.layerinvis * { + display: none; +} + +#svg_editor #layerlist td.layername { + cursor: pointer; +} + +#svg_editor #layerlist tr.layersel td.layername { + font-weight: bold; +} + +#svg_editor #selLayerLabel { + white-space: nowrap; +} + +#svg_editor #selLayerNames { + display: block; +} + +#svg_editor div.palette_item { + height: 16px; + width: 16px; + float: left; +} + +#svg_editor #main_button { + position: absolute; + top: 4px; + left: 4px; + z-index: 5; +} + + +#svg_editor #main_icon { + background: #E8E8E8; + position: relative; + top: -2px; + left: -2px; + padding: 1px 0 2px 1px; + width: 44px; + height: 30px; + border-left: 1px solid #FFF; + border-top: 1px solid #FFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; +} + +#svg_editor .tool_button:hover, +#svg_editor .push_button:hover, +#svg_editor .buttonup:hover, +#svg_editor .buttondown, +#svg_editor .tool_button_current, +#svg_editor .push_button_pressed +{ + border-left: 1px #fcd9ba solid !important; + border-top: 1px #fcd9ba solid !important; + border-right: 1px #e0a874 solid !important; + border-bottom: 1px #e0a874 solid !important; + background-color: #FFC !important; +} + +#svg_editor .tool_button_current, +#svg_editor .push_button_pressed, +#svg_editor .buttondown { + background-color: #f4e284 !important; + border-top: 1px solid #630 !important; + border-left: 1px solid #630 !important; +} + +#svg_editor #main_icon span { + position: absolute; + width: 100%; + height: 100%; + display: block; + z-index: 2; +} + +#svg_editor #main_menu { + z-index: 12; + background: #E8E8E8; + position: relative; + width: 230px; + padding: 5px; + -moz-box-shadow: #555 1px 1px 4px; + -webkit-box-shadow: #555 1px 1px 4px; + font-size: 1.1em; + display: none; + overflow: hidden; + border: 1px outset gray; + clear: both; +} + +#svg_editor #main_menu ul, +#svg_editor #main_menu li { + list-style: none; + margin: 0; + padding: 0; +} + +#svg_editor #main_menu li { +/* height: 35px;*/ + line-height: 22px; + padding-top: 7px; + padding-left: 7px; + margin: -5px; + overflow: auto; + cursor: default; +} + +#svg_editor #main_menu li:hover { + background: #FFC; +} + +#svg_editor #main_menu li > div { + float: left; + padding-right: 5px; +} + +#svg_editor #main_menu p { + margin-top: 5px; +} + +#svg_editor #logo img { + border: 0; + width: 32px; + height: 32px; +} + + + +#main_icon > div { + float: left; +} + +#svg_editor #main_button .dropdown { + padding-top: 28%; + margin-left: -1px; +} + + + +#svg_editor #tools_top { + position: absolute; + left: 50px; + right: 2px; + top: 2px; + height: 72px; + border-bottom: none; + overflow: auto; +} + +#svg_editor #tools_left { + position: absolute; + border-right: none; + width: 32px; + top: 75px; + left: 0; + padding-left: 2px; + background: #D0D0D0; /* Needed so flyout icons don't appear on the left */ + z-index: 4; +} + +#workarea.wireframe #svgcontent * { + fill: none; + stroke: #000; + stroke-width: 1px; + stroke-opacity: 1.0; + stroke-dasharray: 0; + opacity: 1; + pointer-events: stroke; + vector-effect: non-scaling-stroke; + filter: none; +} + +#workarea.wireframe #svgcontent text { + fill: #000; + stroke: none; +} + +#workarea.wireframe #canvasBackground > rect { + fill: #FFF !important; +} + +#tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) { + display: none; +} + +#svg_editor #multiselected_panel .selected_tool { + vertical-align: 12px; +} + +#cur_context_panel { + position: absolute; + top: 77px; + left: 40px; + right: 0; + line-height: 22px; + overflow: auto; + border: 1px solid #777; + border-bottom: none; + border-right: none; + padding-left: 5px; + font-size: 12px; +} + +#svg_editor #cur_context_panel a { + float: none; + text-decoration: none; +} + +#svg_editor #cur_context_panel a:hover { + text-decoration: underline; +} + +#svg_editor #tools_top > div, #tools_top { + line-height: 26px; +} + +#svg_editor div.toolset, +#svg_editor div.toolset > * { + float: left; +} + +#svg_editor div.toolset { + height: 34px; +} + +#svg_editor div.toolset label span { +/* outline: 1px solid red;*/ + padding-top: 3px; + display: inline-block; +} + +#tools_top > div > * { + float: left; + margin-right: 2px; +} + +#tools_top label { + margin-top: 0; + margin-left: 5px; +} + +#tools_top input { + margin-top: 5px; + height: 15px; +} + +#svg_editor #tools_left .tool_button, +#svg_editor #tools_left .tool_button_current { + position: relative; + z-index: 11; +} + +#svg_editor .flyout_arrow_horiz { + position: absolute; + bottom: -1px; + right: 0; + z-index: 10; +} + + +span.zoom_tool { + line-height: 26px; + padding: 3px; +} + +#zoom_panel { + margin-top: 5px; +} + +.dropdown { + position: relative; +} + +#svg_editor .dropdown button { + width: 15px; + height: 21px; + margin: 6px 0 0 1px; + padding: 0; + border-left: 1px solid #FFFFFF; + border-top: 1px solid #FFFFFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + background-color: #E8E8E8; +} + +.dropdown button.down { + border-left: 1px solid #808080; + border-top: 1px solid #808080; + border-right: 1px solid #FFFFFF; + border-bottom: 1px solid #FFFFFF; + background-color: #B0B0B0; +} + +.dropdown ul { + list-style: none; + position: absolute; + margin: 0; + padding: 0; + left: -80px; + top: 26px; + z-index: 4; + display: none; +} + +.dropup ul { + top: auto; + bottom: 26px; +} + +.dropdown li { + display: block; + width: 120px; + padding: 4px; + background: #E8E8E8; + border: 1px solid #B0B0B0; + margin: 0 0 -1px 0; + line-height: 16px; +} + +.dropdown li:hover { + background-color: #FFC; +} + +.dropdown li.special { + padding: 10px 4px; +} + +.dropdown li.special:hover { + background: #FFC; +} + +#font_family_dropdown-list li { + font-size: 1.4em; +} + +#font_family { + margin-left: 5px; + margin-right: 0; +} + + +#svg_editor .tool_button, +#svg_editor .push_button, +#svg_editor .tool_button_current, +#svg_editor .push_button_pressed +{ + height: 24px; + width: 24px; + margin: 2px; + padding: 2px; + border-left: 1px solid #FFF; + border-top: 1px solid #FFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + background-color: #E8E8E8; + cursor: pointer; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} + +#svg_editor #main_menu li#tool_open, #svg_editor #main_menu li#tool_import { + position: relative; + overflow: hidden; +} + +#tool_image { + overflow: hidden; +} + +#tool_open input, +#tool_import input, +#tool_image input { + position: absolute; + opacity: 0; + font-size: 10em; + top: -5px; + right: -5px; + margin: 0; + cursor: pointer; /* Sadly doesn't appear to have an effect */ +} + +#svg_editor .disabled { + opacity: 0.5; + cursor: default; +} + +#svg_editor .tool_sep { + width: 1px; + background: #888; + border-left: 1px outset #EEE; + margin: 2px 3px; + padding: 0; + height: 24px; + +} + +#svg_editor .icon_label { + float: left; + padding-top: 3px; + padding-right: 3px; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + height: 0; +} + +#svg_editor .width_label { + padding-right: 5px; +} + +#tool_bold, #tool_italic { + font: bold 2.1em/1.1em serif; + text-align: center; + padding-left: 2px; + position: relative; +} + +#text { + position: absolute; + left: -9999px; +} + +#tool_bold span, #tool_italic span { + position: absolute; + width: 100%; + height: 100%; + top: 0; left: 0; + background: #000; + opacity: 0; +} + +#tool_italic { + font-weight: normal; + font-style: italic; +} + +#url_notice { + padding-top: 4px; + display: none; +} + +#svg_editor #color_picker { + position: absolute; + display: none; + background: #E8E8E8; + height: 350px; + z-index: 5; +} + +#svg_editor .tools_flyout { + position: absolute; + display: none; + cursor: pointer; + width: 400px; + z-index: 1; +} + +#svg_editor .tools_flyout_v { + position: absolute; + display: none; + cursor: pointer; + width: 30px; +} + +#svg_editor .tools_flyout .tool_button { + float: left; + background-color: #E8E8E8; + border-left: 1px solid #FFFFFF; + border-top: 1px solid #FFFFFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + height: 28px; + width: 28px; +} + +#svg_editor #tools_bottom { + position: absolute; + left: 40px; + right: 0; + bottom: 0; + height: 64px; + overflow: visible; +} + +#svg_editor #tools_bottom_1 { + width: 115px; + float: left; +} + +#svg_editor #tools_bottom_2 { + width: 165px; + position: relative; + float: left; +} + +#tools_bottom input[type=text] { + width: 2.2em; +} + +#svg_editor #color_tools { + display: table; + margin-top: 1px; + border-spacing: 0 3px; + clip: rect(0,0,10px,0); +} + +.color_tool { + display: table-row; + overflow: hidden; + height: 26px; + padding: 0 4px; +} + +.color_tool > * { + display: table-cell; + background: #f0f0f0; + padding: 0 5px 0 0; + vertical-align: middle; +/* height: 25px;*/ +} + +#toggle_stroke_tools { + letter-spacing: -.2em; + padding-right: 8px; +} + +#toggle_stroke_tools:hover { + cursor: pointer; + background: #FFC; +} + +.stroke_tool { + display: none; + white-space: nowrap; +} + +#svg_editor .stroke_tool button { + margin-top: 3px; + background: #F0F0F0; +} + +#svg_editor .stroke_tool div div { + -moz-user-select: none; + -webkit-user-select: none; + width: 20px; + height: 20px; + margin: 1px 0; + padding: 1px; + border: 1px solid #DDD; +} + +#svg_editor .stroke_tool:hover div > * { + background-color: #FFC; +} + +#svg_editor .stroke_tool.down div div, +#svg_editor .stroke_tool.down button, +#tools_top .dropdown.down > * { + border: 1px inset gray; + background: #F4E284; +} + +.stroke_tool > div { + width: 42px; +} + +.stroke_tool > div > * { + float: left; +} + + +#tools_top .dropdown .icon_label { + border: 1px solid transparent; +/* margin-top: 3px;*/ + height: auto; +} + +#option_lists ul { + display: none; + position: absolute; + height: auto; + z-index: 3; + margin: 0; + list-style: none; + padding-left: 0; +} + +#option_lists .optcols2 { + width: 70px; + margin-left: -15px; +} + +#option_lists .optcols3 { + width: 90px; + margin-left: -31px; +} + +#option_lists .optcols4 { + width: 130px; + margin-left: -44px; +} + +#option_lists ul[class^=optcols] li { + float: left; +} + +#svg_editor ul li.current { + background-color: #F4E284; +} + +#svg_editor #option_lists ul li { + margin: 0; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; +} + +.color_tool > *:first-child { + -moz-border-radius-topleft: 4px; + -moz-border-radius-bottomleft: 4px; + -webkit-border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + padding-right: 0; +} + +.color_tool > *:last-child { + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; +} + +#svg_editor #tool_opacity { + position: absolute; + top: 4px; + right: 2px; + background: #f0f0f0; + height: 26px; + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + padding: 0 3px; +} + +#tools_bottom .dropdown button { + margin-top: 2px; +} + +#opacity_dropdown li { + width: 140px; +} + +#svg_editor #copyright { + text-align: right; + padding-right: .3em; +} + +#svg_source_editor { + display: none; +} + +#svg_source_editor #svg_source_overlay { + position: absolute; + top: 0px; + right: 0px; + left: 0px; + bottom: 0px; + background-color: black; + opacity: 0.6; + z-index: 5; +} + +#svg_source_editor #svg_source_container { + position: absolute; + top: 30px; + left: 30px; + right: 30px; + bottom: 30px; + background-color: #B0B0B0; + opacity: 1.0; + text-align: center; + border: 1px outset #777; + z-index: 6; +} + +#save_output_btns { + display: none; + text-align: left; +} + +#save_output_btns p { + margin: .5em 1.5em; + display: inline-block; +} + +#bg_blocks { + overflow: auto; + margin-left: 30px; +} + +#svg_docprops #svg_docprops_container, +#svg_prefs #svg_prefs_container { + position: absolute; + top: 50px; + padding: 10px; + background-color: #B0B0B0; + border: 1px outset #777; + opacity: 1.0; +/* width: 450px;*/ + font-family: Verdana, Helvetica, sans-serif; + font-size: .8em; + z-index: 20001; +} + +#svg_docprops .error { + border: 1px solid red; + padding: 3px; +} + +#svg_docprops #resolution { + max-width: 14em; +} + +#tool_docprops_back, +#tool_prefs_back { + margin-left: 1em; + overflow: auto; +} + +#svg_docprops_container #svg_docprops_docprops, +#svg_prefs #svg_docprops_prefs { + float: left; + width: 221px; + margin: 5px .7em; + overflow: hidden; +} + +#svg_prefs_container fieldset + fieldset { + float: right; +} + +#svg_docprops legend, +#svg_prefs legend { + max-width: 195px; +} + +#svg_docprops_docprops > legend, +#svg_prefs_container > fieldset > legend { + font-weight: bold; + font-size: 1.1em; +} + + +#svg_docprops_container fieldset, +#svg_prefs fieldset { + padding: 5px; + margin: 5px; + border: 1px solid #DDD; +} + +#svg_docprops_container label, +#svg_prefs_container label { + display: block; + margin: .5em; +} + +#svginfo_bg_note { + font-size: .9em; + font-style: italic; + color: #444; +} + +#canvas_title, #canvas_bg_url { + display: block; + width: 96%; +} + +#svg_source_editor #svg_source_textarea { + position: relative; + width: 95%; + top: 5px; + height: 250px; + padding: 5px; + font-size: 12px; +} + +#svg_source_editor #tool_source_back { + text-align: left; + padding-left: 20px; +} + +#svg_prefs_container div.color_block { + float: left; + margin: 2px; + padding: 20px; +} + +#change_background div.cur_background { + border: 2px solid blue; + padding: 18px; +} + +#background_img { + position: absolute; + top: 0; + left: 0; + text-align: left; +} + +#svg_docprops button, +#svg_prefs button { + margin-top: 0; + margin-bottom: 5px; +} + +#svg_docprops, +#svg_prefs { + display: none; +} + +#image_save_opts label { + font-size: .9em; +} + +#image_save_opts input { + margin-left: 0; +} + +#svg_docprops #svg_docprops_overlay, +#svg_prefs #svg_prefs_overlay { + position: absolute; + top: 0px; + right: 0px; + left: 0px; + bottom: 0px; + background-color: black; + opacity: 0.6; + z-index: 20000; +} + +#tool_prefs_option { + float: right; +} + +.toolbar_button button { + border:1px solid #dedede; + line-height:130%; + float: left; + background: #E8E8E8 none; + padding:5px 10px 5px 7px; /* Firefox */ + line-height:17px; /* Safari */ + margin: 5px 20px 0 0; + + border: 1px #808080 solid; + border-top-color: #FFF; + border-left-color: #FFF; + + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} + +.toolbar_button button:hover { + border: 1px #e0a874 solid; + border-top-color: #fcd9ba; + border-left-color: #fcd9ba; + background-color: #FFC; +} +.toolbar_button button:active { + background-color: #F4E284; + border-left: 1px solid #663300; + border-top: 1px solid #663300; +} + +.toolbar_button button .svg_icon { + margin:0 3px -3px 0 !important; + padding:0; + border:none; + width:16px; + height:16px; +} + +#dialog_box { + display: none; +} + +#dialog_box_overlay { + background: black; + opacity: .5; + height:100%; + left:0; + position:absolute; + top:0; + width:100%; + z-index: 6; +} + +#dialog_content { + height: 95px; + margin: 10px 10px 5px 10px; + background: #DDD; + overflow: auto; + text-align: left; + border: 1px solid #B0B0B0; +} + +#dialog_content.prompt { + height: 75px; +} + +#dialog_content p { + margin: 10px; + line-height: 1.3em; +} + +#dialog_container { + position: absolute; + font-family: Verdana; + text-align: center; + left: 50%; + top: 50%; + width: 300px; + margin-left: -150px; + height: 150px; + margin-top: -80px; + position:fixed; + z-index:50001; + background: #CCC; + border: 1px outset #777; + font-family:Verdana,Helvetica,sans-serif; + font-size:0.8em; +} + +#dialog_container, #dialog_content { + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} + +#dialog_buttons input[type=text] { + width: 90%; + display: block; + margin: 0 0 5px 11px; +} + +#dialog_buttons input[type=button] { + margin: 0 1em; +} + + +/* Slider +----------------------------------*/ +.ui-slider { position: relative; text-align: left; } +.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } +.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; } + +.ui-slider-horizontal { height: .8em; } +.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } +.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } +.ui-slider-horizontal .ui-slider-range-min { left: 0; } +.ui-slider-horizontal .ui-slider-range-max { right: 0; } + +.ui-slider-vertical { width: .8em; height: 100px; } +.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } +.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } +.ui-slider-vertical .ui-slider-range-min { bottom: 0; } +.ui-slider-vertical .ui-slider-range-max { top: 0; } + +.ui-slider { + border: 1px solid #B0B0B0; +} + +.ui-slider-handle { + background: #B0B0B0; + border: 1px solid #000; +} + +/* Necessary to keep the flyouts sized properly */ +#svg_editor .tools_flyout .tool_button, +#svg_editor .tools_flyout .tool_flyout { + padding: 2px; + width: 24px; + height: 24px; + margin: 0; + border-radius: 0px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; +} + +/* Generic context menu styles */ +.contextMenu { + position: absolute; + z-index: 99999; + border: solid 1px rgba(0,0,0,.33); + background: rgba(255,255,255,.95); + padding: 5px 0; + margin: 0px; + display: none; + font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif; + border-radius: 5px; + -moz-border-radius: 5px; + -moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3); + -webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3); + box-shadow: 2px 5px 10px rgba(0,0,0,.3); +} + +.contextMenu LI { + list-style: none; + padding: 0px; + margin: 0px; +} + +.contextMenu .shortcut { + width: 115px; + text-align:right; + float:right; +} + +.contextMenu A { + -moz-user-select: none; + -webkit-user-select: none; + color: #222; + text-decoration: none; + display: block; + line-height: 20px; + height: 20px; + background-position: 6px center; + background-repeat: no-repeat; + outline: none; + padding: 0px 15px 1px 20px; +} + +.contextMenu LI.hover A { + background-color: #2e5dea; + color: white; + cursor: default; +} + +.contextMenu LI.disabled A { + color: #999; +} + +.contextMenu LI.hover.disabled A { + background-color: transparent; +} + +.contextMenu LI.separator { + border-top: solid 1px #E3E3E3; + padding-top: 5px; + margin-top: 5px; +} + +/* + Adding Icons + + You can add icons to the context menu by adding + classes to the respective LI element(s) +*/ +/* + +.contextMenu LI.edit A { background-image: url(images/page_white_edit.png); } +.contextMenu LI.cut A { background-image: url(images/cut.png); } +.contextMenu LI.copy A { background-image: url(images/page_white_copy.png); } +.contextMenu LI.paste A { background-image: url(images/page_white_paste.png); } +.contextMenu LI.delete A { background-image: url(images/page_white_delete.png); } +.contextMenu LI.quit A { background-image: url(images/door.png); } +*/ diff --git a/editor/.svn/text-base/svg-editor.html.svn-base b/editor/.svn/text-base/svg-editor.html.svn-base new file mode 100644 index 0000000..8dce445 --- /dev/null +++ b/editor/.svn/text-base/svg-editor.html.svn-base @@ -0,0 +1,790 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +SVG-edit + + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    + +
    + +
    +
    + +
    +
    +

    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/.svn/text-base/svg-editor.js.svn-base b/editor/.svn/text-base/svg-editor.js.svn-base new file mode 100644 index 0000000..d720af3 --- /dev/null +++ b/editor/.svn/text-base/svg-editor.js.svn-base @@ -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$) "; + // 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/.svn/text-base/svg-editor.manifest.svn-base b/editor/.svn/text-base/svg-editor.manifest.svn-base new file mode 100644 index 0000000..b156374 --- /dev/null +++ b/editor/.svn/text-base/svg-editor.manifest.svn-base @@ -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/.svn/text-base/svgcanvas.js.svn-base b/editor/.svn/text-base/svgcanvas.js.svn-base new file mode 100644 index 0000000..f586479 --- /dev/null +++ b/editor/.svn/text-base/svgcanvas.js.svn-base @@ -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$)"; +}; + +// 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/.svn/text-base/svgtransformlist.js.svn-base b/editor/.svn/text-base/svgtransformlist.js.svn-base new file mode 100644 index 0000000..5c291ca --- /dev/null +++ b/editor/.svn/text-base/svgtransformlist.js.svn-base @@ -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/.svn/text-base/svgutils.js.svn-base b/editor/.svn/text-base/svgutils.js.svn-base new file mode 100644 index 0000000..17d24a1 --- /dev/null +++ b/editor/.svn/text-base/svgutils.js.svn-base @@ -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/.svn/text-base/units.js.svn-base b/editor/.svn/text-base/units.js.svn-base new file mode 100644 index 0000000..8be858c --- /dev/null +++ b/editor/.svn/text-base/units.js.svn-base @@ -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 diff --git a/editor/.svn/tmp/svgcanvas.js.tmp b/editor/.svn/tmp/svgcanvas.js.tmp new file mode 100644 index 0000000..f616f1c --- /dev/null +++ b/editor/.svn/tmp/svgcanvas.js.tmp @@ -0,0 +1,8789 @@ +/* + * 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": + var tspan = selected.querySelectorAll('tspan'); + var i = tspan.length + while(i--) { + var selX = convertToNum("x", selected.getAttribute('x')); + var tx = convertToNum("x", tspan[i].getAttribute('x')); + var selY = convertToNum("y", selected.getAttribute('y')); + var ty = convertToNum("y", tspan[i].getAttribute('y')); + var offset = new Object(); + if (!isNaN(selX) && !isNaN(tx) && selX!=0 && tx!=0 && changes.x) + offset.x = changes.x - (selX - tx); + if (!isNaN(selY) && !isNaN(ty) && selY!=0 && ty!=0 && changes.y) + offset.y = changes.y - (selY - ty); + if (offset.x || offset.y) + assignAttributes(tspan[i], offset, 1000, true); + } + finishUp(); + break; + 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": + case "tspan": + 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$)"; +}; + +// 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/.svn/tmp/svn-B2AVSt b/editor/.svn/tmp/svn-B2AVSt new file mode 100644 index 0000000..348bd79 --- /dev/null +++ b/editor/.svn/tmp/svn-B2AVSt @@ -0,0 +1,8788 @@ +/* + * 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, + 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": + var tspan = selected.querySelectorAll('tspan'); + var i = tspan.length + while(i--) { + var selX = convertToNum("x", selected.getAttribute('x')); + var tx = convertToNum("x", tspan[i].getAttribute('x')); + var selY = convertToNum("y", selected.getAttribute('y')); + var ty = convertToNum("y", tspan[i].getAttribute('y')); + var offset = new Object(); + if (!isNaN(selX) && !isNaN(tx) && selX!=0 && tx!=0 && changes.x) + offset.x = changes.x - (selX - tx); + if (!isNaN(selY) && !isNaN(ty) && selY!=0 && ty!=0 && changes.y) + offset.y = changes.y - (selY - ty); + if (offset.x || offset.y) + assignAttributes(tspan[i], offset, 1000, true); + } + finishUp(); + break; + 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": + case "tspan": + 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 + Windows: https://code.google.com/p/svg-edit/issues/detail?id=904 + // TODO: Remove this workaround (all isChromeWindows blocks) once vendor fixes the issue + var isChromeWindows = svgedit.browser.isChrome() && svgedit.browser.isWindows(); + if(isChromeWindows) { + 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(isChromeWindows) 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(isChromeWindows) 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 = $(svgcontent).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$)"; +}; + +// 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/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 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> +<meta http-equiv="X-UA-Compatible" content="chrome=1"/> +<link rel="icon" type="image/png" href="images/logo.png"/> +<link rel="stylesheet" href="svg-editor.css" type="text/css"/> +<script type="text/javascript" src="jquery.js"></script> +<title>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/.svn/all-wcprops b/editor/canvg/.svn/all-wcprops new file mode 100644 index 0000000..14054cd --- /dev/null +++ b/editor/canvg/.svn/all-wcprops @@ -0,0 +1,17 @@ +K 25 +svn:wc:ra_dav:version-url +V 37 +/svn/!svn/ver/2064/trunk/editor/canvg +END +rgbcolor.js +K 25 +svn:wc:ra_dav:version-url +V 49 +/svn/!svn/ver/1563/trunk/editor/canvg/rgbcolor.js +END +canvg.js +K 25 +svn:wc:ra_dav:version-url +V 46 +/svn/!svn/ver/2064/trunk/editor/canvg/canvg.js +END diff --git a/editor/canvg/.svn/entries b/editor/canvg/.svn/entries new file mode 100644 index 0000000..59ddad5 --- /dev/null +++ b/editor/canvg/.svn/entries @@ -0,0 +1,96 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/editor/canvg +http://svg-edit.googlecode.com/svn + + + +2012-03-20T04:57:23.167453Z +2064 +asyazwan@gmail.com + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +rgbcolor.js +file + + + + +2012-03-23T10:41:56.000000Z +cf0b2072b7361395d5537e266b8333c0 +2010-05-03T23:29:13.086772Z +1563 +rusnakp + + + + + + + + + + + + + + + + + + + + + +8753 + +canvg.js +file + + + + +2012-03-23T10:41:56.000000Z +feff6e5b21c3177f5a0291b4593229d1 +2012-03-20T04:57:23.167453Z +2064 +asyazwan@gmail.com + + + + + + + + + + + + + + + + + + + + + +88319 + diff --git a/editor/canvg/.svn/text-base/canvg.js.svn-base b/editor/canvg/.svn/text-base/canvg.js.svn-base new file mode 100644 index 0000000..7b24a38 --- /dev/null +++ b/editor/canvg/.svn/text-base/canvg.js.svn-base @@ -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/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/.svn/all-wcprops b/editor/contextmenu/.svn/all-wcprops new file mode 100644 index 0000000..ba58a6a --- /dev/null +++ b/editor/contextmenu/.svn/all-wcprops @@ -0,0 +1,11 @@ +K 25 +svn:wc:ra_dav:version-url +V 43 +/svn/!svn/ver/2065/trunk/editor/contextmenu +END +jquery.contextMenu.js +K 25 +svn:wc:ra_dav:version-url +V 65 +/svn/!svn/ver/2065/trunk/editor/contextmenu/jquery.contextMenu.js +END diff --git a/editor/contextmenu/.svn/entries b/editor/contextmenu/.svn/entries new file mode 100644 index 0000000..9ef2998 --- /dev/null +++ b/editor/contextmenu/.svn/entries @@ -0,0 +1,62 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/editor/contextmenu +http://svg-edit.googlecode.com/svn + + + +2012-03-20T08:58:24.542557Z +2065 +asyazwan@gmail.com + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +jquery.contextMenu.js +file + + + + +2012-03-23T10:42:00.000000Z +9dd37a7d16d1fbec5f7687de54f697ed +2012-03-20T08:58:24.542557Z +2065 +asyazwan@gmail.com +has-props + + + + + + + + + + + + + + + + + + + + +6314 + diff --git a/editor/contextmenu/.svn/prop-base/jquery.contextMenu.js.svn-base b/editor/contextmenu/.svn/prop-base/jquery.contextMenu.js.svn-base new file mode 100644 index 0000000..931becf --- /dev/null +++ b/editor/contextmenu/.svn/prop-base/jquery.contextMenu.js.svn-base @@ -0,0 +1,9 @@ +K 14 +svn:executable +V 1 +* +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/contextmenu/.svn/text-base/jquery.contextMenu.js.svn-base b/editor/contextmenu/.svn/text-base/jquery.contextMenu.js.svn-base new file mode 100644 index 0000000..7612601 --- /dev/null +++ b/editor/contextmenu/.svn/text-base/jquery.contextMenu.js.svn-base @@ -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/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/.svn/text-base/ext-arrows.js.svn-base b/editor/extensions/.svn/text-base/ext-arrows.js.svn-base new file mode 100644 index 0000000..4bb5cd2 --- /dev/null +++ b/editor/extensions/.svn/text-base/ext-arrows.js.svn-base @@ -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/.svn/text-base/ext-closepath.js.svn-base b/editor/extensions/.svn/text-base/ext-closepath.js.svn-base new file mode 100644 index 0000000..bf8e72c --- /dev/null +++ b/editor/extensions/.svn/text-base/ext-closepath.js.svn-base @@ -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/.svn/text-base/ext-connector.js.svn-base b/editor/extensions/.svn/text-base/ext-connector.js.svn-base new file mode 100644 index 0000000..3498c7f --- /dev/null +++ b/editor/extensions/.svn/text-base/ext-connector.js.svn-base @@ -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..610f1a4 --- /dev/null +++ b/editor/svg-editor.js @@ -0,0 +1,4888 @@ +/* + * 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'; + if(btn.class) { + cls += " " + btn.class; + } + 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; + } + else{ + this.blur() + } + + 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..40173f0 --- /dev/null +++ b/editor/svgcanvas.js @@ -0,0 +1,8789 @@ +/* + * 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": + var tspan = selected.querySelectorAll('tspan'); + var i = tspan.length + while(i--) { + var selX = convertToNum("x", selected.getAttribute('x')); + var tx = convertToNum("x", tspan[i].getAttribute('x')); + var selY = convertToNum("y", selected.getAttribute('y')); + var ty = convertToNum("y", tspan[i].getAttribute('y')); + var offset = new Object(); + if (!isNaN(selX) && !isNaN(tx) && selX!=0 && tx!=0 && changes.x) + offset.x = changes.x - (selX - tx); + if (!isNaN(selY) && !isNaN(ty) && selY!=0 && ty!=0 && changes.y) + offset.y = changes.y - (selY - ty); + if (offset.x || offset.y) + assignAttributes(tspan[i], offset, 1000, true); + } + finishUp(); + break; + 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": + case "tspan": + 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(evt, 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(evt, 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/.svn/all-wcprops b/editor/svgicons/.svn/all-wcprops new file mode 100644 index 0000000..8e18c6a --- /dev/null +++ b/editor/svgicons/.svn/all-wcprops @@ -0,0 +1,11 @@ +K 25 +svn:wc:ra_dav:version-url +V 40 +/svn/!svn/ver/2052/trunk/editor/svgicons +END +jquery.svgicons.js +K 25 +svn:wc:ra_dav:version-url +V 59 +/svn/!svn/ver/2052/trunk/editor/svgicons/jquery.svgicons.js +END diff --git a/editor/svgicons/.svn/entries b/editor/svgicons/.svn/entries new file mode 100644 index 0000000..98f9133 --- /dev/null +++ b/editor/svgicons/.svn/entries @@ -0,0 +1,62 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/editor/svgicons +http://svg-edit.googlecode.com/svn + + + +2012-02-23T02:48:21.539764Z +2052 +codedread + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +jquery.svgicons.js +file + + + + +2012-03-23T10:41:56.000000Z +bcb8ab066ee9a4ebec1e47236c7ea803 +2012-02-23T02:48:21.539764Z +2052 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +14258 + diff --git a/editor/svgicons/.svn/prop-base/jquery.svgicons.js.svn-base b/editor/svgicons/.svn/prop-base/jquery.svgicons.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/editor/svgicons/.svn/prop-base/jquery.svgicons.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/editor/svgicons/.svn/text-base/jquery.svgicons.js.svn-base b/editor/svgicons/.svn/text-base/jquery.svgicons.js.svn-base new file mode 100644 index 0000000..8a70509 --- /dev/null +++ b/editor/svgicons/.svn/text-base/jquery.svgicons.js.svn-base @@ -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/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..637fcd6 --- /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 || svgCanvas.getSelectedElems()[0].id == val); + } catch(e) {} + return result; + } else { + valid = true; + } + + return valid; +}; + + +})(); \ No newline at end of file diff --git a/examples/.svn/all-wcprops b/examples/.svn/all-wcprops new file mode 100644 index 0000000..effbf0e --- /dev/null +++ b/examples/.svn/all-wcprops @@ -0,0 +1,17 @@ +K 25 +svn:wc:ra_dav:version-url +V 33 +/svn/!svn/ver/1325/trunk/examples +END +mickey.svg +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1323/trunk/examples/mickey.svg +END +arbelos.svg +K 25 +svn:wc:ra_dav:version-url +V 45 +/svn/!svn/ver/1325/trunk/examples/arbelos.svg +END diff --git a/examples/.svn/entries b/examples/.svn/entries new file mode 100644 index 0000000..b4150c7 --- /dev/null +++ b/examples/.svn/entries @@ -0,0 +1,96 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/examples +http://svg-edit.googlecode.com/svn + + + +2010-02-02T18:19:56.238883Z +1325 +codedread + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +mickey.svg +file + + + + +2012-03-23T10:42:16.000000Z +8c265a85700ed868fbdd7d8a0b158c6a +2010-02-02T17:38:38.680591Z +1323 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +14641 + +arbelos.svg +file + + + + +2012-03-23T10:42:16.000000Z +35c6b6eb92bef4083606782c45d49804 +2010-02-02T18:19:56.238883Z +1325 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +24892 + diff --git a/examples/.svn/prop-base/arbelos.svg.svn-base b/examples/.svn/prop-base/arbelos.svg.svn-base new file mode 100644 index 0000000..91ca244 --- /dev/null +++ b/examples/.svn/prop-base/arbelos.svg.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 13 +image/svg+xml +END diff --git a/examples/.svn/prop-base/mickey.svg.svn-base b/examples/.svn/prop-base/mickey.svg.svn-base new file mode 100644 index 0000000..91ca244 --- /dev/null +++ b/examples/.svn/prop-base/mickey.svg.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 13 +image/svg+xml +END diff --git a/examples/.svn/text-base/arbelos.svg.svn-base b/examples/.svn/text-base/arbelos.svg.svn-base new file mode 100644 index 0000000..c9cc18a --- /dev/null +++ b/examples/.svn/text-base/arbelos.svg.svn-base @@ -0,0 +1,197 @@ +<?xml version="1.0" standalone="no"?> +<svg width="800" height="600" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> + <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> + <defs> + <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_10"> + <stop stop-opacity="1" stop-color="#ff00ff" offset="0"/> + <stop stop-opacity="0" stop-color="#ff00ff" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_11"> + <stop stop-opacity="1" stop-color="#7f007f" offset="0"/> + <stop stop-opacity="0" stop-color="#7f007f" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_17"> + <stop stop-opacity="1" stop-color="#cccccc" offset="0"/> + <stop stop-opacity="1" stop-color="#0b3535" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_26"> + <stop stop-opacity="1" stop-color="#bf005f" offset="0"/> + <stop stop-opacity="1" stop-color="#aaffff" offset="1"/> + </linearGradient> + <linearGradient y2="0.65234" x2="0.74609" y1="0" x1="0" id="svg_27"> + <stop stop-opacity="1" stop-color="#bf005f" offset="0"/> + <stop stop-opacity="1" stop-color="#aaffff" offset="1"/> + </linearGradient> + <linearGradient y2="0.51953" x2="0.61719" y1="0" x1="0" id="svg_28"> + <stop stop-opacity="1" stop-color="#bf005f" offset="0"/> + <stop stop-opacity="1" stop-color="#aaffff" offset="1"/> + </linearGradient> + <linearGradient y2="0.34766" x2="0.42188" y1="0" x1="0" id="svg_29"> + <stop stop-opacity="1" stop-color="#bf005f" offset="0"/> + <stop stop-opacity="1" stop-color="#aaffff" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_43"> + <stop stop-opacity="1" stop-color="#0000ff" offset="0"/> + <stop stop-opacity="1" stop-color="#333333" offset="1"/> + </linearGradient> + <linearGradient y2="0.94141" x2="0.42578" y1="0.17188" x1="0.80859" id="svg_31"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="1" stop-color="#626784" offset="1"/> + </linearGradient> + <linearGradient y2="0.95703" x2="0.98828" y1="0.38281" x1="0.46484" id="svg_38"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="1" stop-color="#626784" offset="1"/> + </linearGradient> + <linearGradient y2="0.03125" x2="0.98438" y1="0.90234" x1="0.11719" id="svg_39"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="1" stop-color="#626784" offset="1"/> + </linearGradient> + <linearGradient y2="0.125" x2="0.69922" y1="0.75781" x1="0.48828" id="svg_40"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="1" stop-color="#626784" offset="1"/> + </linearGradient> + <linearGradient y2="0.46094" x2="0.66016" y1="0.77734" x1="0.09766" id="svg_106"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="1" stop-color="#626784" offset="1"/> + </linearGradient> + <linearGradient y2="0.10156" x2="0.88672" y1="0.33984" x1="0.40625" id="svg_116"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="0.82" stop-color="#626784" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_125"> + <stop stop-opacity="1" stop-color="#060649" offset="0"/> + <stop stop-opacity="0.77" stop-color="#3b5b7a" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0.18359" x1="0.23438" id="svg_126"> + <stop stop-opacity="1" stop-color="#c7eaea" offset="0"/> + <stop stop-opacity="1" stop-color="#e5e5e5" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0.18359" x1="0.23438" id="svg_132"> + <stop stop-opacity="1" stop-color="#a1c6c6" offset="0"/> + <stop stop-opacity="1" stop-color="#e5e5e5" offset="1"/> + </linearGradient> + <linearGradient y2="0.85938" x2="0.22266" y1="0.07813" x1="0.875" id="svg_134"> + <stop stop-opacity="1" stop-color="#333333" offset="0"/> + <stop stop-opacity="1" stop-color="#5b5b93" offset="1"/> + </linearGradient> + <linearGradient y2="1" x2="1" y1="0.18359" x1="0.23438" id="svg_135"> + <stop stop-opacity="1" stop-color="#ffffff" offset="0"/> + <stop stop-opacity="1" stop-color="#e5e5e5" offset="1"/> + </linearGradient> + <linearGradient id="svg_58" x1="0.60938" y1="0.62891" x2="1" y2="0.01953"> + <stop offset="0" stop-color="#0b0b28" stop-opacity="1"/> + <stop offset="1" stop-color="#0b0b28" stop-opacity="0.5"/> + </linearGradient> + <linearGradient id="svg_60" x1="0.96094" y1="0" x2="0.60938" y2="0.29297"> + <stop offset="0" stop-color="#00ccff" stop-opacity="1"/> + <stop offset="1" stop-color="#00ccff" stop-opacity="0.42"/> + </linearGradient> + <linearGradient id="svg_71" x1="0.48047" y1="0.01172" x2="0.49609" y2="0.22656"> + <stop offset="0" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="1" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + <linearGradient id="svg_76" x1="0.46094" y1="0.75391" x2="0.46094" y2="0.37891"> + <stop offset="0" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="1" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + <linearGradient id="svg_80" x1="0.48828" y1="0.88672" x2="0.5" y2="0.00391"> + <stop offset="0" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="1" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + <linearGradient id="svg_83" x1="0" y1="0" x2="1" y2="1"> + <stop offset="0" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="1" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + <linearGradient id="svg_84" x1="0.48828" y1="0.97266" x2="0.54297" y2="0.28516"> + <stop offset="0" stop-color="#871187" stop-opacity="1"/> + <stop offset="1" stop-color="#871187" stop-opacity="0.46"/> + </linearGradient> + </defs> + <title>SVG-edit 2.4 Arbelos + + Layer 2 + + + + + + Layer 3 + + + + + + + Layer 4 + + + + Background + + + + + Arbelos + + + + + + + + + + + Manta Ray + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Text - Link + + + SVG-edit + SVG-edit + + + + + + SVG-edit + + 2.4 Arbelos + 2.4 Arbelos + 2.4 Arbelos + + + + + \ No newline at end of file diff --git a/examples/.svn/text-base/mickey.svg.svn-base b/examples/.svn/text-base/mickey.svg.svn-base new file mode 100644 index 0000000..72bcde5 --- /dev/null +++ b/examples/.svn/text-base/mickey.svg.svn-base @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SVG-edit + SVG-edit + + \ No newline at end of file diff --git a/examples/arbelos.svg b/examples/arbelos.svg new file mode 100644 index 0000000..c9cc18a --- /dev/null +++ b/examples/arbelos.svg @@ -0,0 +1,197 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SVG-edit 2.4 Arbelos + + Layer 2 + + + + + + Layer 3 + + + + + + + Layer 4 + + + + Background + + + + + Arbelos + + + + + + + + + + + Manta Ray + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Text - Link + + + SVG-edit + SVG-edit + + + + + + SVG-edit + + 2.4 Arbelos + 2.4 Arbelos + 2.4 Arbelos + + + + + \ No newline at end of file diff --git a/examples/mickey.svg b/examples/mickey.svg new file mode 100644 index 0000000..72bcde5 --- /dev/null +++ b/examples/mickey.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SVG-edit + SVG-edit + + \ No newline at end of file diff --git a/extras/.svn/all-wcprops b/extras/.svn/all-wcprops new file mode 100644 index 0000000..ff25ae1 --- /dev/null +++ b/extras/.svn/all-wcprops @@ -0,0 +1,23 @@ +K 25 +svn:wc:ra_dav:version-url +V 31 +/svn/!svn/ver/1561/trunk/extras +END +tojson.py +K 25 +svn:wc:ra_dav:version-url +V 41 +/svn/!svn/ver/1344/trunk/extras/tojson.py +END +topo.py +K 25 +svn:wc:ra_dav:version-url +V 39 +/svn/!svn/ver/1344/trunk/extras/topo.py +END +update-langs.py +K 25 +svn:wc:ra_dav:version-url +V 47 +/svn/!svn/ver/1561/trunk/extras/update-langs.py +END diff --git a/extras/.svn/entries b/extras/.svn/entries new file mode 100644 index 0000000..db833ba --- /dev/null +++ b/extras/.svn/entries @@ -0,0 +1,133 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/extras +http://svg-edit.googlecode.com/svn + + + +2010-05-03T20:12:41.333384Z +1561 +adeveria + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +server-save +dir + +tojson.py +file + + + + +2012-03-23T10:42:16.000000Z +46f107fa6d081bf99fff1f6669b8b27e +2010-02-05T15:40:31.944958Z +1344 +codedread + + + + + + + + + + + + + + + + + + + + + +1598 + +topo.py +file + + + + +2012-03-23T10:42:16.000000Z +ce3d83d91d50c84ebf20c3dd29735b19 +2010-02-05T15:40:31.944958Z +1344 +codedread + + + + + + + + + + + + + + + + + + + + + +1292 + +update-langs.py +file + + + + +2012-03-23T10:42:16.000000Z +5554bddfd9fb5736bce176e345ec7ceb +2010-05-03T20:12:41.333384Z +1561 +adeveria +has-props + + + + + + + + + + + + + + + + + + + + +2338 + diff --git a/extras/.svn/prop-base/update-langs.py.svn-base b/extras/.svn/prop-base/update-langs.py.svn-base new file mode 100644 index 0000000..869ac71 --- /dev/null +++ b/extras/.svn/prop-base/update-langs.py.svn-base @@ -0,0 +1,5 @@ +K 14 +svn:executable +V 1 +* +END diff --git a/extras/.svn/text-base/tojson.py.svn-base b/extras/.svn/text-base/tojson.py.svn-base new file mode 100644 index 0000000..5feea1d --- /dev/null +++ b/extras/.svn/text-base/tojson.py.svn-base @@ -0,0 +1,52 @@ +import sys, json, codecs +infile = codecs.open(sys.argv[1], "r", "utf-8") +outfile = codecs.open(sys.argv[1][:-3], "w", "utf-8") +indata = infile.readlines() +look = False +out = "[\n" +js = [] +jss = "" + +def readfrompos(pos): + global out + global js + + if (indata[pos].startswith("#, -x-svg-edit-title")) or (indata[pos].startswith("#, -x-svg-edit-textContent")): + out += '{' + out += '"id": ' + out += " ".join(indata[pos+1].split()[1:]) + ", " + out += '"' + line[15:].strip() + '": ' + out += " ".join(indata[pos+2].split()[1:]) + out += '}' + elif (indata[pos].startswith("#, -x-svg-edit-both")): + out += '{' + out += '"id": ' + out += " ".join(indata[pos+1].split()[1:]) + ", " + out += '"textContent": ' + out += '"' + " ".join(indata[pos+2].split()[1:]).split('|')[1] + ', ' + out += '"title": ' + out += " ".join(indata[pos+2].split()[1:]).split('|')[0] + '"' + out += '}' + elif (indata[pos].startswith("#, -x-svg-edit-js_strings")): + js.append((" ".join(indata[pos+1].split()[1:]), " ".join(indata[pos+2].split()[1:]))) + +for pos, line in enumerate(indata): + if (not look) and (line.startswith('# ---')): + look = True + marker = pos + elif (look) and (line.startswith('#, -x-svg-edit')): + readfrompos(pos) + +js.sort() + +for j in js: + jss += " %s: %s,\n" % (j[0], j[1]) + +out += '{\n "js_strings": {\n' +out += str(jss) +out += ' "": ""\n }' +out += "\n}" +out += "\n]" +out = out.replace('}{', '},\n{') + +outfile.write(out) \ No newline at end of file diff --git a/extras/.svn/text-base/topo.py.svn-base b/extras/.svn/text-base/topo.py.svn-base new file mode 100644 index 0000000..592cbee --- /dev/null +++ b/extras/.svn/text-base/topo.py.svn-base @@ -0,0 +1,39 @@ +import sys, json, codecs +infile = json.load(codecs.open(sys.argv[1], "r", "utf-8")) +outfile = codecs.open(sys.argv[1] + ".po", "w", "utf-8") +out = [] + +out.append("""# LANGUAGE FILE FOR SVG-EDIT, AUTOGENERATED BY TOPO.PY + +msgid "" +msgstr "" +"Content-Type: text/plain; charset=utf-8\\n" +"Content-Transfer-Encoding: 8bit\\n" + +# --- + +""") + +def printstr(flag, i, s): + out.append('\n') + if flag == '-x-svg-edit-both': + out.append("# Enter the title first, then the contents, seperated by a pipe char (|)\n") + out.append("#, " + flag + '\n') + out.append("msgid \"" + i + "\"" + '\n') + out.append("msgstr \"" + s.replace('\n', '\\n') + "\"" + '\n') + +for line in infile: + if line.has_key('title') and line.has_key('textContent'): + printstr('-x-svg-edit-both', line['id'], "|".join(((line['title'], line['textContent'])))) + elif line.has_key('title'): + printstr('-x-svg-edit-title', line['id'], line['title']) + elif line.has_key('textContent'): + printstr('-x-svg-edit-textContent', line['id'], line['textContent']) + elif line.has_key('js_strings'): + for i, s in line['js_strings'].items(): + printstr('-x-svg-edit-js_strings', i, s) + else: + pass # The line wasn't really a string + +outfile.writelines(out) +outfile.close() \ No newline at end of file diff --git a/extras/.svn/text-base/update-langs.py.svn-base b/extras/.svn/text-base/update-langs.py.svn-base new file mode 100644 index 0000000..0a33dae --- /dev/null +++ b/extras/.svn/text-base/update-langs.py.svn-base @@ -0,0 +1,88 @@ +#!/usr/bin/env python +# -*- coding: iso-8859-15 -*- +""" +This is a helper script for the svg-edit project, useful for managing +all the language files + +Licensed under the Apache 2 License as is the rest of the project +Requires Python 2.6 + +Copyright (c) 2010 Jeff Schiller +""" +import os +import json +from types import DictType + +def changeTooltipTarget(j): + """ + Moves the tooltip target for some tools + """ + tools = ['rect_width', 'rect_height'] + for row in j: + try: + id = row['id'] + if id in tools: + row['id'] = row['id'] + '_tool' + except KeyError: + pass + +def updateMainMenu(j): + """ + Converts title into textContent for items in the main menu + """ + tools = ['tool_clear', 'tool_open', 'tool_save', 'tool_docprops'] + for row in j: + try: + ids = row['id'] + if ids in tools: + row[u'textContent'] = row.pop('title') + except KeyError: + pass + +def ourPrettyPrint(j): + """ + Outputs a string representation of the JSON object passed in + formatted properly for our lang.XX.js files. + """ + s = '[' + os.linesep + js_strings = None + j.sort() + for row in j: + try: + ids = row['id'] + row_string = json.dumps(row, sort_keys=True, ensure_ascii=False) + s += row_string + ',' + os.linesep + except KeyError: + if type(row) is DictType: + js_strings = row + + s += json.dumps(js_strings, sort_keys=True, ensure_ascii=False, indent=1) + os.linesep + s += ']' + return s + +def processFile(filename): + """ + Loads the given lang.XX.js file, processes it and saves it + back to the file system + """ + in_string = open('../editor/locale/' + filename, 'r').read() + + try: + j = json.loads(in_string) + + # process the JSON object here + changeTooltipTarget(j) + + # now write it out back to the file + s = ourPrettyPrint(j).encode("UTF-8") + open('../editor/locale/' + filename, 'w').write(s) + + print "Updated " + filename + except ValueError: + print "ERROR! " + filename + " was not valid JSON, please fix it!" + +if __name__ == '__main__': + # get list of all lang files and process them + for file_name in os.listdir('../editor/locale/'): + if file_name[:4] == "lang": + processFile(file_name) diff --git a/extras/server-save/.svn/all-wcprops b/extras/server-save/.svn/all-wcprops new file mode 100644 index 0000000..e504810 --- /dev/null +++ b/extras/server-save/.svn/all-wcprops @@ -0,0 +1,23 @@ +K 25 +svn:wc:ra_dav:version-url +V 41 +/svn/!svn/ver/47/trunk/extras/server-save +END +svg-editor-save.php +K 25 +svn:wc:ra_dav:version-url +V 61 +/svn/!svn/ver/47/trunk/extras/server-save/svg-editor-save.php +END +svg-editor-save.js +K 25 +svn:wc:ra_dav:version-url +V 60 +/svn/!svn/ver/47/trunk/extras/server-save/svg-editor-save.js +END +README +K 25 +svn:wc:ra_dav:version-url +V 48 +/svn/!svn/ver/47/trunk/extras/server-save/README +END diff --git a/extras/server-save/.svn/entries b/extras/server-save/.svn/entries new file mode 100644 index 0000000..4c2237b --- /dev/null +++ b/extras/server-save/.svn/entries @@ -0,0 +1,130 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/extras/server-save +http://svg-edit.googlecode.com/svn + + + +2009-06-06T23:54:53.001804Z +47 +rusnakp + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +svg-editor-save.php +file + + + + +2012-03-23T10:42:16.000000Z +bf2631f243f3fde308ca1fd42ec2dae7 +2009-06-06T23:54:53.001804Z +47 +rusnakp + + + + + + + + + + + + + + + + + + + + + +183 + +svg-editor-save.js +file + + + + +2012-03-23T10:42:16.000000Z +b84786691c92c1952800421e9f26c30b +2009-06-06T23:54:53.001804Z +47 +rusnakp + + + + + + + + + + + + + + + + + + + + + +99 + +README +file + + + + +2012-03-23T10:42:16.000000Z +ee49fa706f2bc3bda81a507597add51e +2009-06-06T23:54:53.001804Z +47 +rusnakp + + + + + + + + + + + + + + + + + + + + + +248 + diff --git a/extras/server-save/.svn/text-base/README.svn-base b/extras/server-save/.svn/text-base/README.svn-base new file mode 100644 index 0000000..e94370b --- /dev/null +++ b/extras/server-save/.svn/text-base/README.svn-base @@ -0,0 +1,8 @@ +Usage: + +1) copy file svg-editor-save.php into the directory + +2) edit the end of the svgcanvas.js and change this.saveHandler method + into the method described in svg-editor-save.js + +3) now the drawings will be saved into the file named saved.svg diff --git a/extras/server-save/.svn/text-base/svg-editor-save.js.svn-base b/extras/server-save/.svn/text-base/svg-editor-save.js.svn-base new file mode 100644 index 0000000..ea6a089 --- /dev/null +++ b/extras/server-save/.svn/text-base/svg-editor-save.js.svn-base @@ -0,0 +1,3 @@ +this.saveHandler = function(svg) { + $.post("svg-editor-save.php", { svg_data: escape(svg) } ); +}); diff --git a/extras/server-save/.svn/text-base/svg-editor-save.php.svn-base b/extras/server-save/.svn/text-base/svg-editor-save.php.svn-base new file mode 100644 index 0000000..10617b9 --- /dev/null +++ b/extras/server-save/.svn/text-base/svg-editor-save.php.svn-base @@ -0,0 +1,8 @@ + diff --git a/extras/server-save/README b/extras/server-save/README new file mode 100644 index 0000000..e94370b --- /dev/null +++ b/extras/server-save/README @@ -0,0 +1,8 @@ +Usage: + +1) copy file svg-editor-save.php into the directory + +2) edit the end of the svgcanvas.js and change this.saveHandler method + into the method described in svg-editor-save.js + +3) now the drawings will be saved into the file named saved.svg diff --git a/extras/server-save/svg-editor-save.js b/extras/server-save/svg-editor-save.js new file mode 100644 index 0000000..ea6a089 --- /dev/null +++ b/extras/server-save/svg-editor-save.js @@ -0,0 +1,3 @@ +this.saveHandler = function(svg) { + $.post("svg-editor-save.php", { svg_data: escape(svg) } ); +}); diff --git a/extras/server-save/svg-editor-save.php b/extras/server-save/svg-editor-save.php new file mode 100644 index 0000000..10617b9 --- /dev/null +++ b/extras/server-save/svg-editor-save.php @@ -0,0 +1,8 @@ + diff --git a/extras/tojson.py b/extras/tojson.py new file mode 100644 index 0000000..5feea1d --- /dev/null +++ b/extras/tojson.py @@ -0,0 +1,52 @@ +import sys, json, codecs +infile = codecs.open(sys.argv[1], "r", "utf-8") +outfile = codecs.open(sys.argv[1][:-3], "w", "utf-8") +indata = infile.readlines() +look = False +out = "[\n" +js = [] +jss = "" + +def readfrompos(pos): + global out + global js + + if (indata[pos].startswith("#, -x-svg-edit-title")) or (indata[pos].startswith("#, -x-svg-edit-textContent")): + out += '{' + out += '"id": ' + out += " ".join(indata[pos+1].split()[1:]) + ", " + out += '"' + line[15:].strip() + '": ' + out += " ".join(indata[pos+2].split()[1:]) + out += '}' + elif (indata[pos].startswith("#, -x-svg-edit-both")): + out += '{' + out += '"id": ' + out += " ".join(indata[pos+1].split()[1:]) + ", " + out += '"textContent": ' + out += '"' + " ".join(indata[pos+2].split()[1:]).split('|')[1] + ', ' + out += '"title": ' + out += " ".join(indata[pos+2].split()[1:]).split('|')[0] + '"' + out += '}' + elif (indata[pos].startswith("#, -x-svg-edit-js_strings")): + js.append((" ".join(indata[pos+1].split()[1:]), " ".join(indata[pos+2].split()[1:]))) + +for pos, line in enumerate(indata): + if (not look) and (line.startswith('# ---')): + look = True + marker = pos + elif (look) and (line.startswith('#, -x-svg-edit')): + readfrompos(pos) + +js.sort() + +for j in js: + jss += " %s: %s,\n" % (j[0], j[1]) + +out += '{\n "js_strings": {\n' +out += str(jss) +out += ' "": ""\n }' +out += "\n}" +out += "\n]" +out = out.replace('}{', '},\n{') + +outfile.write(out) \ No newline at end of file diff --git a/extras/topo.py b/extras/topo.py new file mode 100644 index 0000000..592cbee --- /dev/null +++ b/extras/topo.py @@ -0,0 +1,39 @@ +import sys, json, codecs +infile = json.load(codecs.open(sys.argv[1], "r", "utf-8")) +outfile = codecs.open(sys.argv[1] + ".po", "w", "utf-8") +out = [] + +out.append("""# LANGUAGE FILE FOR SVG-EDIT, AUTOGENERATED BY TOPO.PY + +msgid "" +msgstr "" +"Content-Type: text/plain; charset=utf-8\\n" +"Content-Transfer-Encoding: 8bit\\n" + +# --- + +""") + +def printstr(flag, i, s): + out.append('\n') + if flag == '-x-svg-edit-both': + out.append("# Enter the title first, then the contents, seperated by a pipe char (|)\n") + out.append("#, " + flag + '\n') + out.append("msgid \"" + i + "\"" + '\n') + out.append("msgstr \"" + s.replace('\n', '\\n') + "\"" + '\n') + +for line in infile: + if line.has_key('title') and line.has_key('textContent'): + printstr('-x-svg-edit-both', line['id'], "|".join(((line['title'], line['textContent'])))) + elif line.has_key('title'): + printstr('-x-svg-edit-title', line['id'], line['title']) + elif line.has_key('textContent'): + printstr('-x-svg-edit-textContent', line['id'], line['textContent']) + elif line.has_key('js_strings'): + for i, s in line['js_strings'].items(): + printstr('-x-svg-edit-js_strings', i, s) + else: + pass # The line wasn't really a string + +outfile.writelines(out) +outfile.close() \ No newline at end of file diff --git a/extras/update-langs.py b/extras/update-langs.py new file mode 100755 index 0000000..0a33dae --- /dev/null +++ b/extras/update-langs.py @@ -0,0 +1,88 @@ +#!/usr/bin/env python +# -*- coding: iso-8859-15 -*- +""" +This is a helper script for the svg-edit project, useful for managing +all the language files + +Licensed under the Apache 2 License as is the rest of the project +Requires Python 2.6 + +Copyright (c) 2010 Jeff Schiller +""" +import os +import json +from types import DictType + +def changeTooltipTarget(j): + """ + Moves the tooltip target for some tools + """ + tools = ['rect_width', 'rect_height'] + for row in j: + try: + id = row['id'] + if id in tools: + row['id'] = row['id'] + '_tool' + except KeyError: + pass + +def updateMainMenu(j): + """ + Converts title into textContent for items in the main menu + """ + tools = ['tool_clear', 'tool_open', 'tool_save', 'tool_docprops'] + for row in j: + try: + ids = row['id'] + if ids in tools: + row[u'textContent'] = row.pop('title') + except KeyError: + pass + +def ourPrettyPrint(j): + """ + Outputs a string representation of the JSON object passed in + formatted properly for our lang.XX.js files. + """ + s = '[' + os.linesep + js_strings = None + j.sort() + for row in j: + try: + ids = row['id'] + row_string = json.dumps(row, sort_keys=True, ensure_ascii=False) + s += row_string + ',' + os.linesep + except KeyError: + if type(row) is DictType: + js_strings = row + + s += json.dumps(js_strings, sort_keys=True, ensure_ascii=False, indent=1) + os.linesep + s += ']' + return s + +def processFile(filename): + """ + Loads the given lang.XX.js file, processes it and saves it + back to the file system + """ + in_string = open('../editor/locale/' + filename, 'r').read() + + try: + j = json.loads(in_string) + + # process the JSON object here + changeTooltipTarget(j) + + # now write it out back to the file + s = ourPrettyPrint(j).encode("UTF-8") + open('../editor/locale/' + filename, 'w').write(s) + + print "Updated " + filename + except ValueError: + print "ERROR! " + filename + " was not valid JSON, please fix it!" + +if __name__ == '__main__': + # get list of all lang files and process them + for file_name in os.listdir('../editor/locale/'): + if file_name[:4] == "lang": + processFile(file_name) diff --git a/firefox-extension/.svn/all-wcprops b/firefox-extension/.svn/all-wcprops new file mode 100644 index 0000000..d8663b3 --- /dev/null +++ b/firefox-extension/.svn/all-wcprops @@ -0,0 +1,23 @@ +K 25 +svn:wc:ra_dav:version-url +V 42 +/svn/!svn/ver/1696/trunk/firefox-extension +END +install.rdf +K 25 +svn:wc:ra_dav:version-url +V 54 +/svn/!svn/ver/1696/trunk/firefox-extension/install.rdf +END +chrome.manifest +K 25 +svn:wc:ra_dav:version-url +V 57 +/svn/!svn/ver/563/trunk/firefox-extension/chrome.manifest +END +handlers.js +K 25 +svn:wc:ra_dav:version-url +V 53 +/svn/!svn/ver/563/trunk/firefox-extension/handlers.js +END diff --git a/firefox-extension/.svn/entries b/firefox-extension/.svn/entries new file mode 100644 index 0000000..b7e59e5 --- /dev/null +++ b/firefox-extension/.svn/entries @@ -0,0 +1,133 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/firefox-extension +http://svg-edit.googlecode.com/svn + + + +2010-09-01T09:20:05.695274Z +1696 +rusnakp + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +install.rdf +file + + + + +2012-03-23T10:42:16.000000Z +d344628f8142801a9cf273a3ea68666a +2010-09-01T09:20:05.695274Z +1696 +rusnakp + + + + + + + + + + + + + + + + + + + + + +722 + +chrome.manifest +file + + + + +2012-03-23T10:42:16.000000Z +feb7c778c99a981c62dd0190419e821d +2009-09-04T16:10:50.940707Z +563 +rusnakp + + + + + + + + + + + + + + + + + + + + + +118 + +content +dir + +handlers.js +file + + + + +2012-03-23T10:42:16.000000Z +653e3e6b97067e4a22aa74a491866256 +2009-09-04T16:10:50.940707Z +563 +rusnakp + + + + + + + + + + + + + + + + + + + + + +1788 + diff --git a/firefox-extension/.svn/text-base/chrome.manifest.svn-base b/firefox-extension/.svn/text-base/chrome.manifest.svn-base new file mode 100644 index 0000000..3e98b2d --- /dev/null +++ b/firefox-extension/.svn/text-base/chrome.manifest.svn-base @@ -0,0 +1,2 @@ +content svg-edit content/ +overlay chrome://browser/content/browser.xul chrome://svg-edit/content/svg-edit-overlay.xul diff --git a/firefox-extension/.svn/text-base/handlers.js.svn-base b/firefox-extension/.svn/text-base/handlers.js.svn-base new file mode 100644 index 0000000..1b20811 --- /dev/null +++ b/firefox-extension/.svn/text-base/handlers.js.svn-base @@ -0,0 +1,55 @@ +// Note: This JavaScript file must be included as the last script on the main HTML editor page to override the open/save handlers +$(function() { + if(!window.Components) return; + + function moz_file_picker(readflag) { + var fp = window.Components.classes["@mozilla.org/filepicker;1"]. + createInstance(Components.interfaces.nsIFilePicker); + if(readflag) + fp.init(window, "Pick a SVG file", fp.modeOpen); + else + fp.init(window, "Pick a SVG file", fp.modeSave); + fp.defaultExtension = "*.svg"; + fp.show(); + return fp.file; + } + + svgCanvas.setCustomHandlers({ + 'open':function() { + try { + netscape.security.PrivilegeManager. + enablePrivilege("UniversalXPConnect"); + var file = moz_file_picker(true); + if(!file) + return(null); + + var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream); + inputStream.init(file, 0x01, 00004, null); + var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream); + sInputStream.init(inputStream); + svgCanvas.setSvgString(sInputStream. + read(sInputStream.available())); + } catch(e) { + console.log("Exception while attempting to load" + e); + } + }, + 'save':function(svg, str) { + try { + var file = moz_file_picker(false); + if(!file) + return; + + if (!file.exists()) + file.create(0, 0664); + + var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream); + out.init(file, 0x20 | 0x02, 00004,null); + out.write(str, str.length); + out.flush(); + out.close(); + } catch(e) { + alert(e); + } + } + }); +}); diff --git a/firefox-extension/.svn/text-base/install.rdf.svn-base b/firefox-extension/.svn/text-base/install.rdf.svn-base new file mode 100644 index 0000000..781b80a --- /dev/null +++ b/firefox-extension/.svn/text-base/install.rdf.svn-base @@ -0,0 +1,21 @@ + + + + + + + svg-edit@googlegroups.com + 2.6 + 2 + + + {ec8030f7-c20a-464f-9b0e-13a3a9e97384} + 1.5 + 4.* + + + SVG-edit + + diff --git a/firefox-extension/chrome.manifest b/firefox-extension/chrome.manifest new file mode 100644 index 0000000..3e98b2d --- /dev/null +++ b/firefox-extension/chrome.manifest @@ -0,0 +1,2 @@ +content svg-edit content/ +overlay chrome://browser/content/browser.xul chrome://svg-edit/content/svg-edit-overlay.xul diff --git a/firefox-extension/content/.svn/all-wcprops b/firefox-extension/content/.svn/all-wcprops new file mode 100644 index 0000000..aaef052 --- /dev/null +++ b/firefox-extension/content/.svn/all-wcprops @@ -0,0 +1,23 @@ +K 25 +svn:wc:ra_dav:version-url +V 49 +/svn/!svn/ver/622/trunk/firefox-extension/content +END +svg-edit-overlay.css +K 25 +svn:wc:ra_dav:version-url +V 70 +/svn/!svn/ver/622/trunk/firefox-extension/content/svg-edit-overlay.css +END +svg-edit-overlay.xul +K 25 +svn:wc:ra_dav:version-url +V 70 +/svn/!svn/ver/622/trunk/firefox-extension/content/svg-edit-overlay.xul +END +svg-edit-overlay.js +K 25 +svn:wc:ra_dav:version-url +V 69 +/svn/!svn/ver/563/trunk/firefox-extension/content/svg-edit-overlay.js +END diff --git a/firefox-extension/content/.svn/entries b/firefox-extension/content/.svn/entries new file mode 100644 index 0000000..994c704 --- /dev/null +++ b/firefox-extension/content/.svn/entries @@ -0,0 +1,130 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/firefox-extension/content +http://svg-edit.googlecode.com/svn + + + +2009-09-10T19:13:40.639979Z +622 +narendra.sisodiya + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +svg-edit-overlay.css +file + + + + +2012-03-23T10:42:16.000000Z +be7e31382e4c069d96c9142b387a081f +2009-09-10T19:13:40.639979Z +622 +narendra.sisodiya + + + + + + + + + + + + + + + + + + + + + +608 + +svg-edit-overlay.xul +file + + + + +2012-03-23T10:42:16.000000Z +74f4cb1abc356e720de50a51ebb5c670 +2009-09-10T19:13:40.639979Z +622 +narendra.sisodiya + + + + + + + + + + + + + + + + + + + + + +816 + +svg-edit-overlay.js +file + + + + +2012-03-23T10:42:16.000000Z +a5be0341bc9a797fd4d8f41ab92e2d2b +2009-09-04T16:10:50.940707Z +563 +rusnakp + + + + + + + + + + + + + + + + + + + + + +185 + diff --git a/firefox-extension/content/.svn/text-base/svg-edit-overlay.css.svn-base b/firefox-extension/content/.svn/text-base/svg-edit-overlay.css.svn-base new file mode 100644 index 0000000..4b7e9b5 --- /dev/null +++ b/firefox-extension/content/.svn/text-base/svg-edit-overlay.css.svn-base @@ -0,0 +1,21 @@ +#svg-edit-statusbar-button { + list-style-image: url("chrome://svg-edit/content/editor/images/logo.png"); + display: -moz-box; + /*-moz-image-region: rect(16px, 16px, 32px, 0px);*/ + padding-left: 0px; + padding-right: 0px; + width: 16px; + height: 16px; + +} + +#svg-edit-statusbar-button[state="active"] { + list-style-image: url("chrome://svg-edit/content/editor/images/logo.png"); + -moz-image-region: rect(32px, 16px, 48px, 0px); +} + +#svg-edit-statusbar-button[state="error"] { + list-style-image: url("chrome://svg-edit/content/editor/images/logo.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + diff --git a/firefox-extension/content/.svn/text-base/svg-edit-overlay.js.svn-base b/firefox-extension/content/.svn/text-base/svg-edit-overlay.js.svn-base new file mode 100644 index 0000000..8d1600d --- /dev/null +++ b/firefox-extension/content/.svn/text-base/svg-edit-overlay.js.svn-base @@ -0,0 +1,4 @@ +function start_svg_edit() { + var url = "chrome://svg-edit/content/editor/svg-editor.html"; + window.openDialog(url, "SVG Editor", "width=1024,height=700,menubar=no,toolbar=no"); +} diff --git a/firefox-extension/content/.svn/text-base/svg-edit-overlay.xul.svn-base b/firefox-extension/content/.svn/text-base/svg-edit-overlay.xul.svn-base new file mode 100644 index 0000000..08fdd88 --- /dev/null +++ b/firefox-extension/content/.svn/text-base/svg-edit-overlay.xul.svn-base @@ -0,0 +1,25 @@ + + + + + + + + + + + + Failed to load for some reason. + + + diff --git a/opera-widget/.svn/text-base/style.css.svn-base b/opera-widget/.svn/text-base/style.css.svn-base new file mode 100644 index 0000000..b4e8ae6 --- /dev/null +++ b/opera-widget/.svn/text-base/style.css.svn-base @@ -0,0 +1,2 @@ +body { margin: 0px; padding: 0px; } +#container { width: 100%; height: 100%; border: none; } diff --git a/opera-widget/config.xml b/opera-widget/config.xml new file mode 100644 index 0000000..797aafb --- /dev/null +++ b/opera-widget/config.xml @@ -0,0 +1,17 @@ + + + SVG Edit + + A simple SVG Editor. + + 800 + 600 + editor/images/logo.svg + + SVG Edit + 2010-09 + + + + + diff --git a/opera-widget/handlers.js b/opera-widget/handlers.js new file mode 100644 index 0000000..bb1d138 --- /dev/null +++ b/opera-widget/handlers.js @@ -0,0 +1,62 @@ +// Note: This JavaScript file must be included as the last script on the main HTML editor page to override the open/save handlers +$(function() { + if(window.opera && window.opera.io && window.opera.io.filesystem) { + svgCanvas.setCustomHandlers({ + 'open':function() { + try { + window.opera.io.filesystem.browseForFile( + new Date().getTime(), /* mountpoint name */ + "", /* default location */ + function(file) { + try { + if (file) { + fstream = file.open(file, "r"); + var output = ""; + while (!fstream.eof) { + output += fstream.readLine(); + } + + svgCanvas.setSvgString(output); /* 'this' is bound to the filestream object here */ + } + } + catch(e) { + console.log("Reading file failed."); + } + }, + false, /* not persistent */ + false, /* no multiple selections */ + "*.svg" /* file extension filter */ + ); + } + catch(e) { + console.log("Open file failed."); + } + + }, + 'save':function(window, svg) { + try { + window.opera.io.filesystem.browseForSave( + new Date().getTime(), /* mountpoint name */ + "", /* default location */ + function(file) { + try { + if (file) { + var fstream = file.open(file, "w"); + fstream.write(svg, "UTF-8"); + fstream.close(); + } + } + catch(e) { + console.log("Write to file failed."); + } + }, + false /* not persistent */ + ); + } + catch(e) { + console.log("Save file failed."); + } + } + }); + } +}); \ No newline at end of file diff --git a/opera-widget/index.html b/opera-widget/index.html new file mode 100644 index 0000000..f439312 --- /dev/null +++ b/opera-widget/index.html @@ -0,0 +1,24 @@ + + + SVG Edit + + + + + + Failed to load for some reason. + + + diff --git a/opera-widget/style.css b/opera-widget/style.css new file mode 100644 index 0000000..b4e8ae6 --- /dev/null +++ b/opera-widget/style.css @@ -0,0 +1,2 @@ +body { margin: 0px; padding: 0px; } +#container { width: 100%; height: 100%; border: none; } diff --git a/screencasts/.svn/all-wcprops b/screencasts/.svn/all-wcprops new file mode 100644 index 0000000..a7c4f56 --- /dev/null +++ b/screencasts/.svn/all-wcprops @@ -0,0 +1,23 @@ +K 25 +svn:wc:ra_dav:version-url +V 36 +/svn/!svn/ver/1691/trunk/screencasts +END +svgedit-screencast-1.txt +K 25 +svn:wc:ra_dav:version-url +V 61 +/svn/!svn/ver/1545/trunk/screencasts/svgedit-screencast-1.txt +END +svgedit-screencast-2.txt +K 25 +svn:wc:ra_dav:version-url +V 61 +/svn/!svn/ver/1545/trunk/screencasts/svgedit-screencast-2.txt +END +svgedit-screencast-3.txt +K 25 +svn:wc:ra_dav:version-url +V 61 +/svn/!svn/ver/1545/trunk/screencasts/svgedit-screencast-3.txt +END diff --git a/screencasts/.svn/entries b/screencasts/.svn/entries new file mode 100644 index 0000000..f53e9d5 --- /dev/null +++ b/screencasts/.svn/entries @@ -0,0 +1,133 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/screencasts +http://svg-edit.googlecode.com/svn + + + +2010-08-31T08:23:53.254417Z +1691 +rusnakp + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +svgopen2010 +dir + +svgedit-screencast-1.txt +file + + + + +2012-03-23T10:42:16.000000Z +564df17c46e8e33ec7e332282d2f5682 +2010-04-26T02:47:00.281945Z +1545 +codedread + + + + + + + + + + + + + + + + + + + + + +3893 + +svgedit-screencast-2.txt +file + + + + +2012-03-23T10:42:16.000000Z +9ce56afd816ad51927581be44fcdfcae +2010-04-26T02:47:00.281945Z +1545 +codedread + + + + + + + + + + + + + + + + + + + + + +2870 + +svgedit-screencast-3.txt +file + + + + +2012-03-23T10:42:16.000000Z +f81e3805aa37e238fb5b9995c29b31a3 +2010-04-26T02:47:00.281945Z +1545 +codedread + + + + + + + + + + + + + + + + + + + + + +6045 + diff --git a/screencasts/.svn/text-base/svgedit-screencast-1.txt.svn-base b/screencasts/.svn/text-base/svgedit-screencast-1.txt.svn-base new file mode 100644 index 0000000..316c474 --- /dev/null +++ b/screencasts/.svn/text-base/svgedit-screencast-1.txt.svn-base @@ -0,0 +1,27 @@ +Hello, my name is Jeff Schiller and I'll be giving you a brief introduction to SVG-edit. In this video, I'll describe what SVG-edit is, what it can do and I'll demonstrate some of its features. + +SVG-edit is a new, open-source, lightweight vector graphics editor similar in nature to Adobe Illustrator or Inkscape. But what's exciting about SVG-edit is that it runs directly in the browser and is powered only by open web technologies such as HTML, CSS, JavaScript and SVG. SVG-edit runs in any modern browser including Firefox, Opera, Safari and Chrome. + +So here is SVG-edit. What we're looking at is a small collection of tools, a color palette at the bottom and a white canvas on which you can draw your masterpiece. We'll see that drawing simple shapes is as simple as clicking the tool you want, I'll choose a simple rectangle here, and then dragging and lifting on the canvas. + +We can draw many types of shapes: rectangles, circles [draw one large one for sun], ellipses [draw two small ones], lines [draw three for sun radiation], or even freehand drawing [draw a smile]. + +If we want to move the elements around, we click on the Select Tool and then drag the element to the correct position. We can click to select one shape or we can drag on the canvas to select multiple shapes. We can use the resizing grips to change the size of the element to our hearts content. [arrange sun, beams, eyes, rectangle floor, and text] + +If we want to change the interior color of a particular shape, we first select the shape using the Select Tool, and then either click on a palette box or we can click on the Fill Paint box and choose the color we want from the standard picker. We can also set the opacity or alpha of the paint. + +Changing the border color of the shape can be done in a similar manner by using the color picker for the Stroke. We can also shift-click on the palette to change the stroke color or to clear the Stroke color. We can also change the thickness of the stroke or the dash-style of the stroke using controls near the bottom of the window. + +A simple Text tool is also included [set stroke to None, set fill to Red, then create a text element that says "Vector Graphics are powerful"] + +I'd like to talk a bit about the tool panel near the top of the window. Apart from some standard buttons on the left, which I'll go over in a minute, the rest of the panel is dedicated to context-sensitive tools. This means that you only see controls on this toolbar for the tool and element you have selected. For instance, when I select a Text element, I see controls to change the text contents, font family, font size and whether the text should be bold or italic. If I select a rectangle, I see controls to change the rectangle's position, size and whether the rectangle should have rounded corners. + +You may have noticed that some buttons were available in both cases. These controls manipulate the selected element. For instance, you can delete an element or move it to the top of the stack. + +The final thing I'd like to talk about is the controls on the left. These controls are always present. There are the standard Undo/Redo buttons. And there are the standard New Document or Save Document buttons. Clicking New will wipe out all existing work. Clicking Save will open a new tab in the browser containing your document. You can then save this document to your desktop, publish it to a website or whatever. + +One final thing to mention: because SVG-edit is a web application, it's quite trivial to embed the editor in a web page using nothing more than an HTML iframe element. Here we see an entry on my blog in which I've done this very thing. + +SVG-edit is still in the beginning stages of development, there are a lot of features missing, but I hope this video has given you a sense of SVG-edit's capabilities and its ease of use. + +Thanks for watching! \ No newline at end of file diff --git a/screencasts/.svn/text-base/svgedit-screencast-2.txt.svn-base b/screencasts/.svn/text-base/svgedit-screencast-2.txt.svn-base new file mode 100644 index 0000000..251c443 --- /dev/null +++ b/screencasts/.svn/text-base/svgedit-screencast-2.txt.svn-base @@ -0,0 +1,23 @@ +Hi, this is Jeff Schiller and I'll be describing the new features in the latest release of SVG-edit, version 2.3. + +For those of you who didn't watch the first screencast, SVG-edit is an open source vector graphics editor that works in any modern browser that natively supports SVG. This includes Firefox, Opera, Safari, and Chrome. + +The latest release of SVG-edit sports more than just a new logo, this release brings some powerful new features. Features that you would expect of a first-class vector editor on your desktop. So let's launch the 2.3 Demo [click] + +Probably the most significant new capability that SVG-edit brings is the ability to actually save and reload your work. SVG-edit now comes with a source editor [click on editor], which means you can save your SVG files to your hard disk and then copy and paste them back into SVG-edit and continue your work. You can also fine-tune the source of your drawing if there's something you want to do that isn't yet supported by the editor [add Jeff Schiller to comment and delete -->, show dialog]. + +Another important addition in 2.3 is the ability to construct arbitrary polygons or connected line segments. Once the shape is complete, click on the first point to close the shape or any other point if you want to leave it open. Polys can be dragged and resized just like any other shape. Click the shape again to edit the position of the points. [draw an arrow and position the points] + +Rotation is now supported on shapes. There are a variety of ways to do this: by drag-rotating the handle, by holding shift and pressing the left/right arrow keys or by adjusting the spinner control at the top. [rotate the arrow] + +The final major feature in SVG-edit 2.3 is the ability to pick linear gradients as fill/stroke paints instead of just solid colors. The color picker now has two tabs, one for solid colors and one for gradients. You choose the position of the begin and end stops and the color/opacity of each stop. [set fill on the black ellipse to a vert gradient from white to transparent] + +There are also several minor features worthy of note: + +Elements can now be copy-pasted using the Clone Tool. Select any number of elements and click Clone (or press C) to get the copied elements. + +If you want fine-grained element navigation, you can use the keyboard shortcuts Shift-O and Shift-P to cycle forward or backward through elements on the canvas. + +Compared to desktop vector graphics editors, SVG-edit still has a long ways to go, but already pretty sophisticated artwork can be achieved [open mickey.svg]. It's also important to remember that SVG-edit runs directly in the browser, with no plugins required. This means zero install hassle for users. You don't even need a bleeding edge browser, any SVG-capable browser released for the last few years will just work. + +Thanks for watching. diff --git a/screencasts/.svn/text-base/svgedit-screencast-3.txt.svn-base b/screencasts/.svn/text-base/svgedit-screencast-3.txt.svn-base new file mode 100644 index 0000000..88c98c1 --- /dev/null +++ b/screencasts/.svn/text-base/svgedit-screencast-3.txt.svn-base @@ -0,0 +1,50 @@ +SVG-edit 2.4 +------------ + +Hi, this is Jeff Schiller and this is part one of two videos in which I'll be describing the new features in the latest release of SVG-edit 2.4. + +First, some background: SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG. This includes Firefox, Opera, Safari and Chrome. SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed. + +So Version 2.4, code-named Arbelos, is a significant improvement over the previous release: SVG-edit has now evolved from a proof-of-concept demo into a full-featured application. + +In this video I'll talk about the new path tool and the concept of zooming, I'll also cover some of the improvements to the user interface. + +First up is the new path tool. In SVG-edit 2.3, the user had the ability to create a connected series of line segments and polygons [Draw a polyline]. In 2.4, the Poly Tool has evolved into a general purpose Path tool that draw straight lines or curves. To change a line segment into a curve, double-click on the starting point of that segment. Users can also manipulate the look of the curve by moving control points. Curves can be configured to be symmetrical by a push-button in the context panel. As you can see, when I change the position of a control point, the opposite control point also moves. The user also has the ability to add/delete segments to an existing path element. One final note on paths: most graphical elements (rectangles, ellipses, etc) can now be converted into paths for finer editing. This conversion is a one-way process, though it can be undone. + +So next I'm going to talk about zooming. In 2.4, it is now possible to zoom in and out of a graphic. Zooming can be achieved in a variety of ways: Using the zoom control at the bottom left, you can type in a zoom percentage, use the spinner or pick a zoom level from the popup. Also included in the popup are things like "Fit to selection", which can be quite handy. Zooming is also possible via the Zoom tool on the left. Select it, then drag the area you wish to zoom in on. A final option is to just use the mousewheel to zoom the canvas quickly around the mouse pointer. + +From a usability perspective, we've created a Document Properties dialog, available by clicking on the button in the top panel. This dialog box serves as housing for image and editor properties that are seldom accessed, but still important. + +In terms of image properties: + + * Give the image a title + * Change the canvas size, or pick one of several options + (* You can choose to have all local raster images referenced via URL or embedded inline as a data: URL. This will make your SVG image larger, but self-contained and thus, more portable.) + +In terms of editor properties: + + * SVG-edit's entire user interface (tooltips, labels) is fully localizable, and SVG-edit has now been translated into 8 languages. If you would like to contribute translation for a language, please contact us on the mailing list. + * Another nice feature is the ability to set the icon size of the editor, which can help with adapting SVG-edit to different environments (mobile devices, smaller netbooks, widescreen displays). + (* One final editor preference that can be changed is the canvas' colour. For most situations, a white canvas might be fine for creating your graphic, but if you are trying to draw an image with a lot of white in it, you might find this option useful.) + +So that's it for this video. In the next video I'll talk about grouping, layers and a few other features of SVG-edit 2.4. + + +-------------------- + +Hi, this is Jeff Schiller and this is the second of two videos describing the new features in the latest release of SVG-edit 2.4, code-named Arbelos. + +If you missed the first video, SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG. This includes Firefox, Opera, Safari and Chrome. SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed. + +In the first video I gave an overview of the Path tool, Zooming and the new Document Properties dialog. In this video I'll talk about grouping, layers and a couple other features that round out the release. + +So first is grouping. In SVG-edit 2.3 one could draw graphical primitives such as ellipses, rectangles, lines and polygons - and those elements could be moved, resized, and rotated. In 2.4 we've added the ability to arrange any number of elements together into a group. Groups behave just like other element types: they can be moved, resized and rotated - and they can be added to larger groups to create even more complex objects. You can copy/delete groups just like any other element. Ungrouping a group allows you to manipulate the elements individually again. + +The next thing I'll talk about is Layers. The Layers panel lies tucked to the side but can be clicked or dragged open at any time. Layers work very much like they do in other drawing programs: you can create new layers, rename them, change the order and delete them. Elements not on the current layer are not selectable, so it's an excellent way to separate elements in your drawing so that you can work on them without interfering with other parts of the drawing. If you want to move elements between layers, select them, then select the layer you want to move them to. + +There are a couple of other minor features that round out SVG-edit 2.4: + * It is now possible to embed raster images (via URL) into the canvas using the Image tool on the left + * It is also possible to keep the ratio of any element fixed when resizing by holding down the shift key. + * Finally, if the canvas is starting to become obscured, you can turn on 'wireframe mode' which shows the outline of all shapes in your drawing, but none of the fill or stroke properties. + +There are several minor features that I didn't have time to talk about, but feel free to browse to the project page and try out the demo. Thanks for your time. \ No newline at end of file diff --git a/screencasts/svgedit-screencast-1.txt b/screencasts/svgedit-screencast-1.txt new file mode 100644 index 0000000..316c474 --- /dev/null +++ b/screencasts/svgedit-screencast-1.txt @@ -0,0 +1,27 @@ +Hello, my name is Jeff Schiller and I'll be giving you a brief introduction to SVG-edit. In this video, I'll describe what SVG-edit is, what it can do and I'll demonstrate some of its features. + +SVG-edit is a new, open-source, lightweight vector graphics editor similar in nature to Adobe Illustrator or Inkscape. But what's exciting about SVG-edit is that it runs directly in the browser and is powered only by open web technologies such as HTML, CSS, JavaScript and SVG. SVG-edit runs in any modern browser including Firefox, Opera, Safari and Chrome. + +So here is SVG-edit. What we're looking at is a small collection of tools, a color palette at the bottom and a white canvas on which you can draw your masterpiece. We'll see that drawing simple shapes is as simple as clicking the tool you want, I'll choose a simple rectangle here, and then dragging and lifting on the canvas. + +We can draw many types of shapes: rectangles, circles [draw one large one for sun], ellipses [draw two small ones], lines [draw three for sun radiation], or even freehand drawing [draw a smile]. + +If we want to move the elements around, we click on the Select Tool and then drag the element to the correct position. We can click to select one shape or we can drag on the canvas to select multiple shapes. We can use the resizing grips to change the size of the element to our hearts content. [arrange sun, beams, eyes, rectangle floor, and text] + +If we want to change the interior color of a particular shape, we first select the shape using the Select Tool, and then either click on a palette box or we can click on the Fill Paint box and choose the color we want from the standard picker. We can also set the opacity or alpha of the paint. + +Changing the border color of the shape can be done in a similar manner by using the color picker for the Stroke. We can also shift-click on the palette to change the stroke color or to clear the Stroke color. We can also change the thickness of the stroke or the dash-style of the stroke using controls near the bottom of the window. + +A simple Text tool is also included [set stroke to None, set fill to Red, then create a text element that says "Vector Graphics are powerful"] + +I'd like to talk a bit about the tool panel near the top of the window. Apart from some standard buttons on the left, which I'll go over in a minute, the rest of the panel is dedicated to context-sensitive tools. This means that you only see controls on this toolbar for the tool and element you have selected. For instance, when I select a Text element, I see controls to change the text contents, font family, font size and whether the text should be bold or italic. If I select a rectangle, I see controls to change the rectangle's position, size and whether the rectangle should have rounded corners. + +You may have noticed that some buttons were available in both cases. These controls manipulate the selected element. For instance, you can delete an element or move it to the top of the stack. + +The final thing I'd like to talk about is the controls on the left. These controls are always present. There are the standard Undo/Redo buttons. And there are the standard New Document or Save Document buttons. Clicking New will wipe out all existing work. Clicking Save will open a new tab in the browser containing your document. You can then save this document to your desktop, publish it to a website or whatever. + +One final thing to mention: because SVG-edit is a web application, it's quite trivial to embed the editor in a web page using nothing more than an HTML iframe element. Here we see an entry on my blog in which I've done this very thing. + +SVG-edit is still in the beginning stages of development, there are a lot of features missing, but I hope this video has given you a sense of SVG-edit's capabilities and its ease of use. + +Thanks for watching! \ No newline at end of file diff --git a/screencasts/svgedit-screencast-2.txt b/screencasts/svgedit-screencast-2.txt new file mode 100644 index 0000000..251c443 --- /dev/null +++ b/screencasts/svgedit-screencast-2.txt @@ -0,0 +1,23 @@ +Hi, this is Jeff Schiller and I'll be describing the new features in the latest release of SVG-edit, version 2.3. + +For those of you who didn't watch the first screencast, SVG-edit is an open source vector graphics editor that works in any modern browser that natively supports SVG. This includes Firefox, Opera, Safari, and Chrome. + +The latest release of SVG-edit sports more than just a new logo, this release brings some powerful new features. Features that you would expect of a first-class vector editor on your desktop. So let's launch the 2.3 Demo [click] + +Probably the most significant new capability that SVG-edit brings is the ability to actually save and reload your work. SVG-edit now comes with a source editor [click on editor], which means you can save your SVG files to your hard disk and then copy and paste them back into SVG-edit and continue your work. You can also fine-tune the source of your drawing if there's something you want to do that isn't yet supported by the editor [add Jeff Schiller to comment and delete -->, show dialog]. + +Another important addition in 2.3 is the ability to construct arbitrary polygons or connected line segments. Once the shape is complete, click on the first point to close the shape or any other point if you want to leave it open. Polys can be dragged and resized just like any other shape. Click the shape again to edit the position of the points. [draw an arrow and position the points] + +Rotation is now supported on shapes. There are a variety of ways to do this: by drag-rotating the handle, by holding shift and pressing the left/right arrow keys or by adjusting the spinner control at the top. [rotate the arrow] + +The final major feature in SVG-edit 2.3 is the ability to pick linear gradients as fill/stroke paints instead of just solid colors. The color picker now has two tabs, one for solid colors and one for gradients. You choose the position of the begin and end stops and the color/opacity of each stop. [set fill on the black ellipse to a vert gradient from white to transparent] + +There are also several minor features worthy of note: + +Elements can now be copy-pasted using the Clone Tool. Select any number of elements and click Clone (or press C) to get the copied elements. + +If you want fine-grained element navigation, you can use the keyboard shortcuts Shift-O and Shift-P to cycle forward or backward through elements on the canvas. + +Compared to desktop vector graphics editors, SVG-edit still has a long ways to go, but already pretty sophisticated artwork can be achieved [open mickey.svg]. It's also important to remember that SVG-edit runs directly in the browser, with no plugins required. This means zero install hassle for users. You don't even need a bleeding edge browser, any SVG-capable browser released for the last few years will just work. + +Thanks for watching. diff --git a/screencasts/svgedit-screencast-3.txt b/screencasts/svgedit-screencast-3.txt new file mode 100644 index 0000000..88c98c1 --- /dev/null +++ b/screencasts/svgedit-screencast-3.txt @@ -0,0 +1,50 @@ +SVG-edit 2.4 +------------ + +Hi, this is Jeff Schiller and this is part one of two videos in which I'll be describing the new features in the latest release of SVG-edit 2.4. + +First, some background: SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG. This includes Firefox, Opera, Safari and Chrome. SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed. + +So Version 2.4, code-named Arbelos, is a significant improvement over the previous release: SVG-edit has now evolved from a proof-of-concept demo into a full-featured application. + +In this video I'll talk about the new path tool and the concept of zooming, I'll also cover some of the improvements to the user interface. + +First up is the new path tool. In SVG-edit 2.3, the user had the ability to create a connected series of line segments and polygons [Draw a polyline]. In 2.4, the Poly Tool has evolved into a general purpose Path tool that draw straight lines or curves. To change a line segment into a curve, double-click on the starting point of that segment. Users can also manipulate the look of the curve by moving control points. Curves can be configured to be symmetrical by a push-button in the context panel. As you can see, when I change the position of a control point, the opposite control point also moves. The user also has the ability to add/delete segments to an existing path element. One final note on paths: most graphical elements (rectangles, ellipses, etc) can now be converted into paths for finer editing. This conversion is a one-way process, though it can be undone. + +So next I'm going to talk about zooming. In 2.4, it is now possible to zoom in and out of a graphic. Zooming can be achieved in a variety of ways: Using the zoom control at the bottom left, you can type in a zoom percentage, use the spinner or pick a zoom level from the popup. Also included in the popup are things like "Fit to selection", which can be quite handy. Zooming is also possible via the Zoom tool on the left. Select it, then drag the area you wish to zoom in on. A final option is to just use the mousewheel to zoom the canvas quickly around the mouse pointer. + +From a usability perspective, we've created a Document Properties dialog, available by clicking on the button in the top panel. This dialog box serves as housing for image and editor properties that are seldom accessed, but still important. + +In terms of image properties: + + * Give the image a title + * Change the canvas size, or pick one of several options + (* You can choose to have all local raster images referenced via URL or embedded inline as a data: URL. This will make your SVG image larger, but self-contained and thus, more portable.) + +In terms of editor properties: + + * SVG-edit's entire user interface (tooltips, labels) is fully localizable, and SVG-edit has now been translated into 8 languages. If you would like to contribute translation for a language, please contact us on the mailing list. + * Another nice feature is the ability to set the icon size of the editor, which can help with adapting SVG-edit to different environments (mobile devices, smaller netbooks, widescreen displays). + (* One final editor preference that can be changed is the canvas' colour. For most situations, a white canvas might be fine for creating your graphic, but if you are trying to draw an image with a lot of white in it, you might find this option useful.) + +So that's it for this video. In the next video I'll talk about grouping, layers and a few other features of SVG-edit 2.4. + + +-------------------- + +Hi, this is Jeff Schiller and this is the second of two videos describing the new features in the latest release of SVG-edit 2.4, code-named Arbelos. + +If you missed the first video, SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG. This includes Firefox, Opera, Safari and Chrome. SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed. + +In the first video I gave an overview of the Path tool, Zooming and the new Document Properties dialog. In this video I'll talk about grouping, layers and a couple other features that round out the release. + +So first is grouping. In SVG-edit 2.3 one could draw graphical primitives such as ellipses, rectangles, lines and polygons - and those elements could be moved, resized, and rotated. In 2.4 we've added the ability to arrange any number of elements together into a group. Groups behave just like other element types: they can be moved, resized and rotated - and they can be added to larger groups to create even more complex objects. You can copy/delete groups just like any other element. Ungrouping a group allows you to manipulate the elements individually again. + +The next thing I'll talk about is Layers. The Layers panel lies tucked to the side but can be clicked or dragged open at any time. Layers work very much like they do in other drawing programs: you can create new layers, rename them, change the order and delete them. Elements not on the current layer are not selectable, so it's an excellent way to separate elements in your drawing so that you can work on them without interfering with other parts of the drawing. If you want to move elements between layers, select them, then select the layer you want to move them to. + +There are a couple of other minor features that round out SVG-edit 2.4: + * It is now possible to embed raster images (via URL) into the canvas using the Image tool on the left + * It is also possible to keep the ratio of any element fixed when resizing by holding down the shift key. + * Finally, if the canvas is starting to become obscured, you can turn on 'wireframe mode' which shows the outline of all shapes in your drawing, but none of the fill or stroke properties. + +There are several minor features that I didn't have time to talk about, but feel free to browse to the project page and try out the demo. Thanks for your time. \ No newline at end of file diff --git a/screencasts/svgopen2010/.svn/all-wcprops b/screencasts/svgopen2010/.svn/all-wcprops new file mode 100644 index 0000000..bed269e --- /dev/null +++ b/screencasts/svgopen2010/.svn/all-wcprops @@ -0,0 +1,29 @@ +K 25 +svn:wc:ra_dav:version-url +V 48 +/svn/!svn/ver/1691/trunk/screencasts/svgopen2010 +END +script.js +K 25 +svn:wc:ra_dav:version-url +V 58 +/svn/!svn/ver/1683/trunk/screencasts/svgopen2010/script.js +END +style.css +K 25 +svn:wc:ra_dav:version-url +V 58 +/svn/!svn/ver/1683/trunk/screencasts/svgopen2010/style.css +END +index.html +K 25 +svn:wc:ra_dav:version-url +V 59 +/svn/!svn/ver/1691/trunk/screencasts/svgopen2010/index.html +END +logo.svg +K 25 +svn:wc:ra_dav:version-url +V 57 +/svn/!svn/ver/1683/trunk/screencasts/svgopen2010/logo.svg +END diff --git a/screencasts/svgopen2010/.svn/entries b/screencasts/svgopen2010/.svn/entries new file mode 100644 index 0000000..ba05f95 --- /dev/null +++ b/screencasts/svgopen2010/.svn/entries @@ -0,0 +1,164 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/screencasts/svgopen2010 +http://svg-edit.googlecode.com/svn + + + +2010-08-31T08:23:53.254417Z +1691 +rusnakp + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +script.js +file + + + + +2012-03-23T10:42:16.000000Z +9c9830d4a2c27657091c221d0f3c7caf +2010-08-26T15:15:04.984061Z +1683 +rusnakp +has-props + + + + + + + + + + + + + + + + + + + + +12709 + +style.css +file + + + + +2012-03-23T10:42:16.000000Z +cfb24e366878bdbec0c396e5d338641b +2010-08-26T15:15:04.984061Z +1683 +rusnakp +has-props + + + + + + + + + + + + + + + + + + + + +9055 + +index.html +file + + + + +2012-03-23T10:42:16.000000Z +ab95dcc731ec018410f021db8bb01d09 +2010-08-31T08:23:53.254417Z +1691 +rusnakp +has-props + + + + + + + + + + + + + + + + + + + + +10551 + +logo.svg +file + + + + +2012-03-23T10:42:16.000000Z +4d8d3e34ff75f08525c86afc0a1ced0f +2010-08-26T15:15:04.984061Z +1683 +rusnakp +has-props + + + + + + + + + + + + + + + + + + + + +6356 + diff --git a/screencasts/svgopen2010/.svn/prop-base/index.html.svn-base b/screencasts/svgopen2010/.svn/prop-base/index.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/screencasts/svgopen2010/.svn/prop-base/index.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/screencasts/svgopen2010/.svn/prop-base/logo.svg.svn-base b/screencasts/svgopen2010/.svn/prop-base/logo.svg.svn-base new file mode 100644 index 0000000..91ca244 --- /dev/null +++ b/screencasts/svgopen2010/.svn/prop-base/logo.svg.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 13 +image/svg+xml +END diff --git a/screencasts/svgopen2010/.svn/prop-base/script.js.svn-base b/screencasts/svgopen2010/.svn/prop-base/script.js.svn-base new file mode 100644 index 0000000..530636b --- /dev/null +++ b/screencasts/svgopen2010/.svn/prop-base/script.js.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 15 +text/javascript +END diff --git a/screencasts/svgopen2010/.svn/prop-base/style.css.svn-base b/screencasts/svgopen2010/.svn/prop-base/style.css.svn-base new file mode 100644 index 0000000..69cd899 --- /dev/null +++ b/screencasts/svgopen2010/.svn/prop-base/style.css.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 8 +text/css +END diff --git a/screencasts/svgopen2010/.svn/text-base/index.html.svn-base b/screencasts/svgopen2010/.svn/text-base/index.html.svn-base new file mode 100644 index 0000000..59881ee --- /dev/null +++ b/screencasts/svgopen2010/.svn/text-base/index.html.svn-base @@ -0,0 +1,297 @@ + + + + + + + + + + SVG-edit, Pavol Rusnák, SVG Open 2010, Paris + + + + + +

        +
        +
        + +
        +
        +

        SVG-edit

        +

        logo

        +

        Pavol Rusnák

        +

        SVG Open 2010, Paris

        +
        +
        + +
        +
        +
        +

        SVG-edit is ...

        +
        +
          +
        • a web-based, JavaScript-driven SVG editor that works in any modern browser
          • +
        • not a full replacement for Inkscape (yet :-P)
          • +
        • licensed under very liberal open source license (Apache License 2.0)
          • +
        • platform for other projects which need to edit SVG documents
          • +
        • pushing browsers to find their limits
          • +
        • always up-to-date
          • +
        +
        +
        + +
        +
        +
        +

        History: 1.0 (13th Feb 2009)

        +
        +
          +
        • draw path, line, freehand-circle, rectangle
          • +
        • clear drawn image
          • +
        • delete element
          • +
        • save image
          • +
        • → Narendra Sisodiya
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.0 (3rd June 2009)

        +
        +
          +
        • draw ellipse, square
          • +
        • change line style (stroke-dasharray)
          • +
        • rearranged whole code to utilize OOP
          • +
        • GUI enhancement
          • +
        • → Pavol Rusnák
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.1 (17th June 2009)

        +
        +
          +
        • tooltips added to all UI elements
          • +
        • edit of fill opacity, stroke opacity, group opacity
          • +
        • selection of elements
          • +
        • move/drag of elements
          • +
        • save SVG file to separate tab
          • +
        • create and edit text elements
          • +
        • contextual panel of tools
          • +
        • change rect radius, font-family, font-size
          • +
        • keystroke handling
          • +
        • → Jeff Schiller
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.2 (8th July 2009)

        +
        +
          +
        • multiselect mode
          • +
        • undo/redo actions
          • +
        • resize elements
          • +
        • contextual tools for rect, circle, ellipse, line, text elements
          • +
        • some updated button images
          • +
        • stretched the UI to fit the browser window
          • +
        • resizing of the SVG canvas
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.3 (8th Sept 2009)

        +
        +
          +
        • align objects
          • +
        • rotate objects
          • +
        • clone objects
          • +
        • select next/prev object
          • +
        • edit SVG source
          • +
        • gradient picking
          • +
        • polygon mode
          • +
        • → Alexis Deveria
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.4 Arbelos (11th Jan 2010)

        +
        +
          +
        • include raster images
          • +
        • select non-adjacent elements
          • +
        • group/ungroup
          • +
        • zoom
          • +
        • layers
          • +
        • curve segments in paths
          • +
        • UI localization
          • +
        • wireframe mode
          • +
        • change background
          • +
        • convert shapes to path
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.5 Bicorn (15th June 2010)

        +
        +
          +
        • open local files (Firefox 3.6+, Chrome 6+ only)
          • +
        • import SVG into drawing (Firefox 3.6+, Chrome 6+ only)
          • +
        • connector lines and arrows
          • +
        • smoother freehand paths
          • +
        • editing outside the canvas
          • +
        • increased support for SVG elements
          • +
        • add/edit sub-paths
          • +
        • multiple path segment selection
          • +
        • support for foreign markup (MathML)
          • +
        • radial gradients
          • +
        • eye-dropper tool
          • +
        • stroke linejoin and linecap
          • +
        • export to PNG
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        Plugin Architecture

        +
        + 
        +svgEditor.addExtension("Hello World", function() {
+
+        return {
+                svgicons: "extensions/helloworld-icon.xml",
+                buttons: [{...}],
+                mouseDown: function() {
+                        ...
+                },
+
+                mouseUp: function(opts) {
+                        ...
+                }
+        };
+});
        +
        +
        + +
        +
        +
        +

        Features in progress (for 2.6 Cycloid)

        +
        +
          +
        • IE9 support
          • +
        • context menus
          • +
        • path clipping
          • +
        • support for <a> element
          • +
        • advanced gradient editor (more stops, elliptic fills)
          • +
        • shape library tool
          • +
        • linking off to clipart/image library sites
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        Projects based on SVG-edit

        +
        +
          +
        • Firefox add-on
          • +
        • Opera widget
          • +
        • Google Wave gadget
          • +
        • Wiki extensions (Dokuwiki, Instiki, MoinMoin, XWiki)
          • +
        • Cloud Canvas
          • +
        • Eduvid
          • +
        • Sesame
          • +
        +
        +
        + +
        +
        +
        +

        Resources

        +
        + +
        +
        + +
        +
        +

        Thank you!

        +

        Questions?

        +
        +
        + +
        + +
        + + + + + + + diff --git a/screencasts/svgopen2010/.svn/text-base/logo.svg.svn-base b/screencasts/svgopen2010/.svn/text-base/logo.svg.svn-base new file mode 100644 index 0000000..e71308b --- /dev/null +++ b/screencasts/svgopen2010/.svn/text-base/logo.svg.svn-base @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + Layer 2 + + + diff --git a/screencasts/svgopen2010/.svn/text-base/script.js.svn-base b/screencasts/svgopen2010/.svn/text-base/script.js.svn-base new file mode 100644 index 0000000..28f9f90 --- /dev/null +++ b/screencasts/svgopen2010/.svn/text-base/script.js.svn-base @@ -0,0 +1,390 @@ + (function() { + var doc = document; + var disableBuilds = true; + + var ctr = 0; + var spaces = /\s+/, a1 = ['']; + + var toArray = function(list) { + return Array.prototype.slice.call(list || [], 0); + }; + + var byId = function(id) { + if (typeof id == 'string') { return doc.getElementById(id); } + return id; + }; + + var query = function(query, root) { + if (!query) { return []; } + if (typeof query != 'string') { return toArray(query); } + if (typeof root == 'string') { + root = byId(root); + if(!root){ return []; } + } + + root = root || document; + var rootIsDoc = (root.nodeType == 9); + var doc = rootIsDoc ? root : (root.ownerDocument || document); + + // rewrite the query to be ID rooted + if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) { + root.id = root.id || ('qUnique' + (ctr++)); + query = '#' + root.id + ' ' + query; + } + // don't choke on something like ".yada.yada >" + if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; } + + return toArray(doc.querySelectorAll(query)); + }; + + var strToArray = function(s) { + if (typeof s == 'string' || s instanceof String) { + if (s.indexOf(' ') < 0) { + a1[0] = s; + return a1; + } else { + return s.split(spaces); + } + } + return s; + }; + + var addClass = function(node, classStr) { + classStr = strToArray(classStr); + var cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length, c; i < len; ++i) { + c = classStr[i]; + if (c && cls.indexOf(' ' + c + ' ') < 0) { + cls += c + ' '; + } + } + node.className = cls.trim(); + }; + + var removeClass = function(node, classStr) { + var cls; + if (classStr !== undefined) { + classStr = strToArray(classStr); + cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length; i < len; ++i) { + cls = cls.replace(' ' + classStr[i] + ' ', ' '); + } + cls = cls.trim(); + } else { + cls = ''; + } + if (node.className != cls) { + node.className = cls; + } + }; + + var toggleClass = function(node, classStr) { + var cls = ' ' + node.className + ' '; + if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) { + removeClass(node, classStr); + } else { + addClass(node, classStr); + } + }; + + var ua = navigator.userAgent; + var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined; + var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined; + var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined; + + var canTransition = (function() { + var ver = parseFloat(ua.split('Version/')[1]) || undefined; + // test to determine if this browser can handle CSS transitions. + var cachedCanTransition = + (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5)); + return function() { return cachedCanTransition; } + })(); + + // + // Slide class + // + var Slide = function(node, idx) { + this._node = node; + if (idx >= 0) { + this._count = idx + 1; + } + if (this._node) { + addClass(this._node, 'slide distant-slide'); + } + this._makeCounter(); + this._makeBuildList(); + }; + + Slide.prototype = { + _node: null, + _count: 0, + _buildList: [], + _visited: false, + _currentState: '', + _states: [ 'distant-slide', 'far-past', + 'past', 'current', 'future', + 'far-future', 'distant-slide' ], + setState: function(state) { + if (typeof state != 'string') { + state = this._states[state]; + } + if (state == 'current' && !this._visited) { + this._visited = true; + this._makeBuildList(); + } + removeClass(this._node, this._states); + addClass(this._node, state); + this._currentState = state; + + // delay first auto run. Really wish this were in CSS. + /* + this._runAutos(); + */ + var _t = this; + setTimeout(function(){ _t._runAutos(); } , 400); + }, + _makeCounter: function() { + if(!this._count || !this._node) { return; } + var c = doc.createElement('span'); + c.innerHTML = this._count; + c.className = 'counter'; + this._node.appendChild(c); + }, + _makeBuildList: function() { + this._buildList = []; + if (disableBuilds) { return; } + if (this._node) { + this._buildList = query('[data-build] > *', this._node); + } + this._buildList.forEach(function(el) { + addClass(el, 'to-build'); + }); + }, + _runAutos: function() { + if (this._currentState != 'current') { + return; + } + // find the next auto, slice it out of the list, and run it + var idx = -1; + this._buildList.some(function(n, i) { + if (n.hasAttribute('data-auto')) { + idx = i; + return true; + } + return false; + }); + if (idx >= 0) { + var elem = this._buildList.splice(idx, 1)[0]; + var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd'); + var _t = this; + if (canTransition()) { + var l = function(evt) { + elem.parentNode.removeEventListener(transitionEnd, l, false); + _t._runAutos(); + }; + elem.parentNode.addEventListener(transitionEnd, l, false); + removeClass(elem, 'to-build'); + } else { + setTimeout(function() { + removeClass(elem, 'to-build'); + _t._runAutos(); + }, 400); + } + } + }, + buildNext: function() { + if (!this._buildList.length) { + return false; + } + removeClass(this._buildList.shift(), 'to-build'); + return true; + }, + }; + + // + // SlideShow class + // + var SlideShow = function(slides) { + this._slides = (slides || []).map(function(el, idx) { + return new Slide(el, idx); + }); + + var h = window.location.hash; + try { + this.current = parseInt(h.split('#slide')[1], 10); + }catch (e) { /* squeltch */ } + this.current = isNaN(this.current) ? 1 : this.current; + var _t = this; + doc.addEventListener('keydown', + function(e) { _t.handleKeys(e); }, false); + doc.addEventListener('mousewheel', + function(e) { _t.handleWheel(e); }, false); + doc.addEventListener('DOMMouseScroll', + function(e) { _t.handleWheel(e); }, false); + doc.addEventListener('touchstart', + function(e) { _t.handleTouchStart(e); }, false); + doc.addEventListener('touchend', + function(e) { _t.handleTouchEnd(e); }, false); + window.addEventListener('popstate', + function(e) { _t.go(e.state); }, false); + this._update(); + }; + + SlideShow.prototype = { + _slides: [], + _update: function(dontPush) { + document.querySelector('#presentation-counter').innerText = this.current; + if (history.pushState) { + if (!dontPush) { + history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current); + } + } else { + window.location.hash = 'slide' + this.current; + } + for (var x = this.current-1; x < this.current + 7; x++) { + if (this._slides[x-4]) { + this._slides[x-4].setState(Math.max(0, x-this.current)); + } + } + }, + + current: 0, + next: function() { + if (!this._slides[this.current-1].buildNext()) { + this.current = Math.min(this.current + 1, this._slides.length); + this._update(); + } + }, + prev: function() { + this.current = Math.max(this.current-1, 1); + this._update(); + }, + go: function(num) { + if (history.pushState && this.current != num) { + history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current); + } + this.current = num; + this._update(true); + }, + + _notesOn: false, + showNotes: function() { + var isOn = this._notesOn = !this._notesOn; + query('.notes').forEach(function(el) { + el.style.display = (notesOn) ? 'block' : 'none'; + }); + }, + switch3D: function() { + toggleClass(document.body, 'three-d'); + }, + handleWheel: function(e) { + var delta = 0; + if (e.wheelDelta) { + delta = e.wheelDelta/120; + if (isOpera) { + delta = -delta; + } + } else if (e.detail) { + delta = -e.detail/3; + } + + if (delta > 0 ) { + this.prev(); + return; + } + if (delta < 0 ) { + this.next(); + return; + } + }, + handleKeys: function(e) { + + if (/^(input|textarea)$/i.test(e.target.nodeName)) return; + + switch (e.keyCode) { + case 37: // left arrow + this.prev(); break; + case 39: // right arrow + case 32: // space + this.next(); break; + case 50: // 2 + this.showNotes(); break; + case 51: // 3 + this.switch3D(); break; + } + }, + _touchStartX: 0, + handleTouchStart: function(e) { + this._touchStartX = e.touches[0].pageX; + }, + handleTouchEnd: function(e) { + var delta = this._touchStartX - e.changedTouches[0].pageX; + var SWIPE_SIZE = 150; + if (delta > SWIPE_SIZE) { + this.next(); + } else if (delta< -SWIPE_SIZE) { + this.prev(); + } + }, + }; + + // Initialize + var slideshow = new SlideShow(query('.slide')); + + + + + + document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false); + document.querySelector('#toggle-size').addEventListener('click', toggleSize, false); + document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false); + document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false); + + + var counters = document.querySelectorAll('.counter'); + var slides = document.querySelectorAll('.slide'); + + function toggleCounter() { + toArray(counters).forEach(function(el) { + el.style.display = (el.offsetHeight) ? 'none' : 'block'; + }); + } + + function toggleSize() { + toArray(slides).forEach(function(el) { + if (!/reduced/.test(el.className)) { + addClass(el, 'reduced'); + } + else { + removeClass(el, 'reduced'); + } + }); + } + + function toggleTransitions() { + toArray(slides).forEach(function(el) { + if (!/no-transitions/.test(el.className)) { + addClass(el, 'no-transitions'); + } + else { + removeClass(el, 'no-transitions'); + } + }); + } + + function toggleGradients() { + toArray(slides).forEach(function(el) { + if (!/no-gradients/.test(el.className)) { + addClass(el, 'no-gradients'); + } + else { + removeClass(el, 'no-gradients'); + } + }); + } + + + + + + })(); diff --git a/screencasts/svgopen2010/.svn/text-base/style.css.svn-base b/screencasts/svgopen2010/.svn/text-base/style.css.svn-base new file mode 100644 index 0000000..04b571c --- /dev/null +++ b/screencasts/svgopen2010/.svn/text-base/style.css.svn-base @@ -0,0 +1,395 @@ + body { + font: 20px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + position: absolute; + left: 0px; top: 0px; + } + + .presentation { + position: absolute; + height: 100%; + width: 100%; + left: 0px; + top: 0px; + display: block; + overflow: hidden; + background: #778; + } + + .slides { + width: 100%; + height: 100%; + left: 0; + top: 0; + position: absolute; + display: block; + -webkit-transition: -webkit-transform 1s ease-in-out; + -moz-transition: -moz-transform 1s ease-in-out; + -o-transition: -o-transform 1s ease-in-out; + transition: transform 1s ease-in-out; + + /* so it's visible in the iframe. */ + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); + + } + + .slide { + display: none; + position: absolute; + overflow: hidden; + width: 900px; + height: 700px; + left: 50%; + top: 50%; + margin-top: -350px; + background-color: #eee; + background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff)); + background: -moz-linear-gradient(bottom, #bbd, #fff); + background: linear-gradient(bottom, #bbd, #fff); + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); + } + + .slide:nth-child(even) { + -moz-border-radius: 20px 0; + -khtml-border-radius: 20px 0; + border-radius: 20px 0; /* includes Opera 10.5+ */ + -webkit-border-top-left-radius: 20px; + -webkit-border-bottom-right-radius: 20px; + } + + .slide:nth-child(odd) { + -moz-border-radius: 0 20px; + -khtml-border-radius: 0 20px; + border-radius: 0 20px; + -webkit-border-top-right-radius: 20px; + -webkit-border-bottom-left-radius: 20px; + } + + .slide p, .slide textarea { + font-size: 120%; + } + + .slide .counter { + color: #999999; + position: absolute; + left: 20px; + bottom: 20px; + display: block; + font-size: 70%; + } + + .slide.title > .counter, + .slide.segue > .counter, + .slide.mainTitle > .counter { + display: none; + } + + .force-render { + display: block; + visibility: hidden; + } + + .slide.far-past { + display: block; + margin-left: -2400px; + } + + .slide.past { + visibility: visible; + display: block; + margin-left: -1400px; + } + + .slide.current { + visibility: visible; + display: block; + margin-left: -450px; + } + + .slide.future { + visibility: visible; + display: block; + margin-left: 500px; + } + + .slide.far-future { + display: block; + margin-left: 1500px; + } + + body.three-d div.slides { + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); + -o-transform: translateX(50px) scale(0.8) rotateY(10deg); + transform: translateX(50px) scale(0.8) rotateY(10deg); + } + + /* Content */ + + @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); } + @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); } + + header { + font-family: 'Droid Sans'; + font-weight: normal; + letter-spacing: -.05em; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + left: 30px; + top: 25px; + margin: 0; + padding: 0; + font-size: 140%; + } + + h1 { + font-size: 140%; + display: inline; + font-weight: normal; + padding: 0; + margin: 0; + } + + h2 { + font-family: 'Droid Sans'; + color: black; + font-size: 120%; + padding: 0; + margin: 20px 0; + } + + h2:first-child { + margin-top: 0; + } + + section, footer { + font-family: 'Droid Sans'; + color: #3f3f3f; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + margin: 100px 30px 0; + display: block; + overflow: hidden; + } + + footer { + font-size: 100%; + margin: 20px 0 0 30px; + } + + a { + color: inherit; + display: inline-block; + text-decoration: none; + line-height: 110%; + border-bottom: 2px solid #3f3f3f; + } + + ul { + margin: 0; + padding: 0; + } + + li { + margin: 2%; + } + + button { + font-size: 100%; + } + + pre button { + margin: 2px; + } + + section.left { + float: left; + width: 390px; + } + + section.small { + font-size: 24px; + } + + section.small ul { + margin: 0 0 0 15px; + padding: 0; + } + + section.small li { + padding-bottom: 0; + } + + section.middle { + line-height: 2em; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 700px; + width: 900px; + } + + pre { + text-align: left; + font-family: 'Droid Sans Mono', Courier; + font-size: 80%; + padding: 10px 20px; + background: rgba(255, 0, 0, 0.05); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(255, 0, 0, 0.2); + } + + pre select { + font-family: Monaco, Courier; + border: 1px solid #c61800; + } + + input { + font-size: 100%; + margin-right: 10px; + font-family: Helvetica; + padding: 3px; + } + input[type="range"] { + width: 100%; + } + + button { + margin: 20px 10px 0 0; + font-family: Verdana; + } + + button.large { + font-size: 32px; + } + + pre b { + font-weight: normal; + color: #c61800; + text-shadow: #c61800 0 0 1px; + /*letter-spacing: -1px;*/ + } + pre em { + font-weight: normal; + font-style: normal; + color: #18a600; + text-shadow: #18a600 0 0 1px; + } + pre input[type="range"] { + height: 6px; + cursor: pointer; + width: auto; + } + + div.example { + display: block; + padding: 10px 20px; + color: black; + background: rgba(255, 255, 255, 0.4); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; + border: 1px solid rgba(0, 0, 0, 0.2); + } + + video { + -moz-border-radius: 8px; + -khtml-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.2); + } + + .key { + font-family: 'Droid Sans'; + color: black; + display: inline-block; + padding: 6px 10px 3px 10px; + font-size: 100%; + line-height: 30px; + text-shadow: none; + letter-spacing: 0; + bottom: 10px; + position: relative; + -moz-border-radius: 10px; + -khtml-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background: white; + box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + } + + .key { font-family: Arial; } + + :not(header) > .key { + margin: 0 5px; + bottom: 4px; + } + + .two-column { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + } + + .stroke { + -webkit-text-stroke-color: red; + -webkit-text-stroke-width: 1px; + } /* currently webkit-only */ + + .center { + text-align: center; + } + + #presentation-counter { + color: #ccc; + font-size: 70%; + letter-spacing: 1px; + position: absolute; + top: 40%; + left: 0; + width: 100%; + text-align: center; + } + + div:not(.current).reduced { + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); + } + + .no-transitions { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + + .no-gradients { + background: none; + background-color: #fff; + } + + ul.bulleted { + padding-left: 30px; + } diff --git a/screencasts/svgopen2010/index.html b/screencasts/svgopen2010/index.html new file mode 100644 index 0000000..59881ee --- /dev/null +++ b/screencasts/svgopen2010/index.html @@ -0,0 +1,297 @@ + + + + + + + + + + SVG-edit, Pavol Rusnák, SVG Open 2010, Paris + + + + + +
        +
        +
        + +
        +
        +

        SVG-edit

        +

        logo

        +

        Pavol Rusnák

        +

        SVG Open 2010, Paris

        +
        +
        + +
        +
        +
        +

        SVG-edit is ...

        +
        +
          +
        • a web-based, JavaScript-driven SVG editor that works in any modern browser
          • +
        • not a full replacement for Inkscape (yet :-P)
          • +
        • licensed under very liberal open source license (Apache License 2.0)
          • +
        • platform for other projects which need to edit SVG documents
          • +
        • pushing browsers to find their limits
          • +
        • always up-to-date
          • +
        +
        +
        + +
        +
        +
        +

        History: 1.0 (13th Feb 2009)

        +
        +
          +
        • draw path, line, freehand-circle, rectangle
          • +
        • clear drawn image
          • +
        • delete element
          • +
        • save image
          • +
        • → Narendra Sisodiya
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.0 (3rd June 2009)

        +
        +
          +
        • draw ellipse, square
          • +
        • change line style (stroke-dasharray)
          • +
        • rearranged whole code to utilize OOP
          • +
        • GUI enhancement
          • +
        • → Pavol Rusnák
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.1 (17th June 2009)

        +
        +
          +
        • tooltips added to all UI elements
          • +
        • edit of fill opacity, stroke opacity, group opacity
          • +
        • selection of elements
          • +
        • move/drag of elements
          • +
        • save SVG file to separate tab
          • +
        • create and edit text elements
          • +
        • contextual panel of tools
          • +
        • change rect radius, font-family, font-size
          • +
        • keystroke handling
          • +
        • → Jeff Schiller
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.2 (8th July 2009)

        +
        +
          +
        • multiselect mode
          • +
        • undo/redo actions
          • +
        • resize elements
          • +
        • contextual tools for rect, circle, ellipse, line, text elements
          • +
        • some updated button images
          • +
        • stretched the UI to fit the browser window
          • +
        • resizing of the SVG canvas
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.3 (8th Sept 2009)

        +
        +
          +
        • align objects
          • +
        • rotate objects
          • +
        • clone objects
          • +
        • select next/prev object
          • +
        • edit SVG source
          • +
        • gradient picking
          • +
        • polygon mode
          • +
        • → Alexis Deveria
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.4 Arbelos (11th Jan 2010)

        +
        +
          +
        • include raster images
          • +
        • select non-adjacent elements
          • +
        • group/ungroup
          • +
        • zoom
          • +
        • layers
          • +
        • curve segments in paths
          • +
        • UI localization
          • +
        • wireframe mode
          • +
        • change background
          • +
        • convert shapes to path
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        History: 2.5 Bicorn (15th June 2010)

        +
        +
          +
        • open local files (Firefox 3.6+, Chrome 6+ only)
          • +
        • import SVG into drawing (Firefox 3.6+, Chrome 6+ only)
          • +
        • connector lines and arrows
          • +
        • smoother freehand paths
          • +
        • editing outside the canvas
          • +
        • increased support for SVG elements
          • +
        • add/edit sub-paths
          • +
        • multiple path segment selection
          • +
        • support for foreign markup (MathML)
          • +
        • radial gradients
          • +
        • eye-dropper tool
          • +
        • stroke linejoin and linecap
          • +
        • export to PNG
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        Plugin Architecture

        +
        + 
        +svgEditor.addExtension("Hello World", function() {
+
+        return {
+                svgicons: "extensions/helloworld-icon.xml",
+                buttons: [{...}],
+                mouseDown: function() {
+                        ...
+                },
+
+                mouseUp: function(opts) {
+                        ...
+                }
+        };
+});
        +
        +
        + +
        +
        +
        +

        Features in progress (for 2.6 Cycloid)

        +
        +
          +
        • IE9 support
          • +
        • context menus
          • +
        • path clipping
          • +
        • support for <a> element
          • +
        • advanced gradient editor (more stops, elliptic fills)
          • +
        • shape library tool
          • +
        • linking off to clipart/image library sites
          • +
        +

        _

        +
        +
        + +
        +
        +
        +

        Projects based on SVG-edit

        +
        +
          +
        • Firefox add-on
          • +
        • Opera widget
          • +
        • Google Wave gadget
          • +
        • Wiki extensions (Dokuwiki, Instiki, MoinMoin, XWiki)
          • +
        • Cloud Canvas
          • +
        • Eduvid
          • +
        • Sesame
          • +
        +
        +
        + +
        +
        +
        +

        Resources

        +
        + +
        +
        + +
        +
        +

        Thank you!

        +

        Questions?

        +
        +
        + +
        + +
        + + + + + + + diff --git a/screencasts/svgopen2010/logo.svg b/screencasts/svgopen2010/logo.svg new file mode 100644 index 0000000..e71308b --- /dev/null +++ b/screencasts/svgopen2010/logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + Layer 2 + + + diff --git a/screencasts/svgopen2010/script.js b/screencasts/svgopen2010/script.js new file mode 100644 index 0000000..28f9f90 --- /dev/null +++ b/screencasts/svgopen2010/script.js @@ -0,0 +1,390 @@ + (function() { + var doc = document; + var disableBuilds = true; + + var ctr = 0; + var spaces = /\s+/, a1 = ['']; + + var toArray = function(list) { + return Array.prototype.slice.call(list || [], 0); + }; + + var byId = function(id) { + if (typeof id == 'string') { return doc.getElementById(id); } + return id; + }; + + var query = function(query, root) { + if (!query) { return []; } + if (typeof query != 'string') { return toArray(query); } + if (typeof root == 'string') { + root = byId(root); + if(!root){ return []; } + } + + root = root || document; + var rootIsDoc = (root.nodeType == 9); + var doc = rootIsDoc ? root : (root.ownerDocument || document); + + // rewrite the query to be ID rooted + if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) { + root.id = root.id || ('qUnique' + (ctr++)); + query = '#' + root.id + ' ' + query; + } + // don't choke on something like ".yada.yada >" + if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; } + + return toArray(doc.querySelectorAll(query)); + }; + + var strToArray = function(s) { + if (typeof s == 'string' || s instanceof String) { + if (s.indexOf(' ') < 0) { + a1[0] = s; + return a1; + } else { + return s.split(spaces); + } + } + return s; + }; + + var addClass = function(node, classStr) { + classStr = strToArray(classStr); + var cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length, c; i < len; ++i) { + c = classStr[i]; + if (c && cls.indexOf(' ' + c + ' ') < 0) { + cls += c + ' '; + } + } + node.className = cls.trim(); + }; + + var removeClass = function(node, classStr) { + var cls; + if (classStr !== undefined) { + classStr = strToArray(classStr); + cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length; i < len; ++i) { + cls = cls.replace(' ' + classStr[i] + ' ', ' '); + } + cls = cls.trim(); + } else { + cls = ''; + } + if (node.className != cls) { + node.className = cls; + } + }; + + var toggleClass = function(node, classStr) { + var cls = ' ' + node.className + ' '; + if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) { + removeClass(node, classStr); + } else { + addClass(node, classStr); + } + }; + + var ua = navigator.userAgent; + var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined; + var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined; + var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined; + + var canTransition = (function() { + var ver = parseFloat(ua.split('Version/')[1]) || undefined; + // test to determine if this browser can handle CSS transitions. + var cachedCanTransition = + (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5)); + return function() { return cachedCanTransition; } + })(); + + // + // Slide class + // + var Slide = function(node, idx) { + this._node = node; + if (idx >= 0) { + this._count = idx + 1; + } + if (this._node) { + addClass(this._node, 'slide distant-slide'); + } + this._makeCounter(); + this._makeBuildList(); + }; + + Slide.prototype = { + _node: null, + _count: 0, + _buildList: [], + _visited: false, + _currentState: '', + _states: [ 'distant-slide', 'far-past', + 'past', 'current', 'future', + 'far-future', 'distant-slide' ], + setState: function(state) { + if (typeof state != 'string') { + state = this._states[state]; + } + if (state == 'current' && !this._visited) { + this._visited = true; + this._makeBuildList(); + } + removeClass(this._node, this._states); + addClass(this._node, state); + this._currentState = state; + + // delay first auto run. Really wish this were in CSS. + /* + this._runAutos(); + */ + var _t = this; + setTimeout(function(){ _t._runAutos(); } , 400); + }, + _makeCounter: function() { + if(!this._count || !this._node) { return; } + var c = doc.createElement('span'); + c.innerHTML = this._count; + c.className = 'counter'; + this._node.appendChild(c); + }, + _makeBuildList: function() { + this._buildList = []; + if (disableBuilds) { return; } + if (this._node) { + this._buildList = query('[data-build] > *', this._node); + } + this._buildList.forEach(function(el) { + addClass(el, 'to-build'); + }); + }, + _runAutos: function() { + if (this._currentState != 'current') { + return; + } + // find the next auto, slice it out of the list, and run it + var idx = -1; + this._buildList.some(function(n, i) { + if (n.hasAttribute('data-auto')) { + idx = i; + return true; + } + return false; + }); + if (idx >= 0) { + var elem = this._buildList.splice(idx, 1)[0]; + var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd'); + var _t = this; + if (canTransition()) { + var l = function(evt) { + elem.parentNode.removeEventListener(transitionEnd, l, false); + _t._runAutos(); + }; + elem.parentNode.addEventListener(transitionEnd, l, false); + removeClass(elem, 'to-build'); + } else { + setTimeout(function() { + removeClass(elem, 'to-build'); + _t._runAutos(); + }, 400); + } + } + }, + buildNext: function() { + if (!this._buildList.length) { + return false; + } + removeClass(this._buildList.shift(), 'to-build'); + return true; + }, + }; + + // + // SlideShow class + // + var SlideShow = function(slides) { + this._slides = (slides || []).map(function(el, idx) { + return new Slide(el, idx); + }); + + var h = window.location.hash; + try { + this.current = parseInt(h.split('#slide')[1], 10); + }catch (e) { /* squeltch */ } + this.current = isNaN(this.current) ? 1 : this.current; + var _t = this; + doc.addEventListener('keydown', + function(e) { _t.handleKeys(e); }, false); + doc.addEventListener('mousewheel', + function(e) { _t.handleWheel(e); }, false); + doc.addEventListener('DOMMouseScroll', + function(e) { _t.handleWheel(e); }, false); + doc.addEventListener('touchstart', + function(e) { _t.handleTouchStart(e); }, false); + doc.addEventListener('touchend', + function(e) { _t.handleTouchEnd(e); }, false); + window.addEventListener('popstate', + function(e) { _t.go(e.state); }, false); + this._update(); + }; + + SlideShow.prototype = { + _slides: [], + _update: function(dontPush) { + document.querySelector('#presentation-counter').innerText = this.current; + if (history.pushState) { + if (!dontPush) { + history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current); + } + } else { + window.location.hash = 'slide' + this.current; + } + for (var x = this.current-1; x < this.current + 7; x++) { + if (this._slides[x-4]) { + this._slides[x-4].setState(Math.max(0, x-this.current)); + } + } + }, + + current: 0, + next: function() { + if (!this._slides[this.current-1].buildNext()) { + this.current = Math.min(this.current + 1, this._slides.length); + this._update(); + } + }, + prev: function() { + this.current = Math.max(this.current-1, 1); + this._update(); + }, + go: function(num) { + if (history.pushState && this.current != num) { + history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current); + } + this.current = num; + this._update(true); + }, + + _notesOn: false, + showNotes: function() { + var isOn = this._notesOn = !this._notesOn; + query('.notes').forEach(function(el) { + el.style.display = (notesOn) ? 'block' : 'none'; + }); + }, + switch3D: function() { + toggleClass(document.body, 'three-d'); + }, + handleWheel: function(e) { + var delta = 0; + if (e.wheelDelta) { + delta = e.wheelDelta/120; + if (isOpera) { + delta = -delta; + } + } else if (e.detail) { + delta = -e.detail/3; + } + + if (delta > 0 ) { + this.prev(); + return; + } + if (delta < 0 ) { + this.next(); + return; + } + }, + handleKeys: function(e) { + + if (/^(input|textarea)$/i.test(e.target.nodeName)) return; + + switch (e.keyCode) { + case 37: // left arrow + this.prev(); break; + case 39: // right arrow + case 32: // space + this.next(); break; + case 50: // 2 + this.showNotes(); break; + case 51: // 3 + this.switch3D(); break; + } + }, + _touchStartX: 0, + handleTouchStart: function(e) { + this._touchStartX = e.touches[0].pageX; + }, + handleTouchEnd: function(e) { + var delta = this._touchStartX - e.changedTouches[0].pageX; + var SWIPE_SIZE = 150; + if (delta > SWIPE_SIZE) { + this.next(); + } else if (delta< -SWIPE_SIZE) { + this.prev(); + } + }, + }; + + // Initialize + var slideshow = new SlideShow(query('.slide')); + + + + + + document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false); + document.querySelector('#toggle-size').addEventListener('click', toggleSize, false); + document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false); + document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false); + + + var counters = document.querySelectorAll('.counter'); + var slides = document.querySelectorAll('.slide'); + + function toggleCounter() { + toArray(counters).forEach(function(el) { + el.style.display = (el.offsetHeight) ? 'none' : 'block'; + }); + } + + function toggleSize() { + toArray(slides).forEach(function(el) { + if (!/reduced/.test(el.className)) { + addClass(el, 'reduced'); + } + else { + removeClass(el, 'reduced'); + } + }); + } + + function toggleTransitions() { + toArray(slides).forEach(function(el) { + if (!/no-transitions/.test(el.className)) { + addClass(el, 'no-transitions'); + } + else { + removeClass(el, 'no-transitions'); + } + }); + } + + function toggleGradients() { + toArray(slides).forEach(function(el) { + if (!/no-gradients/.test(el.className)) { + addClass(el, 'no-gradients'); + } + else { + removeClass(el, 'no-gradients'); + } + }); + } + + + + + + })(); diff --git a/screencasts/svgopen2010/style.css b/screencasts/svgopen2010/style.css new file mode 100644 index 0000000..04b571c --- /dev/null +++ b/screencasts/svgopen2010/style.css @@ -0,0 +1,395 @@ + body { + font: 20px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + position: absolute; + left: 0px; top: 0px; + } + + .presentation { + position: absolute; + height: 100%; + width: 100%; + left: 0px; + top: 0px; + display: block; + overflow: hidden; + background: #778; + } + + .slides { + width: 100%; + height: 100%; + left: 0; + top: 0; + position: absolute; + display: block; + -webkit-transition: -webkit-transform 1s ease-in-out; + -moz-transition: -moz-transform 1s ease-in-out; + -o-transition: -o-transform 1s ease-in-out; + transition: transform 1s ease-in-out; + + /* so it's visible in the iframe. */ + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); + + } + + .slide { + display: none; + position: absolute; + overflow: hidden; + width: 900px; + height: 700px; + left: 50%; + top: 50%; + margin-top: -350px; + background-color: #eee; + background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff)); + background: -moz-linear-gradient(bottom, #bbd, #fff); + background: linear-gradient(bottom, #bbd, #fff); + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); + } + + .slide:nth-child(even) { + -moz-border-radius: 20px 0; + -khtml-border-radius: 20px 0; + border-radius: 20px 0; /* includes Opera 10.5+ */ + -webkit-border-top-left-radius: 20px; + -webkit-border-bottom-right-radius: 20px; + } + + .slide:nth-child(odd) { + -moz-border-radius: 0 20px; + -khtml-border-radius: 0 20px; + border-radius: 0 20px; + -webkit-border-top-right-radius: 20px; + -webkit-border-bottom-left-radius: 20px; + } + + .slide p, .slide textarea { + font-size: 120%; + } + + .slide .counter { + color: #999999; + position: absolute; + left: 20px; + bottom: 20px; + display: block; + font-size: 70%; + } + + .slide.title > .counter, + .slide.segue > .counter, + .slide.mainTitle > .counter { + display: none; + } + + .force-render { + display: block; + visibility: hidden; + } + + .slide.far-past { + display: block; + margin-left: -2400px; + } + + .slide.past { + visibility: visible; + display: block; + margin-left: -1400px; + } + + .slide.current { + visibility: visible; + display: block; + margin-left: -450px; + } + + .slide.future { + visibility: visible; + display: block; + margin-left: 500px; + } + + .slide.far-future { + display: block; + margin-left: 1500px; + } + + body.three-d div.slides { + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); + -o-transform: translateX(50px) scale(0.8) rotateY(10deg); + transform: translateX(50px) scale(0.8) rotateY(10deg); + } + + /* Content */ + + @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); } + @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); } + + header { + font-family: 'Droid Sans'; + font-weight: normal; + letter-spacing: -.05em; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + left: 30px; + top: 25px; + margin: 0; + padding: 0; + font-size: 140%; + } + + h1 { + font-size: 140%; + display: inline; + font-weight: normal; + padding: 0; + margin: 0; + } + + h2 { + font-family: 'Droid Sans'; + color: black; + font-size: 120%; + padding: 0; + margin: 20px 0; + } + + h2:first-child { + margin-top: 0; + } + + section, footer { + font-family: 'Droid Sans'; + color: #3f3f3f; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + margin: 100px 30px 0; + display: block; + overflow: hidden; + } + + footer { + font-size: 100%; + margin: 20px 0 0 30px; + } + + a { + color: inherit; + display: inline-block; + text-decoration: none; + line-height: 110%; + border-bottom: 2px solid #3f3f3f; + } + + ul { + margin: 0; + padding: 0; + } + + li { + margin: 2%; + } + + button { + font-size: 100%; + } + + pre button { + margin: 2px; + } + + section.left { + float: left; + width: 390px; + } + + section.small { + font-size: 24px; + } + + section.small ul { + margin: 0 0 0 15px; + padding: 0; + } + + section.small li { + padding-bottom: 0; + } + + section.middle { + line-height: 2em; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 700px; + width: 900px; + } + + pre { + text-align: left; + font-family: 'Droid Sans Mono', Courier; + font-size: 80%; + padding: 10px 20px; + background: rgba(255, 0, 0, 0.05); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(255, 0, 0, 0.2); + } + + pre select { + font-family: Monaco, Courier; + border: 1px solid #c61800; + } + + input { + font-size: 100%; + margin-right: 10px; + font-family: Helvetica; + padding: 3px; + } + input[type="range"] { + width: 100%; + } + + button { + margin: 20px 10px 0 0; + font-family: Verdana; + } + + button.large { + font-size: 32px; + } + + pre b { + font-weight: normal; + color: #c61800; + text-shadow: #c61800 0 0 1px; + /*letter-spacing: -1px;*/ + } + pre em { + font-weight: normal; + font-style: normal; + color: #18a600; + text-shadow: #18a600 0 0 1px; + } + pre input[type="range"] { + height: 6px; + cursor: pointer; + width: auto; + } + + div.example { + display: block; + padding: 10px 20px; + color: black; + background: rgba(255, 255, 255, 0.4); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; + border: 1px solid rgba(0, 0, 0, 0.2); + } + + video { + -moz-border-radius: 8px; + -khtml-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.2); + } + + .key { + font-family: 'Droid Sans'; + color: black; + display: inline-block; + padding: 6px 10px 3px 10px; + font-size: 100%; + line-height: 30px; + text-shadow: none; + letter-spacing: 0; + bottom: 10px; + position: relative; + -moz-border-radius: 10px; + -khtml-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background: white; + box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + } + + .key { font-family: Arial; } + + :not(header) > .key { + margin: 0 5px; + bottom: 4px; + } + + .two-column { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + } + + .stroke { + -webkit-text-stroke-color: red; + -webkit-text-stroke-width: 1px; + } /* currently webkit-only */ + + .center { + text-align: center; + } + + #presentation-counter { + color: #ccc; + font-size: 70%; + letter-spacing: 1px; + position: absolute; + top: 40%; + left: 0; + width: 100%; + text-align: center; + } + + div:not(.current).reduced { + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); + } + + .no-transitions { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + } + + .no-gradients { + background: none; + background-color: #fff; + } + + ul.bulleted { + padding-left: 30px; + } diff --git a/test/.svn/all-wcprops b/test/.svn/all-wcprops new file mode 100644 index 0000000..46eb599 --- /dev/null +++ b/test/.svn/all-wcprops @@ -0,0 +1,71 @@ +K 25 +svn:wc:ra_dav:version-url +V 29 +/svn/!svn/ver/2079/trunk/test +END +draw_test.html +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1974/trunk/test/draw_test.html +END +select_test.html +K 25 +svn:wc:ra_dav:version-url +V 46 +/svn/!svn/ver/1910/trunk/test/select_test.html +END +svgutils_test.html +K 25 +svn:wc:ra_dav:version-url +V 48 +/svn/!svn/ver/2072/trunk/test/svgutils_test.html +END +history_test.html +K 25 +svn:wc:ra_dav:version-url +V 47 +/svn/!svn/ver/2079/trunk/test/history_test.html +END +test1.html +K 25 +svn:wc:ra_dav:version-url +V 40 +/svn/!svn/ver/2074/trunk/test/test1.html +END +units_test.html +K 25 +svn:wc:ra_dav:version-url +V 45 +/svn/!svn/ver/1990/trunk/test/units_test.html +END +svgtransformlist_test.html +K 25 +svn:wc:ra_dav:version-url +V 56 +/svn/!svn/ver/2077/trunk/test/svgtransformlist_test.html +END +contextmenu_test.html +K 25 +svn:wc:ra_dav:version-url +V 51 +/svn/!svn/ver/2073/trunk/test/contextmenu_test.html +END +math_test.html +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1873/trunk/test/math_test.html +END +all_tests.html +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/2074/trunk/test/all_tests.html +END +path_test.html +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1990/trunk/test/path_test.html +END diff --git a/test/.svn/entries b/test/.svn/entries new file mode 100644 index 0000000..4966672 --- /dev/null +++ b/test/.svn/entries @@ -0,0 +1,405 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/test +http://svg-edit.googlecode.com/svn + + + +2012-04-03T02:59:51.268120Z +2079 +asyazwan@gmail.com + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +draw_test.html +file + + + + +2012-03-23T10:41:56.000000Z +46906cee26109ccccabb6498f347b081 +2011-02-03T16:38:15.168955Z +1974 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +14565 + +qunit +dir + +select_test.html +file + + + + +2012-03-23T10:41:56.000000Z +47b144aa304864e6d7054717ec6712f1 +2011-01-13T07:47:21.238576Z +1910 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +4173 + +svgutils_test.html +file + + + + +2012-05-16T23:42:07.000000Z +0f033f67b0e397f97239fc4174f4f393 +2012-03-30T03:50:54.215739Z +2072 +asyazwan@gmail.com +has-props + + + + + + + + + + + + + + + + + + + + +4017 + +history_test.html +file + + + + +2012-05-16T23:42:07.000000Z +59721c9d1b9898962e8a86a23bbdbc39 +2012-04-03T02:59:51.268120Z +2079 +asyazwan@gmail.com +has-props + + + + + + + + + + + + + + + + + + + + +16311 + +test1.html +file + + + + +2012-05-16T23:42:07.000000Z +bad756fbb4c249fb0d48759db87f3a3d +2012-03-30T16:27:32.152631Z +2074 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +12300 + +units_test.html +file + + + + +2012-03-23T10:41:56.000000Z +550a0c8fe2fd795c5aea607844881bfd +2011-02-10T04:10:03.416318Z +1990 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +2151 + +svgtransformlist_test.html +file + + + + +2012-05-16T23:42:07.000000Z +10379de4d1e61fee1c104ac67c443a60 +2012-03-31T18:04:10.901524Z +2077 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +10886 + +contextmenu_test.html +file + + + + + +729dee132fdcd5a3b2724f9a3d134b29 +2012-03-30T04:03:00.265444Z +2073 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +2927 + +math_test.html +file + + + + +2012-03-23T10:41:56.000000Z +f077aaed7bf84f65c539af9cd192d385 +2010-11-15T09:25:49.602080Z +1873 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +3662 + +all_tests.html +file + + + + +2012-05-16T23:42:07.000000Z +5be9b5495cdcc6972217f59c97b8867b +2012-03-30T16:27:32.152631Z +2074 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +1514 + +path_test.html +file + + + + +2012-03-23T10:41:56.000000Z +2c8019f7c34278ba7ad79291cd1c07b6 +2011-02-10T04:10:03.416318Z +1990 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +771 + diff --git a/test/.svn/prop-base/all_tests.html.svn-base b/test/.svn/prop-base/all_tests.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/all_tests.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/contextmenu_test.html.svn-base b/test/.svn/prop-base/contextmenu_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/contextmenu_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/draw_test.html.svn-base b/test/.svn/prop-base/draw_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/draw_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/history_test.html.svn-base b/test/.svn/prop-base/history_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/history_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/math_test.html.svn-base b/test/.svn/prop-base/math_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/math_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/path_test.html.svn-base b/test/.svn/prop-base/path_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/path_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/select_test.html.svn-base b/test/.svn/prop-base/select_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/select_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/svgtransformlist_test.html.svn-base b/test/.svn/prop-base/svgtransformlist_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/svgtransformlist_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/svgutils_test.html.svn-base b/test/.svn/prop-base/svgutils_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/svgutils_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/test1.html.svn-base b/test/.svn/prop-base/test1.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/test1.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/prop-base/units_test.html.svn-base b/test/.svn/prop-base/units_test.html.svn-base new file mode 100644 index 0000000..d356868 --- /dev/null +++ b/test/.svn/prop-base/units_test.html.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 9 +text/html +END diff --git a/test/.svn/text-base/all_tests.html.svn-base b/test/.svn/text-base/all_tests.html.svn-base new file mode 100644 index 0000000..86f517f --- /dev/null +++ b/test/.svn/text-base/all_tests.html.svn-base @@ -0,0 +1,28 @@ + + + + All SVG-edit Tests + + +

        All SVG-edit Tests

        +

        This file frames all SVG-edit test pages. This should only include tests known to work. These tests are known to pass 100% in the following: Firefox 3.6, Chrome 7, IE9 Preview 6 (1.9.8006.6000), Opera 10.63. If a test is broken in this page, it is possible that YOU broke it. Please do not submit code that breaks any of these tests.

        + + + + + + + + + + + + \ No newline at end of file diff --git a/test/.svn/text-base/contextmenu_test.html.svn-base b/test/.svn/text-base/contextmenu_test.html.svn-base new file mode 100644 index 0000000..c32f4e8 --- /dev/null +++ b/test/.svn/text-base/contextmenu_test.html.svn-base @@ -0,0 +1,83 @@ + + + + + + + + + + + +

        Unit Tests for contextmenu.js

        +

        +

        +
          +
        + + + diff --git a/test/.svn/text-base/draw_test.html.svn-base b/test/.svn/text-base/draw_test.html.svn-base new file mode 100644 index 0000000..f104a18 --- /dev/null +++ b/test/.svn/text-base/draw_test.html.svn-base @@ -0,0 +1,539 @@ + + + + + + + + + + + + +

        Unit Tests for draw.js

        +

        +

        +
          +
        + + + diff --git a/test/.svn/text-base/history_test.html.svn-base b/test/.svn/text-base/history_test.html.svn-base new file mode 100644 index 0000000..15bc3b1 --- /dev/null +++ b/test/.svn/text-base/history_test.html.svn-base @@ -0,0 +1,591 @@ + + + + + + + + + + +

        Unit Tests for history.js

        +

        +

        +
          +
        + + + + + diff --git a/test/.svn/text-base/math_test.html.svn-base b/test/.svn/text-base/math_test.html.svn-base new file mode 100644 index 0000000..408f5c8 --- /dev/null +++ b/test/.svn/text-base/math_test.html.svn-base @@ -0,0 +1,114 @@ + + + + + + + + + + +

        Unit Tests for math.js

        +

        +

        +
          +
        + + diff --git a/test/.svn/text-base/path_test.html.svn-base b/test/.svn/text-base/path_test.html.svn-base new file mode 100644 index 0000000..6d5872b --- /dev/null +++ b/test/.svn/text-base/path_test.html.svn-base @@ -0,0 +1,29 @@ + + + + + + + + + + +

        Unit Tests for path.js

        +

        +

        +
          +
        + + + diff --git a/test/.svn/text-base/select_test.html.svn-base b/test/.svn/text-base/select_test.html.svn-base new file mode 100644 index 0000000..e10a093 --- /dev/null +++ b/test/.svn/text-base/select_test.html.svn-base @@ -0,0 +1,152 @@ + + + + + + + + + + + + + +

        Unit Tests for select.js

        +

        +

        +
          +
        +
        + + diff --git a/test/.svn/text-base/svgtransformlist_test.html.svn-base b/test/.svn/text-base/svgtransformlist_test.html.svn-base new file mode 100644 index 0000000..df697cf --- /dev/null +++ b/test/.svn/text-base/svgtransformlist_test.html.svn-base @@ -0,0 +1,418 @@ + + + + + + + + + + + +

        Unit Tests for svgtransformlist.js

        +

        +

        +
          +
        + + + diff --git a/test/.svn/text-base/svgutils_test.html.svn-base b/test/.svn/text-base/svgutils_test.html.svn-base new file mode 100644 index 0000000..b04a07f --- /dev/null +++ b/test/.svn/text-base/svgutils_test.html.svn-base @@ -0,0 +1,134 @@ + + + + + + + + + + + + + +

        Unit Tests for svgutils.js

        +

        +

        +
          +
        + + diff --git a/test/.svn/text-base/test1.html.svn-base b/test/.svn/text-base/test1.html.svn-base new file mode 100644 index 0000000..33b297b --- /dev/null +++ b/test/.svn/text-base/test1.html.svn-base @@ -0,0 +1,283 @@ + + + + + + + + + + + + + + + + + + + + + + + + +

        Unit Tests for SvgCanvas

        +

        +

        +
          +
        +
        +
        + +
        +
        +
        +
        + + \ No newline at end of file diff --git a/test/.svn/text-base/units_test.html.svn-base b/test/.svn/text-base/units_test.html.svn-base new file mode 100644 index 0000000..ba17415 --- /dev/null +++ b/test/.svn/text-base/units_test.html.svn-base @@ -0,0 +1,83 @@ + + + + + + + + + + +

        Unit Tests for units.js

        +

        +

        +
          +
        + + + diff --git a/test/all_tests.html b/test/all_tests.html new file mode 100644 index 0000000..86f517f --- /dev/null +++ b/test/all_tests.html @@ -0,0 +1,28 @@ + + + + All SVG-edit Tests + + +

        All SVG-edit Tests

        +

        This file frames all SVG-edit test pages. This should only include tests known to work. These tests are known to pass 100% in the following: Firefox 3.6, Chrome 7, IE9 Preview 6 (1.9.8006.6000), Opera 10.63. If a test is broken in this page, it is possible that YOU broke it. Please do not submit code that breaks any of these tests.

        + + + + + + + + + + + + \ No newline at end of file diff --git a/test/contextmenu_test.html b/test/contextmenu_test.html new file mode 100644 index 0000000..c32f4e8 --- /dev/null +++ b/test/contextmenu_test.html @@ -0,0 +1,83 @@ + + + + + + + + + + + +

        Unit Tests for contextmenu.js

        +

        +

        +
          +
        + + + diff --git a/test/draw_test.html b/test/draw_test.html new file mode 100644 index 0000000..f104a18 --- /dev/null +++ b/test/draw_test.html @@ -0,0 +1,539 @@ + + + + + + + + + + + + +

        Unit Tests for draw.js

        +

        +

        +
          +
        + + + diff --git a/test/history_test.html b/test/history_test.html new file mode 100644 index 0000000..15bc3b1 --- /dev/null +++ b/test/history_test.html @@ -0,0 +1,591 @@ + + + + + + + + + + +

        Unit Tests for history.js

        +

        +

        +
          +
        + + + + + diff --git a/test/math_test.html b/test/math_test.html new file mode 100644 index 0000000..408f5c8 --- /dev/null +++ b/test/math_test.html @@ -0,0 +1,114 @@ + + + + + + + + + + +

        Unit Tests for math.js

        +

        +

        +
          +
        + + diff --git a/test/path_test.html b/test/path_test.html new file mode 100644 index 0000000..6d5872b --- /dev/null +++ b/test/path_test.html @@ -0,0 +1,29 @@ + + + + + + + + + + +

        Unit Tests for path.js

        +

        +

        +
          +
        + + + diff --git a/test/qunit/.svn/all-wcprops b/test/qunit/.svn/all-wcprops new file mode 100644 index 0000000..5103760 --- /dev/null +++ b/test/qunit/.svn/all-wcprops @@ -0,0 +1,17 @@ +K 25 +svn:wc:ra_dav:version-url +V 35 +/svn/!svn/ver/1964/trunk/test/qunit +END +qunit.css +K 25 +svn:wc:ra_dav:version-url +V 45 +/svn/!svn/ver/1964/trunk/test/qunit/qunit.css +END +qunit.js +K 25 +svn:wc:ra_dav:version-url +V 44 +/svn/!svn/ver/1964/trunk/test/qunit/qunit.js +END diff --git a/test/qunit/.svn/entries b/test/qunit/.svn/entries new file mode 100644 index 0000000..048e842 --- /dev/null +++ b/test/qunit/.svn/entries @@ -0,0 +1,96 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/test/qunit +http://svg-edit.googlecode.com/svn + + + +2011-02-01T15:36:45.401935Z +1964 +codedread + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +qunit.css +file + + + + +2012-03-23T10:41:56.000000Z +6ca31b5073ab8275bf0c7966eeffee2d +2011-02-01T15:36:45.401935Z +1964 +codedread +has-props + + + + + + + + + + + + + + + + + + + + +3952 + +qunit.js +file + + + + +2012-03-23T10:41:56.000000Z +fd30c40d442c752c888d830bce0ceb89 +2011-02-01T15:36:45.401935Z +1964 +codedread + + + + + + + + + + + + + + + + + + + + + +37057 + diff --git a/test/qunit/.svn/prop-base/qunit.css.svn-base b/test/qunit/.svn/prop-base/qunit.css.svn-base new file mode 100644 index 0000000..69cd899 --- /dev/null +++ b/test/qunit/.svn/prop-base/qunit.css.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 8 +text/css +END diff --git a/test/qunit/.svn/text-base/qunit.css.svn-base b/test/qunit/.svn/text-base/qunit.css.svn-base new file mode 100644 index 0000000..a6a831c --- /dev/null +++ b/test/qunit/.svn/text-base/qunit.css.svn-base @@ -0,0 +1,197 @@ +/** Font Family and Sizes */ + +#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { + font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; +} + +#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } +#qunit-tests { font-size: smaller; } + + +/** Resets */ + +#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { + margin: 0; + padding: 0; +} + + +/** Header */ + +#qunit-header { + padding: 0.5em 0 0.5em 1em; + + color: #8699a4; + background-color: #0d3349; + + font-size: 1.5em; + line-height: 1em; + font-weight: normal; + + border-radius: 15px 15px 0 0; + -moz-border-radius: 15px 15px 0 0; + -webkit-border-top-right-radius: 15px; + -webkit-border-top-left-radius: 15px; +} + +#qunit-header a { + text-decoration: none; + color: #c2ccd1; +} + +#qunit-header a:hover, +#qunit-header a:focus { + color: #fff; +} + +#qunit-banner { + height: 5px; +} + +#qunit-testrunner-toolbar { + padding: 0.5em 0 0.5em 2em; + color: #5E740B; + background-color: #eee; +} + +#qunit-userAgent { + padding: 0.5em 0 0.5em 2.5em; + background-color: #2b81af; + color: #fff; + text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; +} + + +/** Tests: Pass/Fail */ + +#qunit-tests { + list-style-position: inside; +} + +#qunit-tests li { + padding: 0.4em 0.5em 0.4em 2.5em; + border-bottom: 1px solid #fff; + list-style-position: inside; +} + +#qunit-tests li strong { + cursor: pointer; +} + +#qunit-tests ol { + margin-top: 0.5em; + padding: 0.5em; + + background-color: #fff; + + border-radius: 15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + + box-shadow: inset 0px 2px 13px #999; + -moz-box-shadow: inset 0px 2px 13px #999; + -webkit-box-shadow: inset 0px 2px 13px #999; +} + +#qunit-tests table { + border-collapse: collapse; + margin-top: .2em; +} + +#qunit-tests th { + text-align: right; + vertical-align: top; + padding: 0 .5em 0 0; +} + +#qunit-tests td { + vertical-align: top; +} + +#qunit-tests pre { + margin: 0; + white-space: pre-wrap; + word-wrap: break-word; +} + +#qunit-tests del { + background-color: #e0f2be; + color: #374e0c; + text-decoration: none; +} + +#qunit-tests ins { + background-color: #ffcaca; + color: #500; + text-decoration: none; +} + +/*** Test Counts */ + +#qunit-tests b.counts { color: black; } +#qunit-tests b.passed { color: #5E740B; } +#qunit-tests b.failed { color: #710909; } + +#qunit-tests li li { + margin: 0.5em; + padding: 0.4em 0.5em 0.4em 0.5em; + background-color: #fff; + border-bottom: none; + list-style-position: inside; +} + +/*** Passing Styles */ + +#qunit-tests li li.pass { + color: #5E740B; + background-color: #fff; + border-left: 26px solid #C6E746; +} + +#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } +#qunit-tests .pass .test-name { color: #366097; } + +#qunit-tests .pass .test-actual, +#qunit-tests .pass .test-expected { color: #999999; } + +#qunit-banner.qunit-pass { background-color: #C6E746; } + +/*** Failing Styles */ + +#qunit-tests li li.fail { + color: #710909; + background-color: #fff; + border-left: 26px solid #EE5757; +} + +#qunit-tests .fail { color: #000000; background-color: #EE5757; } +#qunit-tests .fail .test-name, +#qunit-tests .fail .module-name { color: #000000; } + +#qunit-tests .fail .test-actual { color: #EE5757; } +#qunit-tests .fail .test-expected { color: green; } + +#qunit-banner.qunit-fail { background-color: #EE5757; } + + +/** Footer */ + +#qunit-testresult { + padding: 0.5em 0.5em 0.5em 2.5em; + + color: #2b81af; + background-color: #D2E0E6; + + border-radius: 0 0 15px 15px; + -moz-border-radius: 0 0 15px 15px; + -webkit-border-bottom-right-radius: 15px; + -webkit-border-bottom-left-radius: 15px; +} + +/** Fixture */ + +#qunit-fixture { + position: absolute; + top: -10000px; + left: -10000px; +} diff --git a/test/qunit/.svn/text-base/qunit.js.svn-base b/test/qunit/.svn/text-base/qunit.js.svn-base new file mode 100644 index 0000000..30e0395 --- /dev/null +++ b/test/qunit/.svn/text-base/qunit.js.svn-base @@ -0,0 +1,1415 @@ +/* + * QUnit - A JavaScript Unit Testing Framework + * + * http://docs.jquery.com/QUnit + * + * Copyright (c) 2011 John Resig, Jörn Zaefferer + * Dual licensed under the MIT (MIT-LICENSE.txt) + * or GPL (GPL-LICENSE.txt) licenses. + */ + +(function(window) { + +var defined = { + setTimeout: typeof window.setTimeout !== "undefined", + sessionStorage: (function() { + try { + return !!sessionStorage.getItem; + } catch(e){ + return false; + } + })() +} + +var testId = 0; + +var Test = function(name, testName, expected, testEnvironmentArg, async, callback) { + this.name = name; + this.testName = testName; + this.expected = expected; + this.testEnvironmentArg = testEnvironmentArg; + this.async = async; + this.callback = callback; + this.assertions = []; +}; +Test.prototype = { + init: function() { + var tests = id("qunit-tests"); + if (tests) { + var b = document.createElement("strong"); + b.innerHTML = "Running " + this.name; + var li = document.createElement("li"); + li.appendChild( b ); + li.id = this.id = "test-output" + testId++; + tests.appendChild( li ); + } + }, + setup: function() { + if (this.module != config.previousModule) { + if ( config.previousModule ) { + QUnit.moduleDone( { + name: config.previousModule, + failed: config.moduleStats.bad, + passed: config.moduleStats.all - config.moduleStats.bad, + total: config.moduleStats.all + } ); + } + config.previousModule = this.module; + config.moduleStats = { all: 0, bad: 0 }; + QUnit.moduleStart( { + name: this.module + } ); + } + + config.current = this; + this.testEnvironment = extend({ + setup: function() {}, + teardown: function() {} + }, this.moduleTestEnvironment); + if (this.testEnvironmentArg) { + extend(this.testEnvironment, this.testEnvironmentArg); + } + + QUnit.testStart( { + name: this.testName + } ); + + // allow utility functions to access the current test environment + // TODO why?? + QUnit.current_testEnvironment = this.testEnvironment; + + try { + if ( !config.pollution ) { + saveGlobal(); + } + + this.testEnvironment.setup.call(this.testEnvironment); + } catch(e) { + QUnit.ok( false, "Setup failed on " + this.testName + ": " + e.message ); + } + }, + run: function() { + if ( this.async ) { + QUnit.stop(); + } + + if ( config.notrycatch ) { + this.callback.call(this.testEnvironment); + return; + } + try { + this.callback.call(this.testEnvironment); + } catch(e) { + fail("Test " + this.testName + " died, exception and test follows", e, this.callback); + QUnit.ok( false, "Died on test #" + (this.assertions.length + 1) + ": " + e.message + " - " + QUnit.jsDump.parse(e) ); + // else next test will carry the responsibility + saveGlobal(); + + // Restart the tests if they're blocking + if ( config.blocking ) { + start(); + } + } + }, + teardown: function() { + try { + checkPollution(); + this.testEnvironment.teardown.call(this.testEnvironment); + } catch(e) { + QUnit.ok( false, "Teardown failed on " + this.testName + ": " + e.message ); + } + }, + finish: function() { + if ( this.expected && this.expected != this.assertions.length ) { + QUnit.ok( false, "Expected " + this.expected + " assertions, but " + this.assertions.length + " were run" ); + } + + var good = 0, bad = 0, + tests = id("qunit-tests"); + + config.stats.all += this.assertions.length; + config.moduleStats.all += this.assertions.length; + + if ( tests ) { + var ol = document.createElement("ol"); + + for ( var i = 0; i < this.assertions.length; i++ ) { + var assertion = this.assertions[i]; + + var li = document.createElement("li"); + li.className = assertion.result ? "pass" : "fail"; + li.innerHTML = assertion.message || (assertion.result ? "okay" : "failed"); + ol.appendChild( li ); + + if ( assertion.result ) { + good++; + } else { + bad++; + config.stats.bad++; + config.moduleStats.bad++; + } + } + + // store result when possible + defined.sessionStorage && sessionStorage.setItem("qunit-" + this.testName, bad); + + if (bad == 0) { + ol.style.display = "none"; + } + + var b = document.createElement("strong"); + b.innerHTML = this.name + " (" + bad + ", " + good + ", " + this.assertions.length + ")"; + + addEvent(b, "click", function() { + var next = b.nextSibling, display = next.style.display; + next.style.display = display === "none" ? "block" : "none"; + }); + + addEvent(b, "dblclick", function(e) { + var target = e && e.target ? e.target : window.event.srcElement; + if ( target.nodeName.toLowerCase() == "span" || target.nodeName.toLowerCase() == "b" ) { + target = target.parentNode; + } + if ( window.location && target.nodeName.toLowerCase() === "strong" ) { + window.location.search = "?" + encodeURIComponent(getText([target]).replace(/\(.+\)$/, "").replace(/(^\s*|\s*$)/g, "")); + } + }); + + var li = id(this.id); + li.className = bad ? "fail" : "pass"; + li.style.display = resultDisplayStyle(!bad); + li.removeChild( li.firstChild ); + li.appendChild( b ); + li.appendChild( ol ); + + } else { + for ( var i = 0; i < this.assertions.length; i++ ) { + if ( !this.assertions[i].result ) { + bad++; + config.stats.bad++; + config.moduleStats.bad++; + } + } + } + + try { + QUnit.reset(); + } catch(e) { + fail("reset() failed, following Test " + this.testName + ", exception and reset fn follows", e, QUnit.reset); + } + + QUnit.testDone( { + name: this.testName, + failed: bad, + passed: this.assertions.length - bad, + total: this.assertions.length + } ); + }, + + queue: function() { + var test = this; + synchronize(function() { + test.init(); + }); + function run() { + // each of these can by async + synchronize(function() { + test.setup(); + }); + synchronize(function() { + test.run(); + }); + synchronize(function() { + test.teardown(); + }); + synchronize(function() { + test.finish(); + }); + } + // defer when previous test run passed, if storage is available + var bad = defined.sessionStorage && +sessionStorage.getItem("qunit-" + this.testName); + if (bad) { + run(); + } else { + synchronize(run); + }; + } + +} + +var QUnit = { + + // call on start of module test to prepend name to all tests + module: function(name, testEnvironment) { + config.currentModule = name; + config.currentModuleTestEnviroment = testEnvironment; + }, + + asyncTest: function(testName, expected, callback) { + if ( arguments.length === 2 ) { + callback = expected; + expected = 0; + } + + QUnit.test(testName, expected, callback, true); + }, + + test: function(testName, expected, callback, async) { + var name = '' + testName + '', testEnvironmentArg; + + if ( arguments.length === 2 ) { + callback = expected; + expected = null; + } + // is 2nd argument a testEnvironment? + if ( expected && typeof expected === 'object') { + testEnvironmentArg = expected; + expected = null; + } + + if ( config.currentModule ) { + name = '' + config.currentModule + ": " + name; + } + + if ( !validTest(config.currentModule + ": " + testName) ) { + return; + } + + var test = new Test(name, testName, expected, testEnvironmentArg, async, callback); + test.module = config.currentModule; + test.moduleTestEnvironment = config.currentModuleTestEnviroment; + test.queue(); + }, + + /** + * Specify the number of expected assertions to gurantee that failed test (no assertions are run at all) don't slip through. + */ + expect: function(asserts) { + config.current.expected = asserts; + }, + + /** + * Asserts true. + * @example ok( "asdfasdf".length > 5, "There must be at least 5 chars" ); + */ + ok: function(a, msg) { + a = !!a; + var details = { + result: a, + message: msg + }; + msg = escapeHtml(msg); + QUnit.log(details); + config.current.assertions.push({ + result: a, + message: msg + }); + }, + + /** + * Checks that the first two arguments are equal, with an optional message. + * Prints out both actual and expected values. + * + * Prefered to ok( actual == expected, message ) + * + * @example equal( format("Received {0} bytes.", 2), "Received 2 bytes." ); + * + * @param Object actual + * @param Object expected + * @param String message (optional) + */ + equal: function(actual, expected, message) { + QUnit.push(expected == actual, actual, expected, message); + }, + + notEqual: function(actual, expected, message) { + QUnit.push(expected != actual, actual, expected, message); + }, + + deepEqual: function(actual, expected, message) { + QUnit.push(QUnit.equiv(actual, expected), actual, expected, message); + }, + + notDeepEqual: function(actual, expected, message) { + QUnit.push(!QUnit.equiv(actual, expected), actual, expected, message); + }, + + strictEqual: function(actual, expected, message) { + QUnit.push(expected === actual, actual, expected, message); + }, + + notStrictEqual: function(actual, expected, message) { + QUnit.push(expected !== actual, actual, expected, message); + }, + + raises: function(block, expected, message) { + var actual, ok = false; + + if (typeof expected === 'string') { + message = expected; + expected = null; + } + + try { + block(); + } catch (e) { + actual = e; + } + + if (actual) { + // we don't want to validate thrown error + if (!expected) { + ok = true; + // expected is a regexp + } else if (QUnit.objectType(expected) === "regexp") { + ok = expected.test(actual); + // expected is a constructor + } else if (actual instanceof expected) { + ok = true; + // expected is a validation function which returns true is validation passed + } else if (expected.call({}, actual) === true) { + ok = true; + } + } + + QUnit.ok(ok, message); + }, + + start: function() { + config.semaphore--; + if (config.semaphore > 0) { + // don't start until equal number of stop-calls + return; + } + if (config.semaphore < 0) { + // ignore if start is called more often then stop + config.semaphore = 0; + } + // A slight delay, to avoid any current callbacks + if ( defined.setTimeout ) { + window.setTimeout(function() { + if ( config.timeout ) { + clearTimeout(config.timeout); + } + + config.blocking = false; + process(); + }, 13); + } else { + config.blocking = false; + process(); + } + }, + + stop: function(timeout) { + config.semaphore++; + config.blocking = true; + + if ( timeout && defined.setTimeout ) { + clearTimeout(config.timeout); + config.timeout = window.setTimeout(function() { + QUnit.ok( false, "Test timed out" ); + QUnit.start(); + }, timeout); + } + } + +}; + +// Backwards compatibility, deprecated +QUnit.equals = QUnit.equal; +QUnit.same = QUnit.deepEqual; + +// Maintain internal state +var config = { + // The queue of tests to run + queue: [], + + // block until document ready + blocking: true +}; + +// Load paramaters +(function() { + var location = window.location || { search: "", protocol: "file:" }, + GETParams = location.search.slice(1).split('&'); + + for ( var i = 0; i < GETParams.length; i++ ) { + GETParams[i] = decodeURIComponent( GETParams[i] ); + if ( GETParams[i] === "noglobals" ) { + GETParams.splice( i, 1 ); + i--; + config.noglobals = true; + } else if ( GETParams[i] === "notrycatch" ) { + GETParams.splice( i, 1 ); + i--; + config.notrycatch = true; + } else if ( GETParams[i].search('=') > -1 ) { + GETParams.splice( i, 1 ); + i--; + } + } + + // restrict modules/tests by get parameters + config.filters = GETParams; + + // Figure out if we're running the tests from a server or not + QUnit.isLocal = !!(location.protocol === 'file:'); +})(); + +// Expose the API as global variables, unless an 'exports' +// object exists, in that case we assume we're in CommonJS +if ( typeof exports === "undefined" || typeof require === "undefined" ) { + extend(window, QUnit); + window.QUnit = QUnit; +} else { + extend(exports, QUnit); + exports.QUnit = QUnit; +} + +// define these after exposing globals to keep them in these QUnit namespace only +extend(QUnit, { + config: config, + + // Initialize the configuration options + init: function() { + extend(config, { + stats: { all: 0, bad: 0 }, + moduleStats: { all: 0, bad: 0 }, + started: +new Date, + updateRate: 1000, + blocking: false, + autostart: true, + autorun: false, + filters: [], + queue: [], + semaphore: 0 + }); + + var tests = id("qunit-tests"), + banner = id("qunit-banner"), + result = id("qunit-testresult"); + + if ( tests ) { + tests.innerHTML = ""; + } + + if ( banner ) { + banner.className = ""; + } + + if ( result ) { + result.parentNode.removeChild( result ); + } + }, + + /** + * Resets the test setup. Useful for tests that modify the DOM. + * + * If jQuery is available, uses jQuery's html(), otherwise just innerHTML. + */ + reset: function() { + if ( window.jQuery ) { + jQuery( "#main, #qunit-fixture" ).html( config.fixture ); + } else { + var main = id( 'main' ) || id( 'qunit-fixture' ); + if ( main ) { + main.innerHTML = config.fixture; + } + } + }, + + /** + * Trigger an event on an element. + * + * @example triggerEvent( document.body, "click" ); + * + * @param DOMElement elem + * @param String type + */ + triggerEvent: function( elem, type, event ) { + if ( document.createEvent ) { + event = document.createEvent("MouseEvents"); + event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + elem.dispatchEvent( event ); + + } else if ( elem.fireEvent ) { + elem.fireEvent("on"+type); + } + }, + + // Safe object type checking + is: function( type, obj ) { + return QUnit.objectType( obj ) == type; + }, + + objectType: function( obj ) { + if (typeof obj === "undefined") { + return "undefined"; + + // consider: typeof null === object + } + if (obj === null) { + return "null"; + } + + var type = Object.prototype.toString.call( obj ) + .match(/^\[object\s(.*)\]$/)[1] || ''; + + switch (type) { + case 'Number': + if (isNaN(obj)) { + return "nan"; + } else { + return "number"; + } + case 'String': + case 'Boolean': + case 'Array': + case 'Date': + case 'RegExp': + case 'Function': + return type.toLowerCase(); + } + if (typeof obj === "object") { + return "object"; + } + return undefined; + }, + + push: function(result, actual, expected, message) { + var details = { + result: result, + message: message, + actual: actual, + expected: expected + }; + + message = escapeHtml(message) || (result ? "okay" : "failed"); + message = '' + message + ""; + expected = escapeHtml(QUnit.jsDump.parse(expected)); + actual = escapeHtml(QUnit.jsDump.parse(actual)); + var output = message + ''; + if (actual != expected) { + output += ''; + output += ''; + } + if (!result) { + var source = sourceFromStacktrace(); + if (source) { + details.source = source; + output += ''; + } + } + output += "
        Expected: 
        ' + expected + '
        Result: 
        ' + actual + '
        Diff: 
        ' + QUnit.diff(expected, actual) +'
        Source: 
        ' + source +'
        "; + + QUnit.log(details); + + config.current.assertions.push({ + result: !!result, + message: output + }); + }, + + // Logging callbacks; all receive a single argument with the listed properties + // run test/logs.html for any related changes + begin: function() {}, + // done: { failed, passed, total, runtime } + done: function() {}, + // log: { result, actual, expected, message } + log: function() {}, + // testStart: { name } + testStart: function() {}, + // testDone: { name, failed, passed, total } + testDone: function() {}, + // moduleStart: { name } + moduleStart: function() {}, + // moduleDone: { name, failed, passed, total } + moduleDone: function() {} +}); + +if ( typeof document === "undefined" || document.readyState === "complete" ) { + config.autorun = true; +} + +addEvent(window, "load", function() { + QUnit.begin({}); + + // Initialize the config, saving the execution queue + var oldconfig = extend({}, config); + QUnit.init(); + extend(config, oldconfig); + + config.blocking = false; + + var userAgent = id("qunit-userAgent"); + if ( userAgent ) { + userAgent.innerHTML = navigator.userAgent; + } + var banner = id("qunit-header"); + if ( banner ) { + var paramsIndex = location.href.lastIndexOf(location.search); + if ( paramsIndex > -1 ) { + var mainPageLocation = location.href.slice(0, paramsIndex); + if ( mainPageLocation == location.href ) { + banner.innerHTML = ' ' + banner.innerHTML + ' '; + } else { + var testName = decodeURIComponent(location.search.slice(1)); + banner.innerHTML = '' + banner.innerHTML + ' › ' + testName + ''; + } + } + } + + var toolbar = id("qunit-testrunner-toolbar"); + if ( toolbar ) { + var filter = document.createElement("input"); + filter.type = "checkbox"; + filter.id = "qunit-filter-pass"; + addEvent( filter, "click", function() { + var li = document.getElementsByTagName("li"); + for ( var i = 0; i < li.length; i++ ) { + if ( li[i].className.indexOf("pass") > -1 ) { + li[i].style.display = filter.checked ? "none" : ""; + } + } + if ( defined.sessionStorage ) { + sessionStorage.setItem("qunit-filter-passed-tests", filter.checked ? "true" : ""); + } + }); + if ( defined.sessionStorage && sessionStorage.getItem("qunit-filter-passed-tests") ) { + filter.checked = true; + } + toolbar.appendChild( filter ); + + var label = document.createElement("label"); + label.setAttribute("for", "qunit-filter-pass"); + label.innerHTML = "Hide passed tests"; + toolbar.appendChild( label ); + } + + var main = id('main') || id('qunit-fixture'); + if ( main ) { + config.fixture = main.innerHTML; + } + + if (config.autostart) { + QUnit.start(); + } +}); + +function done() { + config.autorun = true; + + // Log the last module results + if ( config.currentModule ) { + QUnit.moduleDone( { + name: config.currentModule, + failed: config.moduleStats.bad, + passed: config.moduleStats.all - config.moduleStats.bad, + total: config.moduleStats.all + } ); + } + + var banner = id("qunit-banner"), + tests = id("qunit-tests"), + runtime = +new Date - config.started, + passed = config.stats.all - config.stats.bad, + html = [ + 'Tests completed in ', + runtime, + ' milliseconds.
        ', + '', + passed, + ' tests of ', + config.stats.all, + ' passed, ', + config.stats.bad, + ' failed.' + ].join(''); + + if ( banner ) { + banner.className = (config.stats.bad ? "qunit-fail" : "qunit-pass"); + } + + if ( tests ) { + var result = id("qunit-testresult"); + + if ( !result ) { + result = document.createElement("p"); + result.id = "qunit-testresult"; + result.className = "result"; + tests.parentNode.insertBefore( result, tests.nextSibling ); + } + + result.innerHTML = html; + } + + QUnit.done( { + failed: config.stats.bad, + passed: passed, + total: config.stats.all, + runtime: runtime + } ); +} + +function validTest( name ) { + var i = config.filters.length, + run = false; + + if ( !i ) { + return true; + } + + while ( i-- ) { + var filter = config.filters[i], + not = filter.charAt(0) == '!'; + + if ( not ) { + filter = filter.slice(1); + } + + if ( name.indexOf(filter) !== -1 ) { + return !not; + } + + if ( not ) { + run = true; + } + } + + return run; +} + +// so far supports only Firefox, Chrome and Opera (buggy) +// could be extended in the future to use something like https://github.com/csnover/TraceKit +function sourceFromStacktrace() { + try { + throw new Error(); + } catch ( e ) { + if (e.stacktrace) { + // Opera + return e.stacktrace.split("\n")[6]; + } else if (e.stack) { + // Firefox, Chrome + return e.stack.split("\n")[4]; + } + } +} + +function resultDisplayStyle(passed) { + return passed && id("qunit-filter-pass") && id("qunit-filter-pass").checked ? 'none' : ''; +} + +function escapeHtml(s) { + if (!s) { + return ""; + } + s = s + ""; + return s.replace(/[\&"<>\\]/g, function(s) { + switch(s) { + case "&": return "&"; + case "\\": return "\\\\"; + case '"': return '\"'; + case "<": return "<"; + case ">": return ">"; + default: return s; + } + }); +} + +function synchronize( callback ) { + config.queue.push( callback ); + + if ( config.autorun && !config.blocking ) { + process(); + } +} + +function process() { + var start = (new Date()).getTime(); + + while ( config.queue.length && !config.blocking ) { + if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) { + config.queue.shift()(); + } else { + window.setTimeout( process, 13 ); + break; + } + } + if (!config.blocking && !config.queue.length) { + done(); + } +} + +function saveGlobal() { + config.pollution = []; + + if ( config.noglobals ) { + for ( var key in window ) { + config.pollution.push( key ); + } + } +} + +function checkPollution( name ) { + var old = config.pollution; + saveGlobal(); + + var newGlobals = diff( old, config.pollution ); + if ( newGlobals.length > 0 ) { + ok( false, "Introduced global variable(s): " + newGlobals.join(", ") ); + config.current.expected++; + } + + var deletedGlobals = diff( config.pollution, old ); + if ( deletedGlobals.length > 0 ) { + ok( false, "Deleted global variable(s): " + deletedGlobals.join(", ") ); + config.current.expected++; + } +} + +// returns a new Array with the elements that are in a but not in b +function diff( a, b ) { + var result = a.slice(); + for ( var i = 0; i < result.length; i++ ) { + for ( var j = 0; j < b.length; j++ ) { + if ( result[i] === b[j] ) { + result.splice(i, 1); + i--; + break; + } + } + } + return result; +} + +function fail(message, exception, callback) { + if ( typeof console !== "undefined" && console.error && console.warn ) { + console.error(message); + console.error(exception); + console.warn(callback.toString()); + + } else if ( window.opera && opera.postError ) { + opera.postError(message, exception, callback.toString); + } +} + +function extend(a, b) { + for ( var prop in b ) { + a[prop] = b[prop]; + } + + return a; +} + +function addEvent(elem, type, fn) { + if ( elem.addEventListener ) { + elem.addEventListener( type, fn, false ); + } else if ( elem.attachEvent ) { + elem.attachEvent( "on" + type, fn ); + } else { + fn(); + } +} + +function id(name) { + return !!(typeof document !== "undefined" && document && document.getElementById) && + document.getElementById( name ); +} + +// Test for equality any JavaScript type. +// Discussions and reference: http://philrathe.com/articles/equiv +// Test suites: http://philrathe.com/tests/equiv +// Author: Philippe Rathé +QUnit.equiv = function () { + + var innerEquiv; // the real equiv function + var callers = []; // stack to decide between skip/abort functions + var parents = []; // stack to avoiding loops from circular referencing + + // Call the o related callback with the given arguments. + function bindCallbacks(o, callbacks, args) { + var prop = QUnit.objectType(o); + if (prop) { + if (QUnit.objectType(callbacks[prop]) === "function") { + return callbacks[prop].apply(callbacks, args); + } else { + return callbacks[prop]; // or undefined + } + } + } + + var callbacks = function () { + + // for string, boolean, number and null + function useStrictEquality(b, a) { + if (b instanceof a.constructor || a instanceof b.constructor) { + // to catch short annotaion VS 'new' annotation of a declaration + // e.g. var i = 1; + // var j = new Number(1); + return a == b; + } else { + return a === b; + } + } + + return { + "string": useStrictEquality, + "boolean": useStrictEquality, + "number": useStrictEquality, + "null": useStrictEquality, + "undefined": useStrictEquality, + + "nan": function (b) { + return isNaN(b); + }, + + "date": function (b, a) { + return QUnit.objectType(b) === "date" && a.valueOf() === b.valueOf(); + }, + + "regexp": function (b, a) { + return QUnit.objectType(b) === "regexp" && + a.source === b.source && // the regex itself + a.global === b.global && // and its modifers (gmi) ... + a.ignoreCase === b.ignoreCase && + a.multiline === b.multiline; + }, + + // - skip when the property is a method of an instance (OOP) + // - abort otherwise, + // initial === would have catch identical references anyway + "function": function () { + var caller = callers[callers.length - 1]; + return caller !== Object && + typeof caller !== "undefined"; + }, + + "array": function (b, a) { + var i, j, loop; + var len; + + // b could be an object literal here + if ( ! (QUnit.objectType(b) === "array")) { + return false; + } + + len = a.length; + if (len !== b.length) { // safe and faster + return false; + } + + //track reference to avoid circular references + parents.push(a); + for (i = 0; i < len; i++) { + loop = false; + for(j=0;j= 0) { + type = "array"; + } else { + type = typeof obj; + } + return type; + }, + separator:function() { + return this.multiline ? this.HTML ? '
        ' : '\n' : this.HTML ? ' ' : ' '; + }, + indent:function( extra ) {// extra can be a number, shortcut for increasing-calling-decreasing + if ( !this.multiline ) + return ''; + var chr = this.indentChar; + if ( this.HTML ) + chr = chr.replace(/\t/g,' ').replace(/ /g,' '); + return Array( this._depth_ + (extra||0) ).join(chr); + }, + up:function( a ) { + this._depth_ += a || 1; + }, + down:function( a ) { + this._depth_ -= a || 1; + }, + setParser:function( name, parser ) { + this.parsers[name] = parser; + }, + // The next 3 are exposed so you can use them + quote:quote, + literal:literal, + join:join, + // + _depth_: 1, + // This is the list of parsers, to modify them, use jsDump.setParser + parsers:{ + window: '[Window]', + document: '[Document]', + error:'[ERROR]', //when no parser is found, shouldn't happen + unknown: '[Unknown]', + 'null':'null', + undefined:'undefined', + 'function':function( fn ) { + var ret = 'function', + name = 'name' in fn ? fn.name : (reName.exec(fn)||[])[1];//functions never have name in IE + if ( name ) + ret += ' ' + name; + ret += '('; + + ret = [ ret, QUnit.jsDump.parse( fn, 'functionArgs' ), '){'].join(''); + return join( ret, QUnit.jsDump.parse(fn,'functionCode'), '}' ); + }, + array: array, + nodelist: array, + arguments: array, + object:function( map ) { + var ret = [ ]; + QUnit.jsDump.up(); + for ( var key in map ) + ret.push( QUnit.jsDump.parse(key,'key') + ': ' + QUnit.jsDump.parse(map[key]) ); + QUnit.jsDump.down(); + return join( '{', ret, '}' ); + }, + node:function( node ) { + var open = QUnit.jsDump.HTML ? '<' : '<', + close = QUnit.jsDump.HTML ? '>' : '>'; + + var tag = node.nodeName.toLowerCase(), + ret = open + tag; + + for ( var a in QUnit.jsDump.DOMAttrs ) { + var val = node[QUnit.jsDump.DOMAttrs[a]]; + if ( val ) + ret += ' ' + a + '=' + QUnit.jsDump.parse( val, 'attribute' ); + } + return ret + close + open + '/' + tag + close; + }, + functionArgs:function( fn ) {//function calls it internally, it's the arguments part of the function + var l = fn.length; + if ( !l ) return ''; + + var args = Array(l); + while ( l-- ) + args[l] = String.fromCharCode(97+l);//97 is 'a' + return ' ' + args.join(', ') + ' '; + }, + key:quote, //object calls it internally, the key part of an item in a map + functionCode:'[code]', //function calls it internally, it's the content of the function + attribute:quote, //node calls it internally, it's an html attribute value + string:quote, + date:quote, + regexp:literal, //regex + number:literal, + 'boolean':literal + }, + DOMAttrs:{//attributes to dump from nodes, name=>realName + id:'id', + name:'name', + 'class':'className' + }, + HTML:false,//if true, entities are escaped ( <, >, \t, space and \n ) + indentChar:' ',//indentation unit + multiline:true //if true, items in a collection, are separated by a \n, else just a space. + }; + + return jsDump; +})(); + +// from Sizzle.js +function getText( elems ) { + var ret = "", elem; + + for ( var i = 0; elems[i]; i++ ) { + elem = elems[i]; + + // Get the text from text nodes and CDATA nodes + if ( elem.nodeType === 3 || elem.nodeType === 4 ) { + ret += elem.nodeValue; + + // Traverse everything else, except comment nodes + } else if ( elem.nodeType !== 8 ) { + ret += getText( elem.childNodes ); + } + } + + return ret; +}; + +/* + * Javascript Diff Algorithm + * By John Resig (http://ejohn.org/) + * Modified by Chu Alan "sprite" + * + * Released under the MIT license. + * + * More Info: + * http://ejohn.org/projects/javascript-diff-algorithm/ + * + * Usage: QUnit.diff(expected, actual) + * + * QUnit.diff("the quick brown fox jumped over", "the quick fox jumps over") == "the quick brown fox jumped jumps over" + */ +QUnit.diff = (function() { + function diff(o, n){ + var ns = new Object(); + var os = new Object(); + + for (var i = 0; i < n.length; i++) { + if (ns[n[i]] == null) + ns[n[i]] = { + rows: new Array(), + o: null + }; + ns[n[i]].rows.push(i); + } + + for (var i = 0; i < o.length; i++) { + if (os[o[i]] == null) + os[o[i]] = { + rows: new Array(), + n: null + }; + os[o[i]].rows.push(i); + } + + for (var i in ns) { + if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) { + n[ns[i].rows[0]] = { + text: n[ns[i].rows[0]], + row: os[i].rows[0] + }; + o[os[i].rows[0]] = { + text: o[os[i].rows[0]], + row: ns[i].rows[0] + }; + } + } + + for (var i = 0; i < n.length - 1; i++) { + if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null && + n[i + 1] == o[n[i].row + 1]) { + n[i + 1] = { + text: n[i + 1], + row: n[i].row + 1 + }; + o[n[i].row + 1] = { + text: o[n[i].row + 1], + row: i + 1 + }; + } + } + + for (var i = n.length - 1; i > 0; i--) { + if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[n[i].row - 1].text == null && + n[i - 1] == o[n[i].row - 1]) { + n[i - 1] = { + text: n[i - 1], + row: n[i].row - 1 + }; + o[n[i].row - 1] = { + text: o[n[i].row - 1], + row: i - 1 + }; + } + } + + return { + o: o, + n: n + }; + } + + return function(o, n){ + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/)); + + var str = ""; + + var oSpace = o.match(/\s+/g); + if (oSpace == null) { + oSpace = [" "]; + } + else { + oSpace.push(" "); + } + var nSpace = n.match(/\s+/g); + if (nSpace == null) { + nSpace = [" "]; + } + else { + nSpace.push(" "); + } + + if (out.n.length == 0) { + for (var i = 0; i < out.o.length; i++) { + str += '' + out.o[i] + oSpace[i] + ""; + } + } + else { + if (out.n[0].text == null) { + for (n = 0; n < out.o.length && out.o[n].text == null; n++) { + str += '' + out.o[n] + oSpace[n] + ""; + } + } + + for (var i = 0; i < out.n.length; i++) { + if (out.n[i].text == null) { + str += '' + out.n[i] + nSpace[i] + ""; + } + else { + var pre = ""; + + for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) { + pre += '' + out.o[n] + oSpace[n] + ""; + } + str += " " + out.n[i].text + nSpace[i] + pre; + } + } + } + + return str; + }; +})(); + +})(this); diff --git a/test/qunit/qunit.css b/test/qunit/qunit.css new file mode 100644 index 0000000..a6a831c --- /dev/null +++ b/test/qunit/qunit.css @@ -0,0 +1,197 @@ +/** Font Family and Sizes */ + +#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { + font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; +} + +#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } +#qunit-tests { font-size: smaller; } + + +/** Resets */ + +#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { + margin: 0; + padding: 0; +} + + +/** Header */ + +#qunit-header { + padding: 0.5em 0 0.5em 1em; + + color: #8699a4; + background-color: #0d3349; + + font-size: 1.5em; + line-height: 1em; + font-weight: normal; + + border-radius: 15px 15px 0 0; + -moz-border-radius: 15px 15px 0 0; + -webkit-border-top-right-radius: 15px; + -webkit-border-top-left-radius: 15px; +} + +#qunit-header a { + text-decoration: none; + color: #c2ccd1; +} + +#qunit-header a:hover, +#qunit-header a:focus { + color: #fff; +} + +#qunit-banner { + height: 5px; +} + +#qunit-testrunner-toolbar { + padding: 0.5em 0 0.5em 2em; + color: #5E740B; + background-color: #eee; +} + +#qunit-userAgent { + padding: 0.5em 0 0.5em 2.5em; + background-color: #2b81af; + color: #fff; + text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; +} + + +/** Tests: Pass/Fail */ + +#qunit-tests { + list-style-position: inside; +} + +#qunit-tests li { + padding: 0.4em 0.5em 0.4em 2.5em; + border-bottom: 1px solid #fff; + list-style-position: inside; +} + +#qunit-tests li strong { + cursor: pointer; +} + +#qunit-tests ol { + margin-top: 0.5em; + padding: 0.5em; + + background-color: #fff; + + border-radius: 15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + + box-shadow: inset 0px 2px 13px #999; + -moz-box-shadow: inset 0px 2px 13px #999; + -webkit-box-shadow: inset 0px 2px 13px #999; +} + +#qunit-tests table { + border-collapse: collapse; + margin-top: .2em; +} + +#qunit-tests th { + text-align: right; + vertical-align: top; + padding: 0 .5em 0 0; +} + +#qunit-tests td { + vertical-align: top; +} + +#qunit-tests pre { + margin: 0; + white-space: pre-wrap; + word-wrap: break-word; +} + +#qunit-tests del { + background-color: #e0f2be; + color: #374e0c; + text-decoration: none; +} + +#qunit-tests ins { + background-color: #ffcaca; + color: #500; + text-decoration: none; +} + +/*** Test Counts */ + +#qunit-tests b.counts { color: black; } +#qunit-tests b.passed { color: #5E740B; } +#qunit-tests b.failed { color: #710909; } + +#qunit-tests li li { + margin: 0.5em; + padding: 0.4em 0.5em 0.4em 0.5em; + background-color: #fff; + border-bottom: none; + list-style-position: inside; +} + +/*** Passing Styles */ + +#qunit-tests li li.pass { + color: #5E740B; + background-color: #fff; + border-left: 26px solid #C6E746; +} + +#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } +#qunit-tests .pass .test-name { color: #366097; } + +#qunit-tests .pass .test-actual, +#qunit-tests .pass .test-expected { color: #999999; } + +#qunit-banner.qunit-pass { background-color: #C6E746; } + +/*** Failing Styles */ + +#qunit-tests li li.fail { + color: #710909; + background-color: #fff; + border-left: 26px solid #EE5757; +} + +#qunit-tests .fail { color: #000000; background-color: #EE5757; } +#qunit-tests .fail .test-name, +#qunit-tests .fail .module-name { color: #000000; } + +#qunit-tests .fail .test-actual { color: #EE5757; } +#qunit-tests .fail .test-expected { color: green; } + +#qunit-banner.qunit-fail { background-color: #EE5757; } + + +/** Footer */ + +#qunit-testresult { + padding: 0.5em 0.5em 0.5em 2.5em; + + color: #2b81af; + background-color: #D2E0E6; + + border-radius: 0 0 15px 15px; + -moz-border-radius: 0 0 15px 15px; + -webkit-border-bottom-right-radius: 15px; + -webkit-border-bottom-left-radius: 15px; +} + +/** Fixture */ + +#qunit-fixture { + position: absolute; + top: -10000px; + left: -10000px; +} diff --git a/test/qunit/qunit.js b/test/qunit/qunit.js new file mode 100644 index 0000000..30e0395 --- /dev/null +++ b/test/qunit/qunit.js @@ -0,0 +1,1415 @@ +/* + * QUnit - A JavaScript Unit Testing Framework + * + * http://docs.jquery.com/QUnit + * + * Copyright (c) 2011 John Resig, Jörn Zaefferer + * Dual licensed under the MIT (MIT-LICENSE.txt) + * or GPL (GPL-LICENSE.txt) licenses. + */ + +(function(window) { + +var defined = { + setTimeout: typeof window.setTimeout !== "undefined", + sessionStorage: (function() { + try { + return !!sessionStorage.getItem; + } catch(e){ + return false; + } + })() +} + +var testId = 0; + +var Test = function(name, testName, expected, testEnvironmentArg, async, callback) { + this.name = name; + this.testName = testName; + this.expected = expected; + this.testEnvironmentArg = testEnvironmentArg; + this.async = async; + this.callback = callback; + this.assertions = []; +}; +Test.prototype = { + init: function() { + var tests = id("qunit-tests"); + if (tests) { + var b = document.createElement("strong"); + b.innerHTML = "Running " + this.name; + var li = document.createElement("li"); + li.appendChild( b ); + li.id = this.id = "test-output" + testId++; + tests.appendChild( li ); + } + }, + setup: function() { + if (this.module != config.previousModule) { + if ( config.previousModule ) { + QUnit.moduleDone( { + name: config.previousModule, + failed: config.moduleStats.bad, + passed: config.moduleStats.all - config.moduleStats.bad, + total: config.moduleStats.all + } ); + } + config.previousModule = this.module; + config.moduleStats = { all: 0, bad: 0 }; + QUnit.moduleStart( { + name: this.module + } ); + } + + config.current = this; + this.testEnvironment = extend({ + setup: function() {}, + teardown: function() {} + }, this.moduleTestEnvironment); + if (this.testEnvironmentArg) { + extend(this.testEnvironment, this.testEnvironmentArg); + } + + QUnit.testStart( { + name: this.testName + } ); + + // allow utility functions to access the current test environment + // TODO why?? + QUnit.current_testEnvironment = this.testEnvironment; + + try { + if ( !config.pollution ) { + saveGlobal(); + } + + this.testEnvironment.setup.call(this.testEnvironment); + } catch(e) { + QUnit.ok( false, "Setup failed on " + this.testName + ": " + e.message ); + } + }, + run: function() { + if ( this.async ) { + QUnit.stop(); + } + + if ( config.notrycatch ) { + this.callback.call(this.testEnvironment); + return; + } + try { + this.callback.call(this.testEnvironment); + } catch(e) { + fail("Test " + this.testName + " died, exception and test follows", e, this.callback); + QUnit.ok( false, "Died on test #" + (this.assertions.length + 1) + ": " + e.message + " - " + QUnit.jsDump.parse(e) ); + // else next test will carry the responsibility + saveGlobal(); + + // Restart the tests if they're blocking + if ( config.blocking ) { + start(); + } + } + }, + teardown: function() { + try { + checkPollution(); + this.testEnvironment.teardown.call(this.testEnvironment); + } catch(e) { + QUnit.ok( false, "Teardown failed on " + this.testName + ": " + e.message ); + } + }, + finish: function() { + if ( this.expected && this.expected != this.assertions.length ) { + QUnit.ok( false, "Expected " + this.expected + " assertions, but " + this.assertions.length + " were run" ); + } + + var good = 0, bad = 0, + tests = id("qunit-tests"); + + config.stats.all += this.assertions.length; + config.moduleStats.all += this.assertions.length; + + if ( tests ) { + var ol = document.createElement("ol"); + + for ( var i = 0; i < this.assertions.length; i++ ) { + var assertion = this.assertions[i]; + + var li = document.createElement("li"); + li.className = assertion.result ? "pass" : "fail"; + li.innerHTML = assertion.message || (assertion.result ? "okay" : "failed"); + ol.appendChild( li ); + + if ( assertion.result ) { + good++; + } else { + bad++; + config.stats.bad++; + config.moduleStats.bad++; + } + } + + // store result when possible + defined.sessionStorage && sessionStorage.setItem("qunit-" + this.testName, bad); + + if (bad == 0) { + ol.style.display = "none"; + } + + var b = document.createElement("strong"); + b.innerHTML = this.name + " (" + bad + ", " + good + ", " + this.assertions.length + ")"; + + addEvent(b, "click", function() { + var next = b.nextSibling, display = next.style.display; + next.style.display = display === "none" ? "block" : "none"; + }); + + addEvent(b, "dblclick", function(e) { + var target = e && e.target ? e.target : window.event.srcElement; + if ( target.nodeName.toLowerCase() == "span" || target.nodeName.toLowerCase() == "b" ) { + target = target.parentNode; + } + if ( window.location && target.nodeName.toLowerCase() === "strong" ) { + window.location.search = "?" + encodeURIComponent(getText([target]).replace(/\(.+\)$/, "").replace(/(^\s*|\s*$)/g, "")); + } + }); + + var li = id(this.id); + li.className = bad ? "fail" : "pass"; + li.style.display = resultDisplayStyle(!bad); + li.removeChild( li.firstChild ); + li.appendChild( b ); + li.appendChild( ol ); + + } else { + for ( var i = 0; i < this.assertions.length; i++ ) { + if ( !this.assertions[i].result ) { + bad++; + config.stats.bad++; + config.moduleStats.bad++; + } + } + } + + try { + QUnit.reset(); + } catch(e) { + fail("reset() failed, following Test " + this.testName + ", exception and reset fn follows", e, QUnit.reset); + } + + QUnit.testDone( { + name: this.testName, + failed: bad, + passed: this.assertions.length - bad, + total: this.assertions.length + } ); + }, + + queue: function() { + var test = this; + synchronize(function() { + test.init(); + }); + function run() { + // each of these can by async + synchronize(function() { + test.setup(); + }); + synchronize(function() { + test.run(); + }); + synchronize(function() { + test.teardown(); + }); + synchronize(function() { + test.finish(); + }); + } + // defer when previous test run passed, if storage is available + var bad = defined.sessionStorage && +sessionStorage.getItem("qunit-" + this.testName); + if (bad) { + run(); + } else { + synchronize(run); + }; + } + +} + +var QUnit = { + + // call on start of module test to prepend name to all tests + module: function(name, testEnvironment) { + config.currentModule = name; + config.currentModuleTestEnviroment = testEnvironment; + }, + + asyncTest: function(testName, expected, callback) { + if ( arguments.length === 2 ) { + callback = expected; + expected = 0; + } + + QUnit.test(testName, expected, callback, true); + }, + + test: function(testName, expected, callback, async) { + var name = '' + testName + '', testEnvironmentArg; + + if ( arguments.length === 2 ) { + callback = expected; + expected = null; + } + // is 2nd argument a testEnvironment? + if ( expected && typeof expected === 'object') { + testEnvironmentArg = expected; + expected = null; + } + + if ( config.currentModule ) { + name = '' + config.currentModule + ": " + name; + } + + if ( !validTest(config.currentModule + ": " + testName) ) { + return; + } + + var test = new Test(name, testName, expected, testEnvironmentArg, async, callback); + test.module = config.currentModule; + test.moduleTestEnvironment = config.currentModuleTestEnviroment; + test.queue(); + }, + + /** + * Specify the number of expected assertions to gurantee that failed test (no assertions are run at all) don't slip through. + */ + expect: function(asserts) { + config.current.expected = asserts; + }, + + /** + * Asserts true. + * @example ok( "asdfasdf".length > 5, "There must be at least 5 chars" ); + */ + ok: function(a, msg) { + a = !!a; + var details = { + result: a, + message: msg + }; + msg = escapeHtml(msg); + QUnit.log(details); + config.current.assertions.push({ + result: a, + message: msg + }); + }, + + /** + * Checks that the first two arguments are equal, with an optional message. + * Prints out both actual and expected values. + * + * Prefered to ok( actual == expected, message ) + * + * @example equal( format("Received {0} bytes.", 2), "Received 2 bytes." ); + * + * @param Object actual + * @param Object expected + * @param String message (optional) + */ + equal: function(actual, expected, message) { + QUnit.push(expected == actual, actual, expected, message); + }, + + notEqual: function(actual, expected, message) { + QUnit.push(expected != actual, actual, expected, message); + }, + + deepEqual: function(actual, expected, message) { + QUnit.push(QUnit.equiv(actual, expected), actual, expected, message); + }, + + notDeepEqual: function(actual, expected, message) { + QUnit.push(!QUnit.equiv(actual, expected), actual, expected, message); + }, + + strictEqual: function(actual, expected, message) { + QUnit.push(expected === actual, actual, expected, message); + }, + + notStrictEqual: function(actual, expected, message) { + QUnit.push(expected !== actual, actual, expected, message); + }, + + raises: function(block, expected, message) { + var actual, ok = false; + + if (typeof expected === 'string') { + message = expected; + expected = null; + } + + try { + block(); + } catch (e) { + actual = e; + } + + if (actual) { + // we don't want to validate thrown error + if (!expected) { + ok = true; + // expected is a regexp + } else if (QUnit.objectType(expected) === "regexp") { + ok = expected.test(actual); + // expected is a constructor + } else if (actual instanceof expected) { + ok = true; + // expected is a validation function which returns true is validation passed + } else if (expected.call({}, actual) === true) { + ok = true; + } + } + + QUnit.ok(ok, message); + }, + + start: function() { + config.semaphore--; + if (config.semaphore > 0) { + // don't start until equal number of stop-calls + return; + } + if (config.semaphore < 0) { + // ignore if start is called more often then stop + config.semaphore = 0; + } + // A slight delay, to avoid any current callbacks + if ( defined.setTimeout ) { + window.setTimeout(function() { + if ( config.timeout ) { + clearTimeout(config.timeout); + } + + config.blocking = false; + process(); + }, 13); + } else { + config.blocking = false; + process(); + } + }, + + stop: function(timeout) { + config.semaphore++; + config.blocking = true; + + if ( timeout && defined.setTimeout ) { + clearTimeout(config.timeout); + config.timeout = window.setTimeout(function() { + QUnit.ok( false, "Test timed out" ); + QUnit.start(); + }, timeout); + } + } + +}; + +// Backwards compatibility, deprecated +QUnit.equals = QUnit.equal; +QUnit.same = QUnit.deepEqual; + +// Maintain internal state +var config = { + // The queue of tests to run + queue: [], + + // block until document ready + blocking: true +}; + +// Load paramaters +(function() { + var location = window.location || { search: "", protocol: "file:" }, + GETParams = location.search.slice(1).split('&'); + + for ( var i = 0; i < GETParams.length; i++ ) { + GETParams[i] = decodeURIComponent( GETParams[i] ); + if ( GETParams[i] === "noglobals" ) { + GETParams.splice( i, 1 ); + i--; + config.noglobals = true; + } else if ( GETParams[i] === "notrycatch" ) { + GETParams.splice( i, 1 ); + i--; + config.notrycatch = true; + } else if ( GETParams[i].search('=') > -1 ) { + GETParams.splice( i, 1 ); + i--; + } + } + + // restrict modules/tests by get parameters + config.filters = GETParams; + + // Figure out if we're running the tests from a server or not + QUnit.isLocal = !!(location.protocol === 'file:'); +})(); + +// Expose the API as global variables, unless an 'exports' +// object exists, in that case we assume we're in CommonJS +if ( typeof exports === "undefined" || typeof require === "undefined" ) { + extend(window, QUnit); + window.QUnit = QUnit; +} else { + extend(exports, QUnit); + exports.QUnit = QUnit; +} + +// define these after exposing globals to keep them in these QUnit namespace only +extend(QUnit, { + config: config, + + // Initialize the configuration options + init: function() { + extend(config, { + stats: { all: 0, bad: 0 }, + moduleStats: { all: 0, bad: 0 }, + started: +new Date, + updateRate: 1000, + blocking: false, + autostart: true, + autorun: false, + filters: [], + queue: [], + semaphore: 0 + }); + + var tests = id("qunit-tests"), + banner = id("qunit-banner"), + result = id("qunit-testresult"); + + if ( tests ) { + tests.innerHTML = ""; + } + + if ( banner ) { + banner.className = ""; + } + + if ( result ) { + result.parentNode.removeChild( result ); + } + }, + + /** + * Resets the test setup. Useful for tests that modify the DOM. + * + * If jQuery is available, uses jQuery's html(), otherwise just innerHTML. + */ + reset: function() { + if ( window.jQuery ) { + jQuery( "#main, #qunit-fixture" ).html( config.fixture ); + } else { + var main = id( 'main' ) || id( 'qunit-fixture' ); + if ( main ) { + main.innerHTML = config.fixture; + } + } + }, + + /** + * Trigger an event on an element. + * + * @example triggerEvent( document.body, "click" ); + * + * @param DOMElement elem + * @param String type + */ + triggerEvent: function( elem, type, event ) { + if ( document.createEvent ) { + event = document.createEvent("MouseEvents"); + event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + elem.dispatchEvent( event ); + + } else if ( elem.fireEvent ) { + elem.fireEvent("on"+type); + } + }, + + // Safe object type checking + is: function( type, obj ) { + return QUnit.objectType( obj ) == type; + }, + + objectType: function( obj ) { + if (typeof obj === "undefined") { + return "undefined"; + + // consider: typeof null === object + } + if (obj === null) { + return "null"; + } + + var type = Object.prototype.toString.call( obj ) + .match(/^\[object\s(.*)\]$/)[1] || ''; + + switch (type) { + case 'Number': + if (isNaN(obj)) { + return "nan"; + } else { + return "number"; + } + case 'String': + case 'Boolean': + case 'Array': + case 'Date': + case 'RegExp': + case 'Function': + return type.toLowerCase(); + } + if (typeof obj === "object") { + return "object"; + } + return undefined; + }, + + push: function(result, actual, expected, message) { + var details = { + result: result, + message: message, + actual: actual, + expected: expected + }; + + message = escapeHtml(message) || (result ? "okay" : "failed"); + message = '' + message + ""; + expected = escapeHtml(QUnit.jsDump.parse(expected)); + actual = escapeHtml(QUnit.jsDump.parse(actual)); + var output = message + ''; + if (actual != expected) { + output += ''; + output += ''; + } + if (!result) { + var source = sourceFromStacktrace(); + if (source) { + details.source = source; + output += ''; + } + } + output += "
        Expected: 
        ' + expected + '
        Result: 
        ' + actual + '
        Diff: 
        ' + QUnit.diff(expected, actual) +'
        Source: 
        ' + source +'
        "; + + QUnit.log(details); + + config.current.assertions.push({ + result: !!result, + message: output + }); + }, + + // Logging callbacks; all receive a single argument with the listed properties + // run test/logs.html for any related changes + begin: function() {}, + // done: { failed, passed, total, runtime } + done: function() {}, + // log: { result, actual, expected, message } + log: function() {}, + // testStart: { name } + testStart: function() {}, + // testDone: { name, failed, passed, total } + testDone: function() {}, + // moduleStart: { name } + moduleStart: function() {}, + // moduleDone: { name, failed, passed, total } + moduleDone: function() {} +}); + +if ( typeof document === "undefined" || document.readyState === "complete" ) { + config.autorun = true; +} + +addEvent(window, "load", function() { + QUnit.begin({}); + + // Initialize the config, saving the execution queue + var oldconfig = extend({}, config); + QUnit.init(); + extend(config, oldconfig); + + config.blocking = false; + + var userAgent = id("qunit-userAgent"); + if ( userAgent ) { + userAgent.innerHTML = navigator.userAgent; + } + var banner = id("qunit-header"); + if ( banner ) { + var paramsIndex = location.href.lastIndexOf(location.search); + if ( paramsIndex > -1 ) { + var mainPageLocation = location.href.slice(0, paramsIndex); + if ( mainPageLocation == location.href ) { + banner.innerHTML = ' ' + banner.innerHTML + ' '; + } else { + var testName = decodeURIComponent(location.search.slice(1)); + banner.innerHTML = '' + banner.innerHTML + ' › ' + testName + ''; + } + } + } + + var toolbar = id("qunit-testrunner-toolbar"); + if ( toolbar ) { + var filter = document.createElement("input"); + filter.type = "checkbox"; + filter.id = "qunit-filter-pass"; + addEvent( filter, "click", function() { + var li = document.getElementsByTagName("li"); + for ( var i = 0; i < li.length; i++ ) { + if ( li[i].className.indexOf("pass") > -1 ) { + li[i].style.display = filter.checked ? "none" : ""; + } + } + if ( defined.sessionStorage ) { + sessionStorage.setItem("qunit-filter-passed-tests", filter.checked ? "true" : ""); + } + }); + if ( defined.sessionStorage && sessionStorage.getItem("qunit-filter-passed-tests") ) { + filter.checked = true; + } + toolbar.appendChild( filter ); + + var label = document.createElement("label"); + label.setAttribute("for", "qunit-filter-pass"); + label.innerHTML = "Hide passed tests"; + toolbar.appendChild( label ); + } + + var main = id('main') || id('qunit-fixture'); + if ( main ) { + config.fixture = main.innerHTML; + } + + if (config.autostart) { + QUnit.start(); + } +}); + +function done() { + config.autorun = true; + + // Log the last module results + if ( config.currentModule ) { + QUnit.moduleDone( { + name: config.currentModule, + failed: config.moduleStats.bad, + passed: config.moduleStats.all - config.moduleStats.bad, + total: config.moduleStats.all + } ); + } + + var banner = id("qunit-banner"), + tests = id("qunit-tests"), + runtime = +new Date - config.started, + passed = config.stats.all - config.stats.bad, + html = [ + 'Tests completed in ', + runtime, + ' milliseconds.
        ', + '', + passed, + ' tests of ', + config.stats.all, + ' passed, ', + config.stats.bad, + ' failed.' + ].join(''); + + if ( banner ) { + banner.className = (config.stats.bad ? "qunit-fail" : "qunit-pass"); + } + + if ( tests ) { + var result = id("qunit-testresult"); + + if ( !result ) { + result = document.createElement("p"); + result.id = "qunit-testresult"; + result.className = "result"; + tests.parentNode.insertBefore( result, tests.nextSibling ); + } + + result.innerHTML = html; + } + + QUnit.done( { + failed: config.stats.bad, + passed: passed, + total: config.stats.all, + runtime: runtime + } ); +} + +function validTest( name ) { + var i = config.filters.length, + run = false; + + if ( !i ) { + return true; + } + + while ( i-- ) { + var filter = config.filters[i], + not = filter.charAt(0) == '!'; + + if ( not ) { + filter = filter.slice(1); + } + + if ( name.indexOf(filter) !== -1 ) { + return !not; + } + + if ( not ) { + run = true; + } + } + + return run; +} + +// so far supports only Firefox, Chrome and Opera (buggy) +// could be extended in the future to use something like https://github.com/csnover/TraceKit +function sourceFromStacktrace() { + try { + throw new Error(); + } catch ( e ) { + if (e.stacktrace) { + // Opera + return e.stacktrace.split("\n")[6]; + } else if (e.stack) { + // Firefox, Chrome + return e.stack.split("\n")[4]; + } + } +} + +function resultDisplayStyle(passed) { + return passed && id("qunit-filter-pass") && id("qunit-filter-pass").checked ? 'none' : ''; +} + +function escapeHtml(s) { + if (!s) { + return ""; + } + s = s + ""; + return s.replace(/[\&"<>\\]/g, function(s) { + switch(s) { + case "&": return "&"; + case "\\": return "\\\\"; + case '"': return '\"'; + case "<": return "<"; + case ">": return ">"; + default: return s; + } + }); +} + +function synchronize( callback ) { + config.queue.push( callback ); + + if ( config.autorun && !config.blocking ) { + process(); + } +} + +function process() { + var start = (new Date()).getTime(); + + while ( config.queue.length && !config.blocking ) { + if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) { + config.queue.shift()(); + } else { + window.setTimeout( process, 13 ); + break; + } + } + if (!config.blocking && !config.queue.length) { + done(); + } +} + +function saveGlobal() { + config.pollution = []; + + if ( config.noglobals ) { + for ( var key in window ) { + config.pollution.push( key ); + } + } +} + +function checkPollution( name ) { + var old = config.pollution; + saveGlobal(); + + var newGlobals = diff( old, config.pollution ); + if ( newGlobals.length > 0 ) { + ok( false, "Introduced global variable(s): " + newGlobals.join(", ") ); + config.current.expected++; + } + + var deletedGlobals = diff( config.pollution, old ); + if ( deletedGlobals.length > 0 ) { + ok( false, "Deleted global variable(s): " + deletedGlobals.join(", ") ); + config.current.expected++; + } +} + +// returns a new Array with the elements that are in a but not in b +function diff( a, b ) { + var result = a.slice(); + for ( var i = 0; i < result.length; i++ ) { + for ( var j = 0; j < b.length; j++ ) { + if ( result[i] === b[j] ) { + result.splice(i, 1); + i--; + break; + } + } + } + return result; +} + +function fail(message, exception, callback) { + if ( typeof console !== "undefined" && console.error && console.warn ) { + console.error(message); + console.error(exception); + console.warn(callback.toString()); + + } else if ( window.opera && opera.postError ) { + opera.postError(message, exception, callback.toString); + } +} + +function extend(a, b) { + for ( var prop in b ) { + a[prop] = b[prop]; + } + + return a; +} + +function addEvent(elem, type, fn) { + if ( elem.addEventListener ) { + elem.addEventListener( type, fn, false ); + } else if ( elem.attachEvent ) { + elem.attachEvent( "on" + type, fn ); + } else { + fn(); + } +} + +function id(name) { + return !!(typeof document !== "undefined" && document && document.getElementById) && + document.getElementById( name ); +} + +// Test for equality any JavaScript type. +// Discussions and reference: http://philrathe.com/articles/equiv +// Test suites: http://philrathe.com/tests/equiv +// Author: Philippe Rathé +QUnit.equiv = function () { + + var innerEquiv; // the real equiv function + var callers = []; // stack to decide between skip/abort functions + var parents = []; // stack to avoiding loops from circular referencing + + // Call the o related callback with the given arguments. + function bindCallbacks(o, callbacks, args) { + var prop = QUnit.objectType(o); + if (prop) { + if (QUnit.objectType(callbacks[prop]) === "function") { + return callbacks[prop].apply(callbacks, args); + } else { + return callbacks[prop]; // or undefined + } + } + } + + var callbacks = function () { + + // for string, boolean, number and null + function useStrictEquality(b, a) { + if (b instanceof a.constructor || a instanceof b.constructor) { + // to catch short annotaion VS 'new' annotation of a declaration + // e.g. var i = 1; + // var j = new Number(1); + return a == b; + } else { + return a === b; + } + } + + return { + "string": useStrictEquality, + "boolean": useStrictEquality, + "number": useStrictEquality, + "null": useStrictEquality, + "undefined": useStrictEquality, + + "nan": function (b) { + return isNaN(b); + }, + + "date": function (b, a) { + return QUnit.objectType(b) === "date" && a.valueOf() === b.valueOf(); + }, + + "regexp": function (b, a) { + return QUnit.objectType(b) === "regexp" && + a.source === b.source && // the regex itself + a.global === b.global && // and its modifers (gmi) ... + a.ignoreCase === b.ignoreCase && + a.multiline === b.multiline; + }, + + // - skip when the property is a method of an instance (OOP) + // - abort otherwise, + // initial === would have catch identical references anyway + "function": function () { + var caller = callers[callers.length - 1]; + return caller !== Object && + typeof caller !== "undefined"; + }, + + "array": function (b, a) { + var i, j, loop; + var len; + + // b could be an object literal here + if ( ! (QUnit.objectType(b) === "array")) { + return false; + } + + len = a.length; + if (len !== b.length) { // safe and faster + return false; + } + + //track reference to avoid circular references + parents.push(a); + for (i = 0; i < len; i++) { + loop = false; + for(j=0;j= 0) { + type = "array"; + } else { + type = typeof obj; + } + return type; + }, + separator:function() { + return this.multiline ? this.HTML ? '
        ' : '\n' : this.HTML ? ' ' : ' '; + }, + indent:function( extra ) {// extra can be a number, shortcut for increasing-calling-decreasing + if ( !this.multiline ) + return ''; + var chr = this.indentChar; + if ( this.HTML ) + chr = chr.replace(/\t/g,' ').replace(/ /g,' '); + return Array( this._depth_ + (extra||0) ).join(chr); + }, + up:function( a ) { + this._depth_ += a || 1; + }, + down:function( a ) { + this._depth_ -= a || 1; + }, + setParser:function( name, parser ) { + this.parsers[name] = parser; + }, + // The next 3 are exposed so you can use them + quote:quote, + literal:literal, + join:join, + // + _depth_: 1, + // This is the list of parsers, to modify them, use jsDump.setParser + parsers:{ + window: '[Window]', + document: '[Document]', + error:'[ERROR]', //when no parser is found, shouldn't happen + unknown: '[Unknown]', + 'null':'null', + undefined:'undefined', + 'function':function( fn ) { + var ret = 'function', + name = 'name' in fn ? fn.name : (reName.exec(fn)||[])[1];//functions never have name in IE + if ( name ) + ret += ' ' + name; + ret += '('; + + ret = [ ret, QUnit.jsDump.parse( fn, 'functionArgs' ), '){'].join(''); + return join( ret, QUnit.jsDump.parse(fn,'functionCode'), '}' ); + }, + array: array, + nodelist: array, + arguments: array, + object:function( map ) { + var ret = [ ]; + QUnit.jsDump.up(); + for ( var key in map ) + ret.push( QUnit.jsDump.parse(key,'key') + ': ' + QUnit.jsDump.parse(map[key]) ); + QUnit.jsDump.down(); + return join( '{', ret, '}' ); + }, + node:function( node ) { + var open = QUnit.jsDump.HTML ? '<' : '<', + close = QUnit.jsDump.HTML ? '>' : '>'; + + var tag = node.nodeName.toLowerCase(), + ret = open + tag; + + for ( var a in QUnit.jsDump.DOMAttrs ) { + var val = node[QUnit.jsDump.DOMAttrs[a]]; + if ( val ) + ret += ' ' + a + '=' + QUnit.jsDump.parse( val, 'attribute' ); + } + return ret + close + open + '/' + tag + close; + }, + functionArgs:function( fn ) {//function calls it internally, it's the arguments part of the function + var l = fn.length; + if ( !l ) return ''; + + var args = Array(l); + while ( l-- ) + args[l] = String.fromCharCode(97+l);//97 is 'a' + return ' ' + args.join(', ') + ' '; + }, + key:quote, //object calls it internally, the key part of an item in a map + functionCode:'[code]', //function calls it internally, it's the content of the function + attribute:quote, //node calls it internally, it's an html attribute value + string:quote, + date:quote, + regexp:literal, //regex + number:literal, + 'boolean':literal + }, + DOMAttrs:{//attributes to dump from nodes, name=>realName + id:'id', + name:'name', + 'class':'className' + }, + HTML:false,//if true, entities are escaped ( <, >, \t, space and \n ) + indentChar:' ',//indentation unit + multiline:true //if true, items in a collection, are separated by a \n, else just a space. + }; + + return jsDump; +})(); + +// from Sizzle.js +function getText( elems ) { + var ret = "", elem; + + for ( var i = 0; elems[i]; i++ ) { + elem = elems[i]; + + // Get the text from text nodes and CDATA nodes + if ( elem.nodeType === 3 || elem.nodeType === 4 ) { + ret += elem.nodeValue; + + // Traverse everything else, except comment nodes + } else if ( elem.nodeType !== 8 ) { + ret += getText( elem.childNodes ); + } + } + + return ret; +}; + +/* + * Javascript Diff Algorithm + * By John Resig (http://ejohn.org/) + * Modified by Chu Alan "sprite" + * + * Released under the MIT license. + * + * More Info: + * http://ejohn.org/projects/javascript-diff-algorithm/ + * + * Usage: QUnit.diff(expected, actual) + * + * QUnit.diff("the quick brown fox jumped over", "the quick fox jumps over") == "the quick brown fox jumped jumps over" + */ +QUnit.diff = (function() { + function diff(o, n){ + var ns = new Object(); + var os = new Object(); + + for (var i = 0; i < n.length; i++) { + if (ns[n[i]] == null) + ns[n[i]] = { + rows: new Array(), + o: null + }; + ns[n[i]].rows.push(i); + } + + for (var i = 0; i < o.length; i++) { + if (os[o[i]] == null) + os[o[i]] = { + rows: new Array(), + n: null + }; + os[o[i]].rows.push(i); + } + + for (var i in ns) { + if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) { + n[ns[i].rows[0]] = { + text: n[ns[i].rows[0]], + row: os[i].rows[0] + }; + o[os[i].rows[0]] = { + text: o[os[i].rows[0]], + row: ns[i].rows[0] + }; + } + } + + for (var i = 0; i < n.length - 1; i++) { + if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null && + n[i + 1] == o[n[i].row + 1]) { + n[i + 1] = { + text: n[i + 1], + row: n[i].row + 1 + }; + o[n[i].row + 1] = { + text: o[n[i].row + 1], + row: i + 1 + }; + } + } + + for (var i = n.length - 1; i > 0; i--) { + if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[n[i].row - 1].text == null && + n[i - 1] == o[n[i].row - 1]) { + n[i - 1] = { + text: n[i - 1], + row: n[i].row - 1 + }; + o[n[i].row - 1] = { + text: o[n[i].row - 1], + row: i - 1 + }; + } + } + + return { + o: o, + n: n + }; + } + + return function(o, n){ + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/)); + + var str = ""; + + var oSpace = o.match(/\s+/g); + if (oSpace == null) { + oSpace = [" "]; + } + else { + oSpace.push(" "); + } + var nSpace = n.match(/\s+/g); + if (nSpace == null) { + nSpace = [" "]; + } + else { + nSpace.push(" "); + } + + if (out.n.length == 0) { + for (var i = 0; i < out.o.length; i++) { + str += '' + out.o[i] + oSpace[i] + ""; + } + } + else { + if (out.n[0].text == null) { + for (n = 0; n < out.o.length && out.o[n].text == null; n++) { + str += '' + out.o[n] + oSpace[n] + ""; + } + } + + for (var i = 0; i < out.n.length; i++) { + if (out.n[i].text == null) { + str += '' + out.n[i] + nSpace[i] + ""; + } + else { + var pre = ""; + + for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) { + pre += '' + out.o[n] + oSpace[n] + ""; + } + str += " " + out.n[i].text + nSpace[i] + pre; + } + } + } + + return str; + }; +})(); + +})(this); diff --git a/test/select_test.html b/test/select_test.html new file mode 100644 index 0000000..e10a093 --- /dev/null +++ b/test/select_test.html @@ -0,0 +1,152 @@ + + + + + + + + + + + + + +

        Unit Tests for select.js

        +

        +

        +
          +
        +
        + + diff --git a/test/svgtransformlist_test.html b/test/svgtransformlist_test.html new file mode 100644 index 0000000..df697cf --- /dev/null +++ b/test/svgtransformlist_test.html @@ -0,0 +1,418 @@ + + + + + + + + + + + +

        Unit Tests for svgtransformlist.js

        +

        +

        +
          +
        + + + diff --git a/test/svgutils_test.html b/test/svgutils_test.html new file mode 100644 index 0000000..b04a07f --- /dev/null +++ b/test/svgutils_test.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + +

        Unit Tests for svgutils.js

        +

        +

        +
          +
        + + diff --git a/test/test1.html b/test/test1.html new file mode 100644 index 0000000..33b297b --- /dev/null +++ b/test/test1.html @@ -0,0 +1,283 @@ + + + + + + + + + + + + + + + + + + + + + + + + +

        Unit Tests for SvgCanvas

        +

        +

        +
          +
        +
        +
        + +
        +
        +
        +
        + + \ No newline at end of file diff --git a/test/units_test.html b/test/units_test.html new file mode 100644 index 0000000..ba17415 --- /dev/null +++ b/test/units_test.html @@ -0,0 +1,83 @@ + + + + + + + + + + +

        Unit Tests for units.js

        +

        +

        +
          +
        + + + diff --git a/tspan_move.patch b/tspan_move.patch new file mode 100644 index 0000000..3b1893e --- /dev/null +++ b/tspan_move.patch @@ -0,0 +1,24 @@ +Index: editor/svgcanvas.js +=================================================================== +--- editor/svgcanvas.js (revision 2067) ++++ editor/svgcanvas.js (working copy) +@@ -1227,6 +1227,19 @@ + changes.y2 = pt2.y; + + case "text": ++ var tspan = selected.querySelectorAll('tspan'); ++ var i = tspan.length ++ while(i--) { ++ var offsetX = selected.getAttribute('x') - tspan[i].getAttribute('x'); ++ var offsetY = selected.getAttribute('y') - tspan[i].getAttribute('y'); ++ var offset = { ++ x: changes.x - offsetX, ++ y: changes.y - offsetY, ++ } ++ assignAttributes(tspan[i], offset, 1000, true); ++ } ++ finishUp(); ++ break; + case "use": + finishUp(); + break; diff --git a/wave/.svn/all-wcprops b/wave/.svn/all-wcprops new file mode 100644 index 0000000..090d1aa --- /dev/null +++ b/wave/.svn/all-wcprops @@ -0,0 +1,29 @@ +K 25 +svn:wc:ra_dav:version-url +V 29 +/svn/!svn/ver/1152/trunk/wave +END +svg-edit.xml +K 25 +svn:wc:ra_dav:version-url +V 42 +/svn/!svn/ver/1150/trunk/wave/svg-edit.xml +END +manifest.xml +K 25 +svn:wc:ra_dav:version-url +V 41 +/svn/!svn/ver/523/trunk/wave/manifest.xml +END +json2.js +K 25 +svn:wc:ra_dav:version-url +V 37 +/svn/!svn/ver/523/trunk/wave/json2.js +END +wave.js +K 25 +svn:wc:ra_dav:version-url +V 37 +/svn/!svn/ver/1152/trunk/wave/wave.js +END diff --git a/wave/.svn/entries b/wave/.svn/entries new file mode 100644 index 0000000..9086719 --- /dev/null +++ b/wave/.svn/entries @@ -0,0 +1,164 @@ +10 + +dir +2080 +http://svg-edit.googlecode.com/svn/trunk/wave +http://svg-edit.googlecode.com/svn + + + +2010-01-04T23:23:40.713580Z +1152 +antimatter15 + + + + + + + + + + + + + + +eee81c28-f429-11dd-99c0-75d572ba1ddd + +svg-edit.xml +file + + + + +2012-03-23T10:42:16.000000Z +fcda4189049edff2f665d4817d36ad35 +2010-01-04T23:21:50.510227Z +1150 +antimatter15 +has-props + + + + + + + + + + + + + + + + + + + + +20909 + +manifest.xml +file + + + + +2012-03-23T10:42:16.000000Z +07fa1438094187e90c1d9d70ef672a8c +2009-09-02T16:27:59.451570Z +523 +antimatter15 + + + + + + + + + + + + + + + + + + + + + +301 + +json2.js +file + + + + +2012-03-23T10:42:16.000000Z +8b5970b79549b145296e6ec137eb5edb +2009-09-02T16:27:59.451570Z +523 +antimatter15 + + + + + + + + + + + + + + + + + + + + + +17347 + +wave.js +file + + + + +2012-03-23T10:42:16.000000Z +5f635cc4029d2abcfa1db0fcfe758a6a +2010-01-04T23:23:40.713580Z +1152 +antimatter15 + + + + + + + + + + + + + + + + + + + + + +4648 + diff --git a/wave/.svn/prop-base/svg-edit.xml.svn-base b/wave/.svn/prop-base/svg-edit.xml.svn-base new file mode 100644 index 0000000..bfec7d5 --- /dev/null +++ b/wave/.svn/prop-base/svg-edit.xml.svn-base @@ -0,0 +1,5 @@ +K 13 +svn:mime-type +V 8 +text/xml +END diff --git a/wave/.svn/text-base/json2.js.svn-base b/wave/.svn/text-base/json2.js.svn-base new file mode 100644 index 0000000..8a7793b --- /dev/null +++ b/wave/.svn/text-base/json2.js.svn-base @@ -0,0 +1,481 @@ +/* + http://www.JSON.org/json2.js + 2009-08-17 + + Public Domain. + + NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. + + See http://www.JSON.org/js.html + + This file creates a global JSON object containing two methods: stringify + and parse. + + JSON.stringify(value, replacer, space) + value any JavaScript value, usually an object or array. + + replacer an optional parameter that determines how object + values are stringified for objects. It can be a + function or an array of strings. + + space an optional parameter that specifies the indentation + of nested structures. If it is omitted, the text will + be packed without extra whitespace. If it is a number, + it will specify the number of spaces to indent at each + level. If it is a string (such as '\t' or ' '), + it contains the characters used to indent at each level. + + This method produces a JSON text from a JavaScript value. + + When an object value is found, if the object contains a toJSON + method, its toJSON method will be called and the result will be + stringified. A toJSON method does not serialize: it returns the + value represented by the name/value pair that should be serialized, + or undefined if nothing should be serialized. The toJSON method + will be passed the key associated with the value, and this will be + bound to the value + + For example, this would serialize Dates as ISO strings. + + Date.prototype.toJSON = function (key) { + function f(n) { + // Format integers to have at least two digits. + return n < 10 ? '0' + n : n; + } + + return this.getUTCFullYear() + '-' + + f(this.getUTCMonth() + 1) + '-' + + f(this.getUTCDate()) + 'T' + + f(this.getUTCHours()) + ':' + + f(this.getUTCMinutes()) + ':' + + f(this.getUTCSeconds()) + 'Z'; + }; + + You can provide an optional replacer method. It will be passed the + key and value of each member, with this bound to the containing + object. The value that is returned from your method will be + serialized. If your method returns undefined, then the member will + be excluded from the serialization. + + If the replacer parameter is an array of strings, then it will be + used to select the members to be serialized. It filters the results + such that only members with keys listed in the replacer array are + stringified. + + Values that do not have JSON representations, such as undefined or + functions, will not be serialized. Such values in objects will be + dropped; in arrays they will be replaced with null. You can use + a replacer function to replace those with JSON values. + JSON.stringify(undefined) returns undefined. + + The optional space parameter produces a stringification of the + value that is filled with line breaks and indentation to make it + easier to read. + + If the space parameter is a non-empty string, then that string will + be used for indentation. If the space parameter is a number, then + the indentation will be that many spaces. + + Example: + + text = JSON.stringify(['e', {pluribus: 'unum'}]); + // text is '["e",{"pluribus":"unum"}]' + + + text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t'); + // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]' + + text = JSON.stringify([new Date()], function (key, value) { + return this[key] instanceof Date ? + 'Date(' + this[key] + ')' : value; + }); + // text is '["Date(---current time---)"]' + + + JSON.parse(text, reviver) + This method parses a JSON text to produce an object or array. + It can throw a SyntaxError exception. + + The optional reviver parameter is a function that can filter and + transform the results. It receives each of the keys and values, + and its return value is used instead of the original value. + If it returns what it received, then the structure is not modified. + If it returns undefined then the member is deleted. + + Example: + + // Parse the text. Values that look like ISO date strings will + // be converted to Date objects. + + myData = JSON.parse(text, function (key, value) { + var a; + if (typeof value === 'string') { + a = +/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value); + if (a) { + return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], + +a[5], +a[6])); + } + } + return value; + }); + + myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) { + var d; + if (typeof value === 'string' && + value.slice(0, 5) === 'Date(' && + value.slice(-1) === ')') { + d = new Date(value.slice(5, -1)); + if (d) { + return d; + } + } + return value; + }); + + + This is a reference implementation. You are free to copy, modify, or + redistribute. + + This code should be minified before deployment. + See http://javascript.crockford.com/jsmin.html + + USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO + NOT CONTROL. +*/ + +/*jslint evil: true */ + +/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply, + call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours, + getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join, + lastIndex, length, parse, prototype, push, replace, slice, stringify, + test, toJSON, toString, valueOf +*/ + +"use strict"; + +// Create a JSON object only if one does not already exist. We create the +// methods in a closure to avoid creating global variables. + +if (!this.JSON) { + this.JSON = {}; +} + +(function () { + + function f(n) { + // Format integers to have at least two digits. + return n < 10 ? '0' + n : n; + } + + if (typeof Date.prototype.toJSON !== 'function') { + + Date.prototype.toJSON = function (key) { + + return isFinite(this.valueOf()) ? + this.getUTCFullYear() + '-' + + f(this.getUTCMonth() + 1) + '-' + + f(this.getUTCDate()) + 'T' + + f(this.getUTCHours()) + ':' + + f(this.getUTCMinutes()) + ':' + + f(this.getUTCSeconds()) + 'Z' : null; + }; + + String.prototype.toJSON = + Number.prototype.toJSON = + Boolean.prototype.toJSON = function (key) { + return this.valueOf(); + }; + } + + var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, + escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, + gap, + indent, + meta = { // table of character substitutions + '\b': '\\b', + '\t': '\\t', + '\n': '\\n', + '\f': '\\f', + '\r': '\\r', + '"' : '\\"', + '\\': '\\\\' + }, + rep; + + + function quote(string) { + +// If the string contains no control characters, no quote characters, and no +// backslash characters, then we can safely slap some quotes around it. +// Otherwise we must also replace the offending characters with safe escape +// sequences. + + escapable.lastIndex = 0; + return escapable.test(string) ? + '"' + string.replace(escapable, function (a) { + var c = meta[a]; + return typeof c === 'string' ? c : + '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }) + '"' : + '"' + string + '"'; + } + + + function str(key, holder) { + +// Produce a string from holder[key]. + + var i, // The loop counter. + k, // The member key. + v, // The member value. + length, + mind = gap, + partial, + value = holder[key]; + +// If the value has a toJSON method, call it to obtain a replacement value. + + if (value && typeof value === 'object' && + typeof value.toJSON === 'function') { + value = value.toJSON(key); + } + +// If we were called with a replacer function, then call the replacer to +// obtain a replacement value. + + if (typeof rep === 'function') { + value = rep.call(holder, key, value); + } + +// What happens next depends on the value's type. + + switch (typeof value) { + case 'string': + return quote(value); + + case 'number': + +// JSON numbers must be finite. Encode non-finite numbers as null. + + return isFinite(value) ? String(value) : 'null'; + + case 'boolean': + case 'null': + +// If the value is a boolean or null, convert it to a string. Note: +// typeof null does not produce 'null'. The case is included here in +// the remote chance that this gets fixed someday. + + return String(value); + +// If the type is 'object', we might be dealing with an object or an array or +// null. + + case 'object': + +// Due to a specification blunder in ECMAScript, typeof null is 'object', +// so watch out for that case. + + if (!value) { + return 'null'; + } + +// Make an array to hold the partial results of stringifying this object value. + + gap += indent; + partial = []; + +// Is the value an array? + + if (Object.prototype.toString.apply(value) === '[object Array]') { + +// The value is an array. Stringify every element. Use null as a placeholder +// for non-JSON values. + + length = value.length; + for (i = 0; i < length; i += 1) { + partial[i] = str(i, value) || 'null'; + } + +// Join all of the elements together, separated with commas, and wrap them in +// brackets. + + v = partial.length === 0 ? '[]' : + gap ? '[\n' + gap + + partial.join(',\n' + gap) + '\n' + + mind + ']' : + '[' + partial.join(',') + ']'; + gap = mind; + return v; + } + +// If the replacer is an array, use it to select the members to be stringified. + + if (rep && typeof rep === 'object') { + length = rep.length; + for (i = 0; i < length; i += 1) { + k = rep[i]; + if (typeof k === 'string') { + v = str(k, value); + if (v) { + partial.push(quote(k) + (gap ? ': ' : ':') + v); + } + } + } + } else { + +// Otherwise, iterate through all of the keys in the object. + + for (k in value) { + if (Object.hasOwnProperty.call(value, k)) { + v = str(k, value); + if (v) { + partial.push(quote(k) + (gap ? ': ' : ':') + v); + } + } + } + } + +// Join all of the member texts together, separated with commas, +// and wrap them in braces. + + v = partial.length === 0 ? '{}' : + gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + + mind + '}' : '{' + partial.join(',') + '}'; + gap = mind; + return v; + } + } + +// If the JSON object does not yet have a stringify method, give it one. + + if (typeof JSON.stringify !== 'function') { + JSON.stringify = function (value, replacer, space) { + +// The stringify method takes a value and an optional replacer, and an optional +// space parameter, and returns a JSON text. The replacer can be a function +// that can replace values, or an array of strings that will select the keys. +// A default replacer method can be provided. Use of the space parameter can +// produce text that is more easily readable. + + var i; + gap = ''; + indent = ''; + +// If the space parameter is a number, make an indent string containing that +// many spaces. + + if (typeof space === 'number') { + for (i = 0; i < space; i += 1) { + indent += ' '; + } + +// If the space parameter is a string, it will be used as the indent string. + + } else if (typeof space === 'string') { + indent = space; + } + +// If there is a replacer, it must be a function or an array. +// Otherwise, throw an error. + + rep = replacer; + if (replacer && typeof replacer !== 'function' && + (typeof replacer !== 'object' || + typeof replacer.length !== 'number')) { + throw new Error('JSON.stringify'); + } + +// Make a fake root object containing our value under the key of ''. +// Return the result of stringifying the value. + + return str('', {'': value}); + }; + } + + +// If the JSON object does not yet have a parse method, give it one. + + if (typeof JSON.parse !== 'function') { + JSON.parse = function (text, reviver) { + +// The parse method takes a text and an optional reviver function, and returns +// a JavaScript value if the text is a valid JSON text. + + var j; + + function walk(holder, key) { + +// The walk method is used to recursively walk the resulting structure so +// that modifications can be made. + + var k, v, value = holder[key]; + if (value && typeof value === 'object') { + for (k in value) { + if (Object.hasOwnProperty.call(value, k)) { + v = walk(value, k); + if (v !== undefined) { + value[k] = v; + } else { + delete value[k]; + } + } + } + } + return reviver.call(holder, key, value); + } + + +// Parsing happens in four stages. In the first stage, we replace certain +// Unicode characters with escape sequences. JavaScript handles many characters +// incorrectly, either silently deleting them, or treating them as line endings. + + cx.lastIndex = 0; + if (cx.test(text)) { + text = text.replace(cx, function (a) { + return '\\u' + + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }); + } + +// In the second stage, we run the text against regular expressions that look +// for non-JSON patterns. We are especially concerned with '()' and 'new' +// because they can cause invocation, and '=' because it can cause mutation. +// But just to be safe, we want to reject all unexpected forms. + +// We split the second stage into 4 regexp operations in order to work around +// crippling inefficiencies in IE's and Safari's regexp engines. First we +// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we +// replace all simple value tokens with ']' characters. Third, we delete all +// open brackets that follow a colon or comma or that begin the text. Finally, +// we look to see that the remaining characters are only whitespace or ']' or +// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval. + + if (/^[\],:{}\s]*$/. +test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@'). +replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']'). +replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { + +// In the third stage we use the eval function to compile the text into a +// JavaScript structure. The '{' operator is subject to a syntactic ambiguity +// in JavaScript: it can begin a block or an object literal. We wrap the text +// in parens to eliminate the ambiguity. + + j = eval('(' + text + ')'); + +// In the optional fourth stage, we recursively walk the new structure, passing +// each name/value pair to a reviver function for possible transformation. + + return typeof reviver === 'function' ? + walk({'': j}, '') : j; + } + +// If the text is not JSON parseable, then a SyntaxError is thrown. + + throw new SyntaxError('JSON.parse'); + }; + } +}()); + diff --git a/wave/.svn/text-base/manifest.xml.svn-base b/wave/.svn/text-base/manifest.xml.svn-base new file mode 100644 index 0000000..e85a2b9 --- /dev/null +++ b/wave/.svn/text-base/manifest.xml.svn-base @@ -0,0 +1,7 @@ + + + + + diff --git a/wave/.svn/text-base/svg-edit.xml.svn-base b/wave/.svn/text-base/svg-edit.xml.svn-base new file mode 100644 index 0000000..e16ea7b --- /dev/null +++ b/wave/.svn/text-base/svg-edit.xml.svn-base @@ -0,0 +1,484 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + +
        + +
        +
        + +
        +
        +

        Layers

        +
        +
        +
        +
        +
        +
        +
        + + + + + + +
        Layer 1
        + Move elements to: + +
        +
        L a y e r s
        +
        + + + +
        + + +
        +
        + +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + + + +
        +
        + + +
        +
        + + + + +
        +
        + + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + relative to: + +
        + +
        + +
        +
        +
        +
        + +
        +
        + + + + +
        +
        + + +
        +
        + +
        +
        + + + + +
        +
        + + + +
        +
        +
        + +
        +
        + + + + +
        +
        + + +
        +
        + +
        +
        + + + + +
        +
        + + + + +
        +
        + +
        +
        + + + + +
        +
        + + + + +
        +
        + +
        +
        B
        +
        i
        + +
        + + +
        + +
        + + +
        + +
        + +
        +
        + +
        + + + + + +
        +
        +
        + +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        + + +
        + zoom: + + +
        +
        + +
        + + + + + + + + + + + + +
        fill:
        100%
        stroke:
        100 %
        		 + + + +
        +
        + +
        +
        +
        + +
        + + +
        + +
        +
        +
        +
        +
        + +
        +
        +
        +
        +
        + +
        + +
        +
        +
        +
        + + +
        +
        + +
        +
        +
        + +
        +
        +
        +
        + + +
        + + +
        + Image Properties + + +
        + Canvas Dimensions + + + + + + +
        + +
        + Included Images + + +
        + + +
        + +
        + Editor Preferences + + + + + +
        + Editor Background +
        + +

        Note: Background will not be saved with image.

        +
        + +
        + +
        +
        + +
        +
        +
        +
        + Test message +
        +
        +
        +
        + + ]]> +         +         diff --git a/wave/.svn/text-base/wave.js.svn-base b/wave/.svn/text-base/wave.js.svn-base new file mode 100644 index 0000000..c3723f7 --- /dev/null +++ b/wave/.svn/text-base/wave.js.svn-base @@ -0,0 +1,147 @@ +var shapetime = {}; +var nodelete = false; + +function stateUpdated() { + + // 'state' is an object of key-value pairs that map ids to JSON serialization of SVG elements + // 'keys' is an array of all the keys in the state + var state = wave.getState(); + var keys = state.getKeys(); + svgCanvas.each(function(e) { + // 'this' is the SVG DOM element node (ellipse, rect, etc) + // 'e' is an integer describing the position within the document + var k = this.id; + var v = state.get(k); + if(k == "selectorParentGroup" || k == "svgcontent"){ + //meh + }else if (v) { + var ob = JSON.parse(v); + if (ob) { + // do nothing + } else { + //var node = document.getElementById(k); + //if (node) node.parentNode.removeChild(node); + } + //keys.remove(k); + + } else if(!nodelete){ + + this.parentNode.removeChild(this); + } + }); + + // New nodes + for (var k in keys) { + var v = state.get(keys[k]); + var ob = JSON.parse(v); + if (ob){ + if(!shapetime[k] || ob.time > shapetime[k]){ + var a; + if(a = document.getElementById(k)){ + var attrs = get_attrs(a); + if(JSON.stringify(attrs) != JSON.stringify(ob.attr)){ + shapetime[k] = ob.time + svgCanvas.updateElementFromJson(ob) + } + }else{ + shapetime[k] = ob.time + svgCanvas.updateElementFromJson(ob) + } + + } + } + } +} + + +function getId(canvas, objnum) { + var id = wave.getViewer().getId().split("@")[0]; + var extra = SHA256(wave.getViewer().getId()); //in case the next step kills all the characters + for(var i = 0, l = id.length, n = ""; i < l; i++){ + if("abcdefghijklmnopqrstuvwxyz0123456789".indexOf(id[i]) != -1){ + n+=id[i]; + } + } + return "svg_"+n+"_"+extra.substr(0,5)+"_"+objnum; +} + +function get_attrs(a){ + var attrs = {}; + for(var i = a.length; i--;){ + var attr = a.item(i).nodeName; + if(",style,".indexOf(","+attr+",") == -1){ + attrs[attr] = a.item(i).nodeValue; + } + } + return attrs +} + +function main() { + $(document).ready(function(){ + if (wave && wave.isInWaveContainer()) { + wave.setStateCallback(function(){setTimeout(stateUpdated,10)}); + } + + var oldchanged = svgCanvas.bind("changed", function(canvas, elem){ + if(oldchanged)oldchanged.apply(this, [canvas,elem]); + + var delta = {} + $.each(elem, function(){ + + var attrs = {}; + var a = this.attributes; + if(a){ + var attrs = get_attrs(a) + var ob = {element: this.nodeName, attr: attrs}; + + ob.time = shapetime[this.id] = (new Date).getTime() + delta[this.id] = JSON.stringify(ob); + } + }) + + wave.getState().submitDelta(delta) + //sendDelta(canvas, elem) + + }); + //* + + var oldselected = svgCanvas.bind("selected", function(canvas, elem){ + + if(oldselected)oldselected.apply(this, [canvas,elem]); + + + var delta = {} + var deletions = 0; + $.each(elem, function(){ + if(!this.parentNode && this != window){ + delta[this.id] = null; + deletions ++ + } + }); + if(deletions > 0){ + wave.getState().submitDelta(delta) + } + }); + /// + svgCanvas.bind("cleared", function(){ + //alert("cleared") + var state = {}, keys = wave.getState().getKeys() + for(var i = 0; i < keys.length; i++){ + state[keys[i]] = null; + } + wave.getState().submitDelta(state) + }); + //*/ + svgCanvas.bind("getid", getId); + }) +} + + + +if(window.gadgets) gadgets.util.registerOnLoadHandler(main); + +//$(main) + +//and why not use my stuff? +function SHA256(b){function h(j,k){return(j>>e)+(k>>e)+((p=(j&o)+(k&o))>>e)<>>k|j<<32-k}var g=[],d,c=3,l=[2],p,i,q,a,m=[],n=[];i=b.length*8;for(var e=16,o=65535,r="";c<312;c++){for(d=l.length;d--&&c%l[d]!=0;);d<0&&l.push(c)}b+="\u0080";for(c=0;c<=i;c+=8)n[c>>5]|=(b.charCodeAt(c/8)&255)<<24-c%32;n[(i+64>>9<<4)+15]=i;for(c=8;c--;)m[c]=parseInt(Math.pow(l[c],0.5).toString(e).substr(2,8),e);for(c=0;c>>10,g[b-7]),f(g[b-15],7)^f(g[b-15],18)^g[b-15]>>>3),g[b-e]);i=h(h(h(h(a[7],f(a[4],6)^f(a[4],11)^f(a[4],25)),a[4]&a[5]^~a[4]&a[6]),parseInt(Math.pow(l[b],1/3).toString(e).substr(2,8),e)),g[b]);q=(f(a[0],2)^f(a[0],13)^f(a[0],22))+(a[0]&a[1]^a[0]&a[2]^a[1]&a[2]);for(d=8;--d;)a[d]=d==4?h(a[3],i):a[d-1];a[0]=h(i,q)}for(d=8;d--;)m[d]+=a[d]}for(c=0;c<8;c++)for(b=8;b--;)r+=(m[c]>>>b*4&15).toString(e);return r} + diff --git a/wave/json2.js b/wave/json2.js new file mode 100644 index 0000000..8a7793b --- /dev/null +++ b/wave/json2.js @@ -0,0 +1,481 @@ +/* + http://www.JSON.org/json2.js + 2009-08-17 + + Public Domain. + + NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. + + See http://www.JSON.org/js.html + + This file creates a global JSON object containing two methods: stringify + and parse. + + JSON.stringify(value, replacer, space) + value any JavaScript value, usually an object or array. + + replacer an optional parameter that determines how object + values are stringified for objects. It can be a + function or an array of strings. + + space an optional parameter that specifies the indentation + of nested structures. If it is omitted, the text will + be packed without extra whitespace. If it is a number, + it will specify the number of spaces to indent at each + level. If it is a string (such as '\t' or ' '), + it contains the characters used to indent at each level. + + This method produces a JSON text from a JavaScript value. + + When an object value is found, if the object contains a toJSON + method, its toJSON method will be called and the result will be + stringified. A toJSON method does not serialize: it returns the + value represented by the name/value pair that should be serialized, + or undefined if nothing should be serialized. The toJSON method + will be passed the key associated with the value, and this will be + bound to the value + + For example, this would serialize Dates as ISO strings. + + Date.prototype.toJSON = function (key) { + function f(n) { + // Format integers to have at least two digits. + return n < 10 ? '0' + n : n; + } + + return this.getUTCFullYear() + '-' + + f(this.getUTCMonth() + 1) + '-' + + f(this.getUTCDate()) + 'T' + + f(this.getUTCHours()) + ':' + + f(this.getUTCMinutes()) + ':' + + f(this.getUTCSeconds()) + 'Z'; + }; + + You can provide an optional replacer method. It will be passed the + key and value of each member, with this bound to the containing + object. The value that is returned from your method will be + serialized. If your method returns undefined, then the member will + be excluded from the serialization. + + If the replacer parameter is an array of strings, then it will be + used to select the members to be serialized. It filters the results + such that only members with keys listed in the replacer array are + stringified. + + Values that do not have JSON representations, such as undefined or + functions, will not be serialized. Such values in objects will be + dropped; in arrays they will be replaced with null. You can use + a replacer function to replace those with JSON values. + JSON.stringify(undefined) returns undefined. + + The optional space parameter produces a stringification of the + value that is filled with line breaks and indentation to make it + easier to read. + + If the space parameter is a non-empty string, then that string will + be used for indentation. If the space parameter is a number, then + the indentation will be that many spaces. + + Example: + + text = JSON.stringify(['e', {pluribus: 'unum'}]); + // text is '["e",{"pluribus":"unum"}]' + + + text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t'); + // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]' + + text = JSON.stringify([new Date()], function (key, value) { + return this[key] instanceof Date ? + 'Date(' + this[key] + ')' : value; + }); + // text is '["Date(---current time---)"]' + + + JSON.parse(text, reviver) + This method parses a JSON text to produce an object or array. + It can throw a SyntaxError exception. + + The optional reviver parameter is a function that can filter and + transform the results. It receives each of the keys and values, + and its return value is used instead of the original value. + If it returns what it received, then the structure is not modified. + If it returns undefined then the member is deleted. + + Example: + + // Parse the text. Values that look like ISO date strings will + // be converted to Date objects. + + myData = JSON.parse(text, function (key, value) { + var a; + if (typeof value === 'string') { + a = +/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value); + if (a) { + return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], + +a[5], +a[6])); + } + } + return value; + }); + + myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) { + var d; + if (typeof value === 'string' && + value.slice(0, 5) === 'Date(' && + value.slice(-1) === ')') { + d = new Date(value.slice(5, -1)); + if (d) { + return d; + } + } + return value; + }); + + + This is a reference implementation. You are free to copy, modify, or + redistribute. + + This code should be minified before deployment. + See http://javascript.crockford.com/jsmin.html + + USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO + NOT CONTROL. +*/ + +/*jslint evil: true */ + +/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply, + call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours, + getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join, + lastIndex, length, parse, prototype, push, replace, slice, stringify, + test, toJSON, toString, valueOf +*/ + +"use strict"; + +// Create a JSON object only if one does not already exist. We create the +// methods in a closure to avoid creating global variables. + +if (!this.JSON) { + this.JSON = {}; +} + +(function () { + + function f(n) { + // Format integers to have at least two digits. + return n < 10 ? '0' + n : n; + } + + if (typeof Date.prototype.toJSON !== 'function') { + + Date.prototype.toJSON = function (key) { + + return isFinite(this.valueOf()) ? + this.getUTCFullYear() + '-' + + f(this.getUTCMonth() + 1) + '-' + + f(this.getUTCDate()) + 'T' + + f(this.getUTCHours()) + ':' + + f(this.getUTCMinutes()) + ':' + + f(this.getUTCSeconds()) + 'Z' : null; + }; + + String.prototype.toJSON = + Number.prototype.toJSON = + Boolean.prototype.toJSON = function (key) { + return this.valueOf(); + }; + } + + var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, + escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, + gap, + indent, + meta = { // table of character substitutions + '\b': '\\b', + '\t': '\\t', + '\n': '\\n', + '\f': '\\f', + '\r': '\\r', + '"' : '\\"', + '\\': '\\\\' + }, + rep; + + + function quote(string) { + +// If the string contains no control characters, no quote characters, and no +// backslash characters, then we can safely slap some quotes around it. +// Otherwise we must also replace the offending characters with safe escape +// sequences. + + escapable.lastIndex = 0; + return escapable.test(string) ? + '"' + string.replace(escapable, function (a) { + var c = meta[a]; + return typeof c === 'string' ? c : + '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }) + '"' : + '"' + string + '"'; + } + + + function str(key, holder) { + +// Produce a string from holder[key]. + + var i, // The loop counter. + k, // The member key. + v, // The member value. + length, + mind = gap, + partial, + value = holder[key]; + +// If the value has a toJSON method, call it to obtain a replacement value. + + if (value && typeof value === 'object' && + typeof value.toJSON === 'function') { + value = value.toJSON(key); + } + +// If we were called with a replacer function, then call the replacer to +// obtain a replacement value. + + if (typeof rep === 'function') { + value = rep.call(holder, key, value); + } + +// What happens next depends on the value's type. + + switch (typeof value) { + case 'string': + return quote(value); + + case 'number': + +// JSON numbers must be finite. Encode non-finite numbers as null. + + return isFinite(value) ? String(value) : 'null'; + + case 'boolean': + case 'null': + +// If the value is a boolean or null, convert it to a string. Note: +// typeof null does not produce 'null'. The case is included here in +// the remote chance that this gets fixed someday. + + return String(value); + +// If the type is 'object', we might be dealing with an object or an array or +// null. + + case 'object': + +// Due to a specification blunder in ECMAScript, typeof null is 'object', +// so watch out for that case. + + if (!value) { + return 'null'; + } + +// Make an array to hold the partial results of stringifying this object value. + + gap += indent; + partial = []; + +// Is the value an array? + + if (Object.prototype.toString.apply(value) === '[object Array]') { + +// The value is an array. Stringify every element. Use null as a placeholder +// for non-JSON values. + + length = value.length; + for (i = 0; i < length; i += 1) { + partial[i] = str(i, value) || 'null'; + } + +// Join all of the elements together, separated with commas, and wrap them in +// brackets. + + v = partial.length === 0 ? '[]' : + gap ? '[\n' + gap + + partial.join(',\n' + gap) + '\n' + + mind + ']' : + '[' + partial.join(',') + ']'; + gap = mind; + return v; + } + +// If the replacer is an array, use it to select the members to be stringified. + + if (rep && typeof rep === 'object') { + length = rep.length; + for (i = 0; i < length; i += 1) { + k = rep[i]; + if (typeof k === 'string') { + v = str(k, value); + if (v) { + partial.push(quote(k) + (gap ? ': ' : ':') + v); + } + } + } + } else { + +// Otherwise, iterate through all of the keys in the object. + + for (k in value) { + if (Object.hasOwnProperty.call(value, k)) { + v = str(k, value); + if (v) { + partial.push(quote(k) + (gap ? ': ' : ':') + v); + } + } + } + } + +// Join all of the member texts together, separated with commas, +// and wrap them in braces. + + v = partial.length === 0 ? '{}' : + gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + + mind + '}' : '{' + partial.join(',') + '}'; + gap = mind; + return v; + } + } + +// If the JSON object does not yet have a stringify method, give it one. + + if (typeof JSON.stringify !== 'function') { + JSON.stringify = function (value, replacer, space) { + +// The stringify method takes a value and an optional replacer, and an optional +// space parameter, and returns a JSON text. The replacer can be a function +// that can replace values, or an array of strings that will select the keys. +// A default replacer method can be provided. Use of the space parameter can +// produce text that is more easily readable. + + var i; + gap = ''; + indent = ''; + +// If the space parameter is a number, make an indent string containing that +// many spaces. + + if (typeof space === 'number') { + for (i = 0; i < space; i += 1) { + indent += ' '; + } + +// If the space parameter is a string, it will be used as the indent string. + + } else if (typeof space === 'string') { + indent = space; + } + +// If there is a replacer, it must be a function or an array. +// Otherwise, throw an error. + + rep = replacer; + if (replacer && typeof replacer !== 'function' && + (typeof replacer !== 'object' || + typeof replacer.length !== 'number')) { + throw new Error('JSON.stringify'); + } + +// Make a fake root object containing our value under the key of ''. +// Return the result of stringifying the value. + + return str('', {'': value}); + }; + } + + +// If the JSON object does not yet have a parse method, give it one. + + if (typeof JSON.parse !== 'function') { + JSON.parse = function (text, reviver) { + +// The parse method takes a text and an optional reviver function, and returns +// a JavaScript value if the text is a valid JSON text. + + var j; + + function walk(holder, key) { + +// The walk method is used to recursively walk the resulting structure so +// that modifications can be made. + + var k, v, value = holder[key]; + if (value && typeof value === 'object') { + for (k in value) { + if (Object.hasOwnProperty.call(value, k)) { + v = walk(value, k); + if (v !== undefined) { + value[k] = v; + } else { + delete value[k]; + } + } + } + } + return reviver.call(holder, key, value); + } + + +// Parsing happens in four stages. In the first stage, we replace certain +// Unicode characters with escape sequences. JavaScript handles many characters +// incorrectly, either silently deleting them, or treating them as line endings. + + cx.lastIndex = 0; + if (cx.test(text)) { + text = text.replace(cx, function (a) { + return '\\u' + + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }); + } + +// In the second stage, we run the text against regular expressions that look +// for non-JSON patterns. We are especially concerned with '()' and 'new' +// because they can cause invocation, and '=' because it can cause mutation. +// But just to be safe, we want to reject all unexpected forms. + +// We split the second stage into 4 regexp operations in order to work around +// crippling inefficiencies in IE's and Safari's regexp engines. First we +// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we +// replace all simple value tokens with ']' characters. Third, we delete all +// open brackets that follow a colon or comma or that begin the text. Finally, +// we look to see that the remaining characters are only whitespace or ']' or +// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval. + + if (/^[\],:{}\s]*$/. +test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@'). +replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']'). +replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { + +// In the third stage we use the eval function to compile the text into a +// JavaScript structure. The '{' operator is subject to a syntactic ambiguity +// in JavaScript: it can begin a block or an object literal. We wrap the text +// in parens to eliminate the ambiguity. + + j = eval('(' + text + ')'); + +// In the optional fourth stage, we recursively walk the new structure, passing +// each name/value pair to a reviver function for possible transformation. + + return typeof reviver === 'function' ? + walk({'': j}, '') : j; + } + +// If the text is not JSON parseable, then a SyntaxError is thrown. + + throw new SyntaxError('JSON.parse'); + }; + } +}()); + diff --git a/wave/manifest.xml b/wave/manifest.xml new file mode 100644 index 0000000..e85a2b9 --- /dev/null +++ b/wave/manifest.xml @@ -0,0 +1,7 @@ + + + + + diff --git a/wave/svg-edit.xml b/wave/svg-edit.xml new file mode 100644 index 0000000..e16ea7b --- /dev/null +++ b/wave/svg-edit.xml @@ -0,0 +1,484 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + +
        + +
        +
        + +
        +
        +

        Layers

        +
        +
        +
        +
        +
        +
        +
        + + + + + + +
        Layer 1
        + Move elements to: + +
        +
        L a y e r s
        +
        + + + +
        + + +
        +
        + +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +
        + + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + + + +
        +
        + + +
        +
        + + + + +
        +
        + + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + relative to: + +
        + +
        + +
        +
        +
        +
        + +
        +
        + + + + +
        +
        + + +
        +
        + +
        +
        + + + + +
        +
        + + + +
        +
        +
        + +
        +
        + + + + +
        +
        + + +
        +
        + +
        +
        + + + + +
        +
        + + + + +
        +
        + +
        +
        + + + + +
        +
        + + + + +
        +
        + +
        +
        B
        +
        i
        + +
        + + +
        + +
        + + +
        + +
        + +
        +
        + +
        + + + + + +
        +
        +
        + +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        + + +
        + zoom: + + +
        +
        + +
        + + + + + + + + + + + + +
        fill:
        100%
        stroke:
        100 %
        		 + + + +
        +
        + +
        +
        +
        + +
        + + +
        + +
        +
        +
        +
        +
        + +
        +
        +
        +
        +
        + +
        + +
        +
        +
        +
        + + +
        +
        + +
        +
        +
        + +
        +
        +
        +
        + + +
        + + +
        + Image Properties + + +
        + Canvas Dimensions + + + + + + +
        + +
        + Included Images + + +
        + + +
        + +
        + Editor Preferences + + + + + +
        + Editor Background +
        + +

        Note: Background will not be saved with image.

        +
        + +
        + +
        +
        + +
        +
        +
        +
        + Test message +
        +
        +
        +
        + + ]]> +         +         diff --git a/wave/wave.js b/wave/wave.js new file mode 100644 index 0000000..c3723f7 --- /dev/null +++ b/wave/wave.js @@ -0,0 +1,147 @@ +var shapetime = {}; +var nodelete = false; + +function stateUpdated() { + + // 'state' is an object of key-value pairs that map ids to JSON serialization of SVG elements + // 'keys' is an array of all the keys in the state + var state = wave.getState(); + var keys = state.getKeys(); + svgCanvas.each(function(e) { + // 'this' is the SVG DOM element node (ellipse, rect, etc) + // 'e' is an integer describing the position within the document + var k = this.id; + var v = state.get(k); + if(k == "selectorParentGroup" || k == "svgcontent"){ + //meh + }else if (v) { + var ob = JSON.parse(v); + if (ob) { + // do nothing + } else { + //var node = document.getElementById(k); + //if (node) node.parentNode.removeChild(node); + } + //keys.remove(k); + + } else if(!nodelete){ + + this.parentNode.removeChild(this); + } + }); + + // New nodes + for (var k in keys) { + var v = state.get(keys[k]); + var ob = JSON.parse(v); + if (ob){ + if(!shapetime[k] || ob.time > shapetime[k]){ + var a; + if(a = document.getElementById(k)){ + var attrs = get_attrs(a); + if(JSON.stringify(attrs) != JSON.stringify(ob.attr)){ + shapetime[k] = ob.time + svgCanvas.updateElementFromJson(ob) + } + }else{ + shapetime[k] = ob.time + svgCanvas.updateElementFromJson(ob) + } + + } + } + } +} + + +function getId(canvas, objnum) { + var id = wave.getViewer().getId().split("@")[0]; + var extra = SHA256(wave.getViewer().getId()); //in case the next step kills all the characters + for(var i = 0, l = id.length, n = ""; i < l; i++){ + if("abcdefghijklmnopqrstuvwxyz0123456789".indexOf(id[i]) != -1){ + n+=id[i]; + } + } + return "svg_"+n+"_"+extra.substr(0,5)+"_"+objnum; +} + +function get_attrs(a){ + var attrs = {}; + for(var i = a.length; i--;){ + var attr = a.item(i).nodeName; + if(",style,".indexOf(","+attr+",") == -1){ + attrs[attr] = a.item(i).nodeValue; + } + } + return attrs +} + +function main() { + $(document).ready(function(){ + if (wave && wave.isInWaveContainer()) { + wave.setStateCallback(function(){setTimeout(stateUpdated,10)}); + } + + var oldchanged = svgCanvas.bind("changed", function(canvas, elem){ + if(oldchanged)oldchanged.apply(this, [canvas,elem]); + + var delta = {} + $.each(elem, function(){ + + var attrs = {}; + var a = this.attributes; + if(a){ + var attrs = get_attrs(a) + var ob = {element: this.nodeName, attr: attrs}; + + ob.time = shapetime[this.id] = (new Date).getTime() + delta[this.id] = JSON.stringify(ob); + } + }) + + wave.getState().submitDelta(delta) + //sendDelta(canvas, elem) + + }); + //* + + var oldselected = svgCanvas.bind("selected", function(canvas, elem){ + + if(oldselected)oldselected.apply(this, [canvas,elem]); + + + var delta = {} + var deletions = 0; + $.each(elem, function(){ + if(!this.parentNode && this != window){ + delta[this.id] = null; + deletions ++ + } + }); + if(deletions > 0){ + wave.getState().submitDelta(delta) + } + }); + /// + svgCanvas.bind("cleared", function(){ + //alert("cleared") + var state = {}, keys = wave.getState().getKeys() + for(var i = 0; i < keys.length; i++){ + state[keys[i]] = null; + } + wave.getState().submitDelta(state) + }); + //*/ + svgCanvas.bind("getid", getId); + }) +} + + + +if(window.gadgets) gadgets.util.registerOnLoadHandler(main); + +//$(main) + +//and why not use my stuff? +function SHA256(b){function h(j,k){return(j>>e)+(k>>e)+((p=(j&o)+(k&o))>>e)<>>k|j<<32-k}var g=[],d,c=3,l=[2],p,i,q,a,m=[],n=[];i=b.length*8;for(var e=16,o=65535,r="";c<312;c++){for(d=l.length;d--&&c%l[d]!=0;);d<0&&l.push(c)}b+="\u0080";for(c=0;c<=i;c+=8)n[c>>5]|=(b.charCodeAt(c/8)&255)<<24-c%32;n[(i+64>>9<<4)+15]=i;for(c=8;c--;)m[c]=parseInt(Math.pow(l[c],0.5).toString(e).substr(2,8),e);for(c=0;c>>10,g[b-7]),f(g[b-15],7)^f(g[b-15],18)^g[b-15]>>>3),g[b-e]);i=h(h(h(h(a[7],f(a[4],6)^f(a[4],11)^f(a[4],25)),a[4]&a[5]^~a[4]&a[6]),parseInt(Math.pow(l[b],1/3).toString(e).substr(2,8),e)),g[b]);q=(f(a[0],2)^f(a[0],13)^f(a[0],22))+(a[0]&a[1]^a[0]&a[2]^a[1]&a[2]);for(d=8;--d;)a[d]=d==4?h(a[3],i):a[d-1];a[0]=h(i,q)}for(d=8;d--;)m[d]+=a[d]}for(c=0;c<8;c++)for(b=8;b--;)r+=(m[c]>>>b*4&15).toString(e);return r} +