github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

- Linting (HTML): Use double-quotes for attributes, remove redundant type=text/css,

Browse Source 
indent/lbs, consistent non-use of HTML namespace, consistent indents, consistent charset
    casing
- Linting (Markdown): Add `.remarkrc`, use proper hierarchical headings, use consistent
    heading format, trailing spaces
- `composer.json`: consistent property spacing
- License: Add `.txt` extension, update copyright date, and reflect type (MIT) in file name
- Credits: Add self
- npm: Add `package.json` (version 3.0.0-alpha.1 for npm release only; just reserving name)
This commit is contained in:
Brett Zamir
2018-05-13 09:58:13 +08:00
parent edb8a75402
commit 38d6274723
33 changed files with 475 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.remarkrc Normal file
View File

@@ -0,0 +1,10 @@
{
"plugins": {
"lint": {
"ordered-list-marker-value": "one",
"no-missing-blank-lines": false,
"list-item-spacing": false,
"list-item-indent": false
}
}
}

1
AUTHORS
View File

@@ -3,6 +3,7 @@ Pavol Rusnak <stick@gk2.sk>
Jeff Schiller <codedread@gmail.com> Jeff Schiller <codedread@gmail.com>
Vidar Hokstad <vidar.hokstad@gmail.com> Vidar Hokstad <vidar.hokstad@gmail.com>
Alexis Deveria <adeveria@gmail.com> Alexis Deveria <adeveria@gmail.com>
Brett Zamir <brettz9@yahoo.com>
Translation credits: Translation credits:

16
CHANGES.md
View File

@@ -1,3 +1,9 @@
# 3.0.0-alpha.1
(Only released on npm)
* Provide `package.json` for npm to reserve name (reflecting current state of `master`)
# 2.8.1 (Ellipse) - December 2nd, 2015 # 2.8.1 (Ellipse) - December 2nd, 2015
For a complete list of changes run: For a complete list of changes run:
@@ -79,11 +85,11 @@ git log 4bb15e0..253b4bf
* Security improvements and other fixes * Security improvements and other fixes
* Embedded editor can now work same domain without JSON parsing and the consequent potential loss of arguments or return values. * Embedded editor can now work same domain without JSON parsing and the consequent potential loss of arguments or return values.
* Potentially breaking API changes: * Potentially breaking API changes:
** Disallowed "extPath", "imgPath", "langPath", and "jGraduatePath" setting via URL and prevent cross-domain/cross-folder extensions being set by URL (security enhancement) * Disallowed "extPath", "imgPath", "langPath", and "jGraduatePath" setting via URL and prevent cross-domain/cross-folder extensions being set by URL (security enhancement)
** Deprecated "pngsave" option called by setCustomHandlers() in favor of "exportImage" (to accommodate export of other image types). Second argument will now supply, in addition to "issues" and "svg", the properties "type" (currently 'PNG', 'JPEG', 'BMP', 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP' types). * Deprecated "pngsave" option called by setCustomHandlers() in favor of "exportImage" (to accommodate export of other image types). Second argument will now supply, in addition to "issues" and "svg", the properties "type" (currently 'PNG', 'JPEG', 'BMP', 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP' types).
** Default extensions will now always load (along with those supplied in the URL unless the latter is prohibited by configuration), so if you do not wish your old code to load all of the default extensions, you will need to add &noDefaultExtensions=true to the URL (or add equivalent configuration in config.js). ext-overview_window.js can now be excluded though it is still a default. * Default extensions will now always load (along with those supplied in the URL unless the latter is prohibited by configuration), so if you do not wish your old code to load all of the default extensions, you will need to add &noDefaultExtensions=true to the URL (or add equivalent configuration in config.js). ext-overview_window.js can now be excluded though it is still a default.
** Preferences and configuration options must be within the list supplied within svg-editor.js (should include those of all documented extensions). * Preferences and configuration options must be within the list supplied within svg-editor.js (should include those of all documented extensions).
** Embedded messaging will no longer work by default for privacy/data integrity reasons. One must include the "ext-xdomain-messaging.js" extension and supply an array configuration item, "allowedOrigins" with potential values including: "\*" (to allow all domains--strongly discouraged!), "null" as a string to allow file:// access, window.location.origin (to allow same domain access), or specific trusted origins. The embedded editor works without the extension if the main editor is on the same domain, but if cross-domain control is needed, the "allowedOrigins" array must be supplied by a call to svgEditor.setConfig({allowedOrigins: [origin1, origin2, etc.]}) in the new config.js file. * Embedded messaging will no longer work by default for privacy/data integrity reasons. One must include the "ext-xdomain-messaging.js" extension and supply an array configuration item, "allowedOrigins" with potential values including: "\*" (to allow all domains--strongly discouraged!), "null" as a string to allow file:// access, window.location.origin (to allow same domain access), or specific trusted origins. The embedded editor works without the extension if the main editor is on the same domain, but if cross-domain control is needed, the "allowedOrigins" array must be supplied by a call to svgEditor.setConfig({allowedOrigins: [origin1, origin2, etc.]}) in the new config.js file.
# 2.6 (Cycloid) - January 15th, 2013 # 2.6 (Cycloid) - January 15th, 2013

2
LICENSE → LICENSE-MIT.txt
View File

@@ -1,4 +1,4 @@
Copyright (c) 2009-2012 by SVG-edit authors (see AUTHORS file) Copyright (c) 2009-2018 by SVG-edit authors (see AUTHORS file)
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

14
composer.json
View File

@@ -3,24 +3,28 @@
"description": "SVG-edit is a fast, web-based, javascript-driven SVG drawing editor that works in any modern browser.", "description": "SVG-edit is a fast, web-based, javascript-driven SVG drawing editor that works in any modern browser.",
"authors": [ "authors": [
{ {
"name":"Narendra Sisodiya", "name": "Narendra Sisodiya",
"email": "narendra@narendrasisodiya.com" "email": "narendra@narendrasisodiya.com"
}, },
{ {
"name":"Pavol Rusnak", "name": "Pavol Rusnak",
"email": "stick@gk2.sk" "email": "stick@gk2.sk"
}, },
{ {
"name":"Jeff Schiller", "name": "Jeff Schiller",
"email": "codedread@gmail.com" "email": "codedread@gmail.com"
}, },
{ {
"name":"Vidar Hokstad", "name": "Vidar Hokstad",
"email": "vidar.hokstad@gmail.com" "email": "vidar.hokstad@gmail.com"
}, },
{ {
"name":"Alexis Deveria", "name": "Alexis Deveria",
"email": "adeveria@gmail.com" "email": "adeveria@gmail.com"
},
{
"name": "Brett Zamir",
"email": "brettz9@yahoo.com"
} }
], ],
"keywords": [ "keywords": [

21
docs/Acknowledgements.md
View File

@@ -1,37 +1,36 @@
Projects used by SVG-edit # Projects used by SVG-edit
===
Like many open source projects, SVG-edit depends on other open source projects. This page acknowledges these projects and the many software developers across the globe without which our software would be sorely lacking. Like many open source projects, SVG-edit depends on other open source projects. This page acknowledges these projects and the many software developers across the globe without which our software would be sorely lacking.
#### jQuery ## jQuery
Jonathan Resig's [jQuery library](https://jquery.com) was chosen as a basis for the project since the beginning. The power of jQuery really lets us focus on the functionality and not worry about all the intricacies of mixing with the HTML, CSS and SVG DOM. Jonathan Resig's [jQuery library](https://jquery.com) was chosen as a basis for the project since the beginning. The power of jQuery really lets us focus on the functionality and not worry about all the intricacies of mixing with the HTML, CSS and SVG DOM.
#### jPicker ## jPicker
Christopher Tillman's awesome [jPicker](http://www.digitalmagicpro.com/jPicker) is used as our fill/stroke picker. The source code repository is now hosted at GoogleCode. Christopher Tillman's awesome [jPicker](http://www.digitalmagicpro.com/jPicker) is used as our fill/stroke picker. The source code repository is now hosted at GoogleCode.
Christopher was gracious enough to take suggestions from Pavol on how to incorporate opacity and some callback functionality back upstream into jPicker. Christopher was gracious enough to take suggestions from Pavol on how to incorporate opacity and some callback functionality back upstream into jPicker.
#### jGraduate ## jGraduate
Jeff Schiller created the excellent [jGraduate](https://code.google.com/p/jgraduate/) plugin to select SVG gradients in SVG-edit. Jeff Schiller created the excellent [jGraduate](https://code.google.com/p/jgraduate/) plugin to select SVG gradients in SVG-edit.
#### canvg ## canvg
Gabe Lerner's excellent [canvg](https://github.com/gabelerner/canvg) library has helped us bypass browsers' inability to save SVG files an PNGs, by first rendering SVG images in an HTML5 Canvas element. Gabe Lerner's excellent [canvg](https://github.com/gabelerner/canvg) library has helped us bypass browsers' inability to save SVG files an PNGs, by first rendering SVG images in an HTML5 Canvas element.
#### jQuery UI ## jQuery UI
We use [jQuery-UI](http://jqueryui.com) for making the dialog boxes (color picker, document properties) draggable, as well as for the opacity slider. We use [jQuery-UI](http://jqueryui.com) for making the dialog boxes (color picker, document properties) draggable, as well as for the opacity slider.
#### js-hotkeys ## js-hotkeys
[js-hotkeys](https://github.com/jeresig/jquery.hotkeys) is used to bind all keyboard events in the editor. [js-hotkeys](https://github.com/jeresig/jquery.hotkeys) is used to bind all keyboard events in the editor.
#### JQuery Web Spin-Button ## JQuery Web Spin-Button
George Adamson's [Web Spin-Button](http://www.softwareunity.com/jquery/JQuerySpinBtn) provided a starting point to implementing a cross-browser spin control in SVG-edit. A few bugs were fixed with compatibility and sent back to George for hopeful inclusion in the next version of his jQuery plugin. George Adamson's [Web Spin-Button](http://www.softwareunity.com/jquery/JQuerySpinBtn) provided a starting point to implementing a cross-browser spin control in SVG-edit. A few bugs were fixed with compatibility and sent back to George for hopeful inclusion in the next version of his jQuery plugin.
#### SVG Icon Loader ## SVG Icon Loader
Alexis Deveria's [svg-icon-loader](https://code.google.com/p/svg-icon-loader/) is used to load in all the SVG icons for the SVG-edit user interface. Alexis Deveria's [svg-icon-loader](https://code.google.com/p/svg-icon-loader/) is used to load in all the SVG icons for the SVG-edit user interface.
#### Icons ## Icons
Many of the icons used in SVG-edit come from the [Tango Desktop Project](http://tango.freedesktop.org/Tango_Desktop_Project) which are released into the public domain. We also used a couple of icons from the [Silk Icon Project](http://famfamfam.com/lab/icons/silk), which is licensed under the Creative Commons Attribution 2.5 License. Finally, some of the icons were hand-drawn (in SVG-edit itself). Many of the icons used in SVG-edit come from the [Tango Desktop Project](http://tango.freedesktop.org/Tango_Desktop_Project) which are released into the public domain. We also used a couple of icons from the [Silk Icon Project](http://famfamfam.com/lab/icons/silk), which is licensed under the Creative Commons Attribution 2.5 License. Finally, some of the icons were hand-drawn (in SVG-edit itself).

14
docs/ReleaseInstructions.md
View File

@@ -1,11 +1,11 @@
Creating a new svg-edit release # Creating a new svg-edit release
============
## Update the main project ## Update the main project
1. Update the VERSION variable in Makefile. 1. Update the VERSION variable in Makefile.
2. Update the CHANGES file with a summary of all changes. 2. Update `version` in `package.json`
3. Commit these changes with `git commit -m "Updating Makefile and CHANGES for release X.Y"`. 3. Update the CHANGES file with a summary of all changes.
4. Commit these changes with `git commit -m "Updating Makefile and CHANGES for release X.Y"`.
The above steps can be done on a fork and committed via a pull request. The above steps can be done on a fork and committed via a pull request.
@@ -33,6 +33,10 @@ The above steps can be done on a fork and committed via a pull request.
You will need to be a member of the SVGEdit GitHub group to do this step. You will need to be a member of the SVGEdit GitHub group to do this step.
## Publish to npm
1. `npm publish`
## Update the project docs ## Update the project docs
Update `README.md` with references and links to the shiny new release. Update `README.md` with references and links to the shiny new release.

28
docs/SvgCanvas.md
View File

@@ -9,7 +9,7 @@ The main SvgCanvas class that manages all SVG-related functions
## Summary ## Summary
### SvgCanvas - The main SvgCanvas class that manages all SVG-related functions ### SvgCanvas - The main SvgCanvas class that manages all SVG-related functions
Function | Description Function | Description
---------|------------ ---------|------------
@@ -85,7 +85,7 @@ Function | Description
[`SelectorManager.releaseSelector`](#selectormanagerreleaseselector) | Removes the selector of the given element (hides selection box) [`SelectorManager.releaseSelector`](#selectormanagerreleaseselector) | Removes the selector of the given element (hides selection box)
[`SelectorManager.getRubberBandBox`](#selectormanagergetrubberbandbox`) | Returns the rubberBandBox DOM element. [`SelectorManager.getRubberBandBox`](#selectormanagergetrubberbandbox`) | Returns the rubberBandBox DOM element.
### Helper functions ### Helper functions
Function | Description Function | Description
---------|------------ ---------|------------
@@ -110,7 +110,7 @@ Function | Description
[`ffClone`](#ffclone) | Hack for Firefox bugs where text element features aren't updated. [`ffClone`](#ffclone) | Hack for Firefox bugs where text element features aren't updated.
[`getPathBBox`](#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) [`getPathBBox`](#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)
### Element Transforms ### Element Transforms
Function | Description Function | Description
---------|------------ ---------|------------
@@ -129,7 +129,7 @@ Function | Description
[`transformBox`](#transformbox) | Transforms a rectangle based on the given matrix [`transformBox`](#transformbox) | Transforms a rectangle based on the given matrix
### Selection ### Selection
Function | Description Function | Description
---------|------------ ---------|------------
[`clearSelection`](#clearselection) | Clears the selection. [`clearSelection`](#clearselection) | Clears the selection.
@@ -144,7 +144,7 @@ Function | Description
### Path edit functions - Functions relating to editing path elements ### Path edit functions - Functions relating to editing path elements
### Serialization ### Serialization
Function | Description Function | Description
---------|------------ ---------|------------
@@ -158,7 +158,7 @@ Function | Description
[`setSvgString`](#setsvgstring) | This function sets the current drawing as the input SVG XML. [`setSvgString`](#setsvgstring) | This function sets the current drawing as the input SVG XML.
[`importSvgString`](#importsvgstring) | This function imports the input SVG XML into the current layer in the drawing [`importSvgString`](#importsvgstring) | This function imports the input SVG XML into the current layer in the drawing
### Layers ### Layers
Function | Description Function | Description
---------|------------ ---------|------------
@@ -177,7 +177,7 @@ Function | Description
[`getLayerOpacity`](#getlayeropacity) | Returns the opacity of the given layer. [`getLayerOpacity`](#getlayeropacity) | Returns the opacity of the given layer.
[`setLayerOpacity`](#setlayeropacity) | Sets the opacity of the given layer. [`setLayerOpacity`](#setlayeropacity) | Sets the opacity of the given layer.
### Document functions ### Document functions
Function | Description Function | Description
---------|------------ ---------|------------
@@ -201,7 +201,7 @@ Function | Description
[`getMode`](#getmode) | Returns the current editor mode string [`getMode`](#getmode) | Returns the current editor mode string
[`setMode`](#setmode) | Sets the editor’s mode to the given string [`setMode`](#setmode) | Sets the editor’s mode to the given string
### Element Styling ### Element Styling
Function | Description Function | Description
---------|------------ ---------|------------
@@ -236,7 +236,7 @@ Function | Description
[`setImageURL`](#setimageurl) | Sets the new image URL for the selected image element. [`setImageURL`](#setimageurl) | Sets the new image URL for the selected image element.
[`setRectRadius`](#setrectradius) | Sets the rx & ry values to the selected rect element to change its corner radius [`setRectRadius`](#setrectradius) | Sets the rx & ry values to the selected rect element to change its corner radius
### Element manipulation ### Element manipulation
Function | Description Function | Description
---------|------------ ---------|------------
@@ -253,7 +253,7 @@ Function | Description
[`cloneSelectedElements`](#cloneselectedelements) | Create deep DOM copies (clones) of all selected elements and move them slightly from their originals [`cloneSelectedElements`](#cloneselectedelements) | Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
[`alignSelectedElements`](#alignselectedelements) | Aligns selected elements [`alignSelectedElements`](#alignselectedelements) | Aligns selected elements
### Additional editor tools ### Additional editor tools
Function | Description Function | Description
---------|------------ ---------|------------
@@ -283,7 +283,7 @@ Converts XML entities in a string to single characters. Example: `&amp;` becomes
#### Returns #### Returns
The converted string The converted string
## `Utils.encode64` ## `Utils.encode64`
Converts a string to base64 Converts a string to base64
@@ -312,7 +312,7 @@ Boolean that’s true if rectangles intersect
## `snapToAngle` ## `snapToAngle`
"snapToAngle": function( x1, y1, x2, y2 ) "snapToAngle": function( x1, y1, x2, y2 )
Returns a 45 degree angle coordinate associated with the two given coordinates Returns a 45 degree angle coordinate associated with the two given coordinates
#### Parameters #### Parameters
@@ -871,7 +871,7 @@ Get the given/selected element’s bounding box object, convert it to be more us
var ffClone = function( elem ) var ffClone = function( elem )
Hack for Firefox bugs where text element features aren’t updated. This function clones the element and re-selects it 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 > TODO: Test for this bug on load and add it to “support” object instead of browser sniffing
@@ -1256,7 +1256,7 @@ This function imports the input SVG XML into the current layer in the drawing
This function returns false if the import was unsuccessful, true otherwise. This function returns false if the import was unsuccessful, true otherwise.
>TODO: >TODO:
* properly handle if namespace is introduced by imported content (must add to svgcontent and update all prefixes in the imported node) * 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 * properly handle recalculating dimensions, recalculateDimensions() doesn’t handle arbitrary transform lists, but makes some assumptions about how the transform list was obtained

31
editor/browser-not-supported.html
View File

@@ -1,21 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"/> <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<link rel="icon" type="image/png" href="images/logo.png"/> <link rel="icon" type="image/png" href="images/logo.png"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/> <link rel="stylesheet" href="svg-editor.css"/>
<script src="jquery.js"></script> <script src="jquery.js"></script>
<title>Browser does not support SVG | SVG-edit</title> <title>Browser does not support SVG | SVG-edit</title>
</head> </head>
<body> <body>
<div id="browser-not-supported"> <div id="browser-not-supported">
<img style="float:left;padding:10px;" src="images/logo.png" width="48" height="48" alt="SVG-edit logo" /><br /> <img style="float:left;padding:10px;" src="images/logo.png"
<p>Sorry, but your browser does not support SVG. Below is a list of alternate browsers and versions that support SVG and SVG-edit (from <a href="http://caniuse.com/#cats=SVG">caniuse.com</a>).</p> width="48" height="48" alt="SVG-edit logo" /><br />
<p>Try the latest version of <a href="http://www.getfirefox.com">Firefox</a>, <a href="http://www.google.com/chrome/">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Safari</a>, <a href="http://www.opera.com/download/">Opera</a> or <a href="http://windows.microsoft.com/ie9">Internet Explorer</a>.</p> <p>Sorry, but your browser does not support SVG. Below is a list of
<p>If you are unable to install one of these and must use an old version of Internet Explorer, you can install the <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame plugin</a>.</p> alternate browsers and versions that support SVG and SVG-edit
(from <a href="http://caniuse.com/#cats=SVG">caniuse.com</a>).</p>
<p>Try the latest version of
<a href="http://www.getfirefox.com">Firefox</a>,
<a href="http://www.google.com/chrome/">Google Chrome</a>,
<a href="http://www.apple.com/safari/download/">Safari</a>,
<a href="http://www.opera.com/download/">Opera</a> or
<a href="http://windows.microsoft.com/ie9">Internet Explorer</a>.</p>
<p>If you are unable to install one of these and must use an old version of
Internet Explorer, you can install the
<a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame plugin</a>.</p>
</div> </div>
<script> <script>

2
editor/embedapi.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Embed API</title> <title>Embed API</title>

118
editor/svg-editor.html
View File

@@ -2,70 +2,70 @@
<html> <html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" --> <!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="icon" type="image/png" href="images/logo.png"/> <link rel="icon" type="image/png" href="images/logo.png"/>
<link rel="stylesheet" href="jgraduate/css/jPicker.css" type="text/css"/> <link rel="stylesheet" href="jgraduate/css/jPicker.css"/>
<link rel="stylesheet" href="jgraduate/css/jgraduate.css" type="text/css"/> <link rel="stylesheet" href="jgraduate/css/jgraduate.css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/> <link rel="stylesheet" href="svg-editor.css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/> <link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css"/>
<link rel="stylesheet" href="custom.css" type="text/css"/> <link rel="stylesheet" href="custom.css"/>
<!--{if jquery_release}> <!--{if jquery_release}>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!{else}--> <!{else}-->
<script src="jquery.js"></script> <script src="jquery.js"></script>
<!--{endif}--> <!--{endif}-->
<script src="js-hotkeys/jquery.hotkeys.min.js"></script> <script src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script src="jquerybbq/jquery.bbq.min.js"></script> <script src="jquerybbq/jquery.bbq.min.js"></script>
<script src="svgicons/jquery.svgicons.js"></script> <script src="svgicons/jquery.svgicons.js"></script>
<script src="jgraduate/jquery.jgraduate.min.js"></script> <script src="jgraduate/jquery.jgraduate.min.js"></script>
<script src="spinbtn/JQuerySpinBtn.min.js"></script> <script src="spinbtn/JQuerySpinBtn.min.js"></script>
<script src="touch.js"></script> <script src="touch.js"></script>
<!--{if svg_edit_release}> <!--{if svg_edit_release}>
<script src="svgedit.compiled.js"></script> <script src="svgedit.compiled.js"></script>
<!{else}--> <!{else}-->
<script src="svgedit.js"></script> <script src="svgedit.js"></script>
<script src="jquery-svg.js"></script> <script src="jquery-svg.js"></script>
<script src="contextmenu/jquery.contextMenu.js"></script> <script src="contextmenu/jquery.contextMenu.js"></script>
<script src="pathseg.js"></script> <script src="pathseg.js"></script>
<script src="browser.js"></script> <script src="browser.js"></script>
<script src="svgtransformlist.js"></script> <script src="svgtransformlist.js"></script>
<script src="math.js"></script> <script src="math.js"></script>
<script src="units.js"></script> <script src="units.js"></script>
<script src="svgutils.js"></script> <script src="svgutils.js"></script>
<script src="sanitize.js"></script> <script src="sanitize.js"></script>
<script src="history.js"></script> <script src="history.js"></script>
<script src="historyrecording.js"></script> <script src="historyrecording.js"></script>
<script src="coords.js"></script> <script src="coords.js"></script>
<script src="recalculate.js"></script> <script src="recalculate.js"></script>
<script src="select.js"></script> <script src="select.js"></script>
<script src="draw.js"></script> <script src="draw.js"></script>
<script src="layer.js"></script> <script src="layer.js"></script>
<script src="path.js"></script> <script src="path.js"></script>
<script src="svgcanvas.js"></script> <script src="svgcanvas.js"></script>
<script src="svg-editor.js"></script> <script src="svg-editor.js"></script>
<script src="locale/locale.js"></script> <script src="locale/locale.js"></script>
<script src="contextmenu.js"></script> <script src="contextmenu.js"></script>
<!--{endif}--> <!--{endif}-->
<!-- always minified scripts --> <!-- always minified scripts -->
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script> <script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script src="jgraduate/jpicker.js"></script> <script src="jgraduate/jpicker.js"></script>
<!-- If you do not wish to add extensions by URL, you can load them <!-- If you do not wish to add extensions by URL, you can load them
by creating the following file and adding by calls to svgEditor.setConfig --> by creating the following file and adding by calls to svgEditor.setConfig -->
<script src="config.js"></script> <script src="config.js"></script>
<!-- feeds --> <!-- feeds -->
<link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" /> <link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />
<link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" /> <link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" />
<!-- Add script with custom handlers here --> <!-- Add script with custom handlers here -->
<title>SVG-edit</title> <title>SVG-edit</title>
</head> </head>
<body> <body>
<div id="svg_editor"> <div id="svg_editor">
@@ -85,7 +85,7 @@ by creating the following file and adding by calls to svgEditor.setConfig -->
</div> </div>
<div id="workarea"> <div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style> <style id="styleoverrides" media="screen" scoped="scoped"></style>
<div id="svgcanvas" style="position:relative"> <div id="svgcanvas" style="position:relative">
</div> </div>

2
opera-widget/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>SVG Edit</title> <title>SVG Edit</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="style.css">
<script> <script>
/** this method adds the script that overrides the default open/save handlers */ /** this method adds the script that overrides the default open/save handlers */
function addHandlers() function addHandlers()

5
package-lock.json generated Normal file
View File

@@ -0,0 +1,5 @@
{
"name": "svgedit",
"version": "2.8.1",
"lockfileVersion": 1
}

39
package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "svgedit",
"version": "3.0.0-alpha.1",
"description": "Powerful SVG-Editor for your browser ",
"main": "editor/svg-editor.js",
"directories": {
"doc": "docs",
"example": "examples",
"test": "test"
},
"engines": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/SVG-Edit/svgedit.git"
},
"keywords": [
"svg-editor",
"javascript",
"svg-edit",
"svg"
],
"author": "Narendra Sisodiya",
"contributors": [
"Pavol Rusnak",
"Jeff Schiller",
"Vidar Hokstad",
"Alexis Deveria",
"Brett Zamir"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/SVG-Edit/svgedit/issues"
},
"homepage": "https://github.com/SVG-Edit/svgedit#readme",
"dependencies": {}
}

5
screencasts/svgopen2010/index.html
View File

@@ -32,9 +32,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>SVG-edit, Pavol Rusnák, SVG Open 2010, Paris</title> <title>SVG-edit, Pavol Rusnák, SVG Open 2010, Paris</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div class="presentation"> <div class="presentation">

30
test/all_tests.html
View File

@@ -7,20 +7,20 @@
<body> <body>
<h1>All SVG-edit Tests</h1> <h1>All SVG-edit Tests</h1>
<p>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 <em>YOU</em> broke it. Please do not submit code that breaks any of these tests.</p> <p>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 <em>YOU</em> broke it. Please do not submit code that breaks any of these tests.</p>
<iframe src='jquery-svg_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="jquery-svg_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='svgtransformlist_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="svgtransformlist_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='contextmenu_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="contextmenu_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='math_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="math_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='svgutils_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="svgutils_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='svgutils_bbox_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="svgutils_bbox_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='history_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="history_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='select_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="select_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='draw_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="draw_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='units_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="units_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='path_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="path_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='sanitize_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="sanitize_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='coords_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="coords_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src='recalculate_test.html' width='100%' height='70' scrolling='no'></iframe> <iframe src="recalculate_test.html" width="100%" height="70" scrolling="no"></iframe>
</body> </body>
<script> <script>
window.setTimeout(function() { window.setTimeout(function() {
@@ -31,4 +31,4 @@ window.setTimeout(function() {
} }
}, 5000); }, 5000);
</script> </script>
</html> </html>

20
test/contextmenu_test.html
View File

@@ -3,14 +3,14 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for contextmenu.js</title> <title>Unit Tests for contextmenu.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script> <script>
// Mock for browser.js // Mock for browser.js
window.svgEditor = {ready:function(){}}; window.svgEditor = {ready: function(){}};
</script> </script>
<script src='../editor/contextmenu.js'></script> <script src="../editor/contextmenu.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -74,10 +74,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for contextmenu.js</h1> <h1 id="qunit-header">Unit Tests for contextmenu.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='svgroot' style='visibility:hidden'></div> <div id="svgroot" style="visibility:hidden"></div>
</body> </body>
</html> </html>

34
test/coords_test.html
View File

@@ -3,18 +3,18 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for coords.js</title> <title>Unit Tests for coords.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/math.js'></script> <script src="../editor/math.js"></script>
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='../editor/units.js'></script> <script src="../editor/units.js"></script>
<script src='../editor/svgtransformlist.js'></script> <script src="../editor/svgtransformlist.js"></script>
<script src='../editor/coords.js'></script> <script src="../editor/coords.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -351,11 +351,11 @@
}); });
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for svgedit.coords</h1> <h1 id="qunit-header">Unit Tests for svgedit.coords</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='root' style='visibility:hidden'></div> <div id="root" style="visibility:hidden"></div>
</body> </body>
</html> </html>

30
test/draw_test.html
View File

@@ -3,16 +3,16 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for draw.js</title> <title>Unit Tests for draw.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/units.js'></script> <script src="../editor/units.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='../editor/draw.js'></script> <script src="../editor/draw.js"></script>
<script src='../editor/layer.js'></script> <script src="../editor/layer.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script src="sinon/sinon-1.17.3.js"></script> <script src="sinon/sinon-1.17.3.js"></script>
<script src="sinon/sinon-qunit-1.0.0.js"></script> <script src="sinon/sinon-qunit-1.0.0.js"></script>
<script> <script>
@@ -813,10 +813,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for draw.js</h1> <h1 id="qunit-header">Unit Tests for draw.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='sandbox' style='visibility:hidden'></div> <div id="sandbox" style="visibility:hidden"></div>
</body> </body>
</html> </html>

30
test/history_test.html
View File

@@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for history.js</title> <title>Unit Tests for history.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/history.js'></script> <script src="../editor/history.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// TODO(codedread): Write tests for handling history events. // TODO(codedread): Write tests for handling history events.
@@ -575,17 +575,17 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for history.js</h1> <h1 id="qunit-header">Unit Tests for history.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='divparent' style='visibility:hidden'> <div id="divparent" style="visibility:hidden">
<div id='div1'></div> <div id="div1"></div>
<div id='div2'></div> <div id="div2"></div>
<div id='div3'></div> <div id="div3"></div>
</div> </div>
<div id='div4' style='visibility:hidden'> <div id="div4" style="visibility:hidden">
<div id='div5'></div> <div id="div5"></div>
</div> </div>
</body> </body>
</html> </html>

20
test/jquery-svg_test.html
View File

@@ -3,9 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for jquery-svg.js</title> <title>Unit Tests for jquery-svg.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -17,12 +17,12 @@
}); });
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for jquery-svg</h1> <h1 id="qunit-header">Unit Tests for jquery-svg</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='root' style=''></div> <div id="root" style=""></div>
</body> </body>
</html> </html>

18
test/math_test.html
View File

@@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for math.js</title> <title>Unit Tests for math.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/math.js'></script> <script src="../editor/math.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -131,9 +131,9 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for math.js</h1> <h1 id="qunit-header">Unit Tests for math.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
</body> </body>
</html> </html>

26
test/path_test.html
View File

@@ -3,14 +3,14 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for path.js</title> <title>Unit Tests for path.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='../editor/path.js'></script> <script src="../editor/path.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -152,10 +152,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for path.js</h1> <h1 id="qunit-header">Unit Tests for path.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='anchor' style='visibility:hidden'></div> <div id="anchor" style="visibility:hidden"></div>
</body> </body>
</html> </html>

48
test/recalculate_test.html
View File

@@ -3,20 +3,20 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for recalculate.js</title> <title>Unit Tests for recalculate.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/jquery-svg.js'></script> <script src="../editor/jquery-svg.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/math.js'></script> <script src="../editor/math.js"></script>
<script src='../editor/history.js'></script> <script src="../editor/history.js"></script>
<script src='../editor/units.js'></script> <script src="../editor/units.js"></script>
<script src='../editor/svgtransformlist.js'></script> <script src="../editor/svgtransformlist.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='../editor/coords.js'></script> <script src="../editor/coords.js"></script>
<script src='../editor/recalculate.js'></script> <script src="../editor/recalculate.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -93,7 +93,7 @@
setUpRect(); setUpRect();
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)'); elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
svgedit.recalculate.recalculateDimensions(elem); svgedit.recalculate.recalculateDimensions(elem);
// Ensure that the identity matrix is swallowed and the element has no // Ensure that the identity matrix is swallowed and the element has no
@@ -108,7 +108,7 @@
setUpRect(); setUpRect();
elem.setAttribute('transform', 'translate(100,50)'); elem.setAttribute('transform', 'translate(100,50)');
svgedit.recalculate.recalculateDimensions(elem); svgedit.recalculate.recalculateDimensions(elem);
equal(false, elem.hasAttribute('transform')); equal(false, elem.hasAttribute('transform'));
@@ -124,7 +124,7 @@
setUpTextWithTspan(); setUpTextWithTspan();
elem.setAttribute('transform', 'translate(100,50)'); elem.setAttribute('transform', 'translate(100,50)');
svgedit.recalculate.recalculateDimensions(elem); svgedit.recalculate.recalculateDimensions(elem);
// Ensure that the identity matrix is swallowed and the element has no // Ensure that the identity matrix is swallowed and the element has no
@@ -140,19 +140,19 @@
tearDown(); tearDown();
}); });
// TODO: Since recalculateDimensions() and surrounding code is // TODO: Since recalculateDimensions() and surrounding code is
// probably the largest, most complicated and strange piece of // probably the largest, most complicated and strange piece of
// code in SVG-edit, we need to write a whole lot of unit tests // code in SVG-edit, we need to write a whole lot of unit tests
// for it here. // for it here.
}); });
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for svgedit.recalculate</h1> <h1 id="qunit-header">Unit Tests for svgedit.recalculate</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='root' style='visibility:hidden'></div> <div id="root" style="visibility:hidden"></div>
</body> </body>
</html> </html>

26
test/sanitize_test.html
View File

@@ -3,14 +3,14 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for sanitize.js</title> <title>Unit Tests for sanitize.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='../editor/sanitize.js'></script> <script src="../editor/sanitize.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -39,10 +39,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for sanitize.js</h1> <h1 id="qunit-header">Unit Tests for sanitize.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='anchor' style='visibility:hidden'></div> <div id="anchor" style="visibility:hidden"></div>
</body> </body>
</html> </html>

32
test/select_test.html
View File

@@ -3,15 +3,15 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for select.js</title> <title>Unit Tests for select.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/math.js'></script> <script src="../editor/math.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='../editor/select.js'></script> <script src="../editor/select.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -72,7 +72,7 @@
setUp(); setUp();
svgedit.select.init(mockConfig, mockFactory); svgedit.select.init(mockConfig, mockFactory);
} }
function tearDown() { function tearDown() {
while (sandbox.hasChildNodes()) { while (sandbox.hasChildNodes()) {
sandbox.removeChild(sandbox.firstChild); sandbox.removeChild(sandbox.firstChild);
@@ -93,7 +93,7 @@
equals(typeof svgedit.select.init, typeof function(){}); equals(typeof svgedit.select.init, typeof function(){});
equals(typeof svgedit.select.getSelectorManager, typeof function(){}); equals(typeof svgedit.select.getSelectorManager, typeof function(){});
}); });
test('Test Selector DOM structure', function() { test('Test Selector DOM structure', function() {
expect(24); expect(24);
@@ -145,10 +145,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for select.js</h1> <h1 id="qunit-header">Unit Tests for select.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='sandbox'></div> <div id="sandbox"></div>
</body> </body>
</html> </html>

20
test/svgtransformlist_test.html
View File

@@ -3,16 +3,16 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for svgtransformlist.js</title> <title>Unit Tests for svgtransformlist.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script> <script>
// Mock for browser.js // Mock for browser.js
svgedit.browser = {}; svgedit.browser = {};
svgedit.browser.supportsNativeTransformLists = function() { return false;} svgedit.browser.supportsNativeTransformLists = function() { return false;}
</script> </script>
<script src='../editor/svgtransformlist.js'></script> <script src="../editor/svgtransformlist.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -407,10 +407,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for svgtransformlist.js</h1> <h1 id="qunit-header">Unit Tests for svgtransformlist.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='svgroot' style='visibility:hidden'></div> <div id="svgroot" style="visibility:hidden"></div>
</body> </body>
</html> </html>

36
test/svgutils_bbox_test.html
View File

@@ -3,19 +3,19 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for svgutils.js BBox functions</title> <title>Unit Tests for svgutils.js BBox functions</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<!-- svgutils.js depends on these three... mock out? --> <!-- svgutils.js depends on these three... mock out? -->
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/math.js'></script> <script src="../editor/math.js"></script>
<script src='../editor/svgtransformlist.js'></script> <script src="../editor/svgtransformlist.js"></script>
<script src='../editor/jquery-svg.js'></script> <!-- has $.attr() that takes an array . Used by svgedit.utilities.getPathDFromElement --> <script src="../editor/jquery-svg.js"></script> <!-- has $.attr() that takes an array . Used by svgedit.utilities.getPathDFromElement -->
<script src='../editor/path.js'></script> <script src="../editor/path.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script src='qunit/qunit-assert-close.js'></script> <script src="qunit/qunit-assert-close.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -79,7 +79,7 @@
}); });
sandbox.appendChild(svgroot); sandbox.appendChild(svgroot);
module('svgedit.utilities_bbox', { module('svgedit.utilities_bbox', {
setup: function() { setup: function() {
// We're reusing ID's so we need to do this for transforms. // We're reusing ID's so we need to do this for transforms.
@@ -516,10 +516,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for svgutils.js BBox functions</h1> <h1 id="qunit-header">Unit Tests for svgutils.js BBox functions</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='sandbox'></div> <div id="sandbox"></div>
</body> </body>
</html> </html>

32
test/svgutils_performance_test.html
View File

@@ -6,18 +6,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Performance Unit Tests for svgutils.js</title> <title>Performance Unit Tests for svgutils.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<!-- svgutils.js depends on these three... mock out? --> <!-- svgutils.js depends on these three... mock out? -->
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/svgtransformlist.js'></script> <script src="../editor/svgtransformlist.js"></script>
<script src='../editor/math.js'></script> <script src="../editor/math.js"></script>
<script src='../editor/jquery-svg.js'></script> <!-- has $.attr() that takes an array . Used jby svgedit.utilities.getPathDFromElement --> <script src="../editor/jquery-svg.js"></script> <!-- has $.attr() that takes an array . Used jby svgedit.utilities.getPathDFromElement -->
<script src='../editor/units.js'></script> <script src="../editor/units.js"></script>
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -193,10 +193,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Performance Unit Tests for svgutils.js</h1> <h1 id="qunit-header">Performance Unit Tests for svgutils.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id="svg_editor"> <div id="svg_editor">
<div id="workarea" style="cursor: auto; overflow: scroll; line-height: 12px; right: 100px;"> <div id="workarea" style="cursor: auto; overflow: scroll; line-height: 12px; right: 100px;">
@@ -208,7 +208,7 @@
</svg> </svg>
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped">#svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}</style> <style id="styleoverrides" media="screen" scoped="scoped">#svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}</style>
<div id="svgcanvas" style="position: relative; width: 1000px; height: 1000px;"> <div id="svgcanvas" style="position: relative; width: 1000px; height: 1000px;">
<svg id="svgroot" xmlns="http://www.w3.org/2000/svg" xlinkns="http://www.w3.org/1999/xlink" width="1000" height="1000" x="640" y="480" overflow="visible"> <svg id="svgroot" xmlns="http://www.w3.org/2000/svg" xlinkns="http://www.w3.org/1999/xlink" width="1000" height="1000" x="640" y="480" overflow="visible">
<defs><filter id="canvashadow" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"></feGaussianBlur><feOffset in="blur" dx="5" dy="5" result="offsetBlur"></feOffset><feMerge><feMergeNode in="offsetBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><pattern id="gridpattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"><image x="0" y="0" width="100" height="100"></image></pattern></defs> <defs><filter id="canvashadow" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"></feGaussianBlur><feOffset in="blur" dx="5" dy="5" result="offsetBlur"></feOffset><feMerge><feMergeNode in="offsetBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><pattern id="gridpattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"><image x="0" y="0" width="100" height="100"></image></pattern></defs>

30
test/svgutils_test.html
View File

@@ -3,16 +3,16 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for svgutils.js</title> <title>Unit Tests for svgutils.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<!-- svgutils.js depends on these three... mock out? --> <!-- svgutils.js depends on these three... mock out? -->
<script src='../editor/pathseg.js'></script> <script src="../editor/pathseg.js"></script>
<script src='../editor/browser.js'></script> <script src="../editor/browser.js"></script>
<script src='../editor/svgtransformlist.js'></script> <script src="../editor/svgtransformlist.js"></script>
<script src='../editor/jquery-svg.js'></script> <!-- has $.attr() that takes an array . Used by svgedit.utilities.getPathDFromElement --> <script src="../editor/jquery-svg.js"></script> <!-- has $.attr() that takes an array . Used by svgedit.utilities.getPathDFromElement -->
<script src='../editor/svgutils.js'></script> <script src="../editor/svgutils.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -68,7 +68,7 @@
}); });
sandbox.appendChild(svgroot); sandbox.appendChild(svgroot);
module('svgedit.utilities', { module('svgedit.utilities', {
setup: function() { setup: function() {
mockHistorySubCommands = []; mockHistorySubCommands = [];
@@ -358,10 +358,10 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for svgutils.js</h1> <h1 id="qunit-header">Unit Tests for svgutils.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='sandbox'></div> <div id="sandbox"></div>
</body> </body>
</html> </html>

74
test/test1.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for SvgCanvas</title> <title>Unit Tests for SvgCanvas</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css"/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src="../editor/jquery.js"></script> <script src="../editor/jquery.js"></script>
<script src="../editor/jquerybbq/jquery.bbq.min.js"></script> <script src="../editor/jquerybbq/jquery.bbq.min.js"></script>
<script src="../editor/jquery-ui/jquery-ui-1.8.custom.min.js"></script> <script src="../editor/jquery-ui/jquery-ui-1.8.custom.min.js"></script>
@@ -17,7 +17,7 @@
<script src="../editor/svgutils.js"></script> <script src="../editor/svgutils.js"></script>
<script src="../editor/sanitize.js"></script> <script src="../editor/sanitize.js"></script>
<script src="../editor/history.js"></script> <script src="../editor/history.js"></script>
<script src='../editor/coords.js'></script> <script src="../editor/coords.js"></script>
<script src="../editor/recalculate.js"></script> <script src="../editor/recalculate.js"></script>
<script src="../editor/select.js"></script> <script src="../editor/select.js"></script>
<script src="../editor/draw.js"></script> <script src="../editor/draw.js"></script>
@@ -74,9 +74,9 @@
expect(1); expect(1);
equal(typeof {}, typeof svgCanvas); equal(typeof {}, typeof svgCanvas);
}); });
module("Path Module"); module("Path Module");
test("Test path conversion from absolute to relative", function() { test("Test path conversion from absolute to relative", function() {
expect(6); expect(6);
var convert = svgCanvas.pathActions.convertPath; var convert = svgCanvas.pathActions.convertPath;
@@ -85,22 +85,22 @@
// "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z" // "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z"
// "m36.812,15.8566c-28.03099,0 -26.28099,12.15601 -26.28099,12.15601l0.03099,12.59399h26.75v3.781h-37.37399c0,0 -17.938,-2.034 -133.00001,26.25c115.06201,28.284 130.71801,27.281 130.71801,27.281h9.34399v-13.125c0,0 -0.504,-15.656 15.40601,-15.656h26.532c0,0 14.90599,0.241 14.90599,-14.406v-24.219c0,0 2.263,-14.65601 -27.032,-14.65601zm-14.75,8.4684c2.662,0 4.813,2.151 4.813,4.813c0,2.661 -2.151,4.812 -4.813,4.812c-2.661,0 -4.812,-2.151 -4.812,-4.812c0,-2.662 2.151,-4.813 4.812,-4.813z" // "m36.812,15.8566c-28.03099,0 -26.28099,12.15601 -26.28099,12.15601l0.03099,12.59399h26.75v3.781h-37.37399c0,0 -17.938,-2.034 -133.00001,26.25c115.06201,28.284 130.71801,27.281 130.71801,27.281h9.34399v-13.125c0,0 -0.504,-15.656 15.40601,-15.656h26.532c0,0 14.90599,0.241 14.90599,-14.406v-24.219c0,0 2.263,-14.65601 -27.032,-14.65601zm-14.75,8.4684c2.662,0 4.813,2.151 4.813,4.813c0,2.661 -2.151,4.812 -4.813,4.812c-2.661,0 -4.812,-2.151 -4.812,-4.812c0,-2.662 2.151,-4.813 4.812,-4.813z"
// "m 0,0 l 200,0 l 0,100 L 0,100" // "m 0,0 l 200,0 l 0,100 L 0,100"
svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' width='400' x='300'>" + svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' width='400' x='300'>" +
"<path id='p1' d='M100,100 L200,100 L100,100Z'/>" + "<path id='p1' d='M100,100 L200,100 L100,100Z'/>" +
"<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" + "<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" +
"</svg>"); "</svg>");
var p1 = document.getElementById("p1"), var p1 = document.getElementById("p1"),
p2 = document.getElementById("p2"), p2 = document.getElementById("p2"),
d_abs = p1.getAttribute("d"), d_abs = p1.getAttribute("d"),
seglist = p1.pathSegList, seglist = p1.pathSegList,
curseg = null; curseg = null;
equal(p1.nodeName, "path", "Expected 'path', got"); equal(p1.nodeName, "path", "Expected 'path', got");
equal(seglist.numberOfItems, 4, "Number of segments before conversion"); equal(seglist.numberOfItems, 4, "Number of segments before conversion");
// verify segments before conversion // verify segments before conversion
curseg = seglist.getItem(0); curseg = seglist.getItem(0);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), "M", "Before conversion, segment #1 type"); equal(curseg.pathSegTypeAsLetter.toUpperCase(), "M", "Before conversion, segment #1 type");
@@ -108,54 +108,54 @@
equal(curseg.pathSegTypeAsLetter.toUpperCase(), "L", "Before conversion, segment #2 type"); equal(curseg.pathSegTypeAsLetter.toUpperCase(), "L", "Before conversion, segment #2 type");
curseg = seglist.getItem(3); curseg = seglist.getItem(3);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), "Z", "Before conversion, segment #3 type" + d_abs); equal(curseg.pathSegTypeAsLetter.toUpperCase(), "Z", "Before conversion, segment #3 type" + d_abs);
// convert and verify segments // convert and verify segments
var d = convert(p1, true); var d = convert(p1, true);
equal(d, "m100,100l100,0l-100,0z", "Converted path to relative string"); equal(d, "m100,100l100,0l-100,0z", "Converted path to relative string");
// TODO: see why this isn't working in SVG-edit // TODO: see why this isn't working in SVG-edit
d = convert(p2, true); d = convert(p2, true);
QUnit.log({result: d}); QUnit.log({result: d});
d = convert(p2, false); d = convert(p2, false);
QUnit.log({result: d}); QUnit.log({result: d});
}); });
module("Import Module"); module("Import Module");
test("Test import use", function() { test("Test import use", function() {
expect(3); expect(3);
svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" + svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
"<rect id='the-rect' width='200' height='200'/>" + "<rect id='the-rect' width='200' height='200'/>" +
"<use id='the-use' xlink:href='#the-rect'/>" + "<use id='the-use' xlink:href='#the-rect'/>" +
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" + "<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
"<use id='no-use'/>" + "<use id='no-use'/>" +
"</svg>"); "</svg>");
var u = document.getElementById("the-use"), var u = document.getElementById("the-use"),
fu = document.getElementById("foreign-use"), fu = document.getElementById("foreign-use"),
nfu = document.getElementById("no-use"); nfu = document.getElementById("no-use");
equal((u && u.nodeName == "use"), true, "Did not import <use> element"); equal((u && u.nodeName == "use"), true, "Did not import <use> element");
equal(fu, null, "Removed <use> element that had a foreign href"); equal(fu, null, "Removed <use> element that had a foreign href");
equal(nfu, null, "Removed <use> element that had no href"); equal(nfu, null, "Removed <use> element that had no href");
}); });
// This test shows that an element with an invalid attribute is still parsed in properly // This test shows that an element with an invalid attribute is still parsed in properly
// and only the attribute is not imported // and only the attribute is not imported
test("Test invalid attribute", function() { test("Test invalid attribute", function() {
expect(2); expect(2);
svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+ svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+
'<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' + '<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' +
'</svg>'); '</svg>');
var t = document.getElementById("the-text"); var t = document.getElementById("the-text");
equal(true, (t && t.nodeName == "text"), "Did not import <text> element"); equal(true, (t && t.nodeName == "text"), "Did not import <text> element");
equal(null, t.getAttribute("d"), "Imported a <text> with a d attribute"); equal(null, t.getAttribute("d"), "Imported a <text> with a d attribute");
}); });
// This test makes sure import/export properly handles namespaced attributes // This test makes sure import/export properly handles namespaced attributes
test("Test importing/exporting namespaced attributes", function() { test("Test importing/exporting namespaced attributes", function() {
expect(5); expect(5);
@@ -164,7 +164,7 @@
'<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' + '<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' +
'</svg>'); '</svg>');
var attrVal = document.getElementById('se_test_elem').getAttributeNS("http://svg-edit.googlecode.com", "foo"); var attrVal = document.getElementById('se_test_elem').getAttributeNS("http://svg-edit.googlecode.com", "foo");
equal(attrVal === "bar", true, "Preserved namespaced attribute on import"); equal(attrVal === "bar", true, "Preserved namespaced attribute on import");
// //
//console.log('getSvgString' in svgCanvas) //console.log('getSvgString' in svgCanvas)
@@ -176,13 +176,13 @@
var has_se = output.indexOf('xmlns:se=') !== -1; var has_se = output.indexOf('xmlns:se=') !== -1;
var has_foo = output.indexOf('xmlns:foo=') !== -1; var has_foo = output.indexOf('xmlns:foo=') !== -1;
var has_attr = output.indexOf('se:foo="bar"') !== -1; var has_attr = output.indexOf('se:foo="bar"') !== -1;
equal(has_attr, true, "Preserved namespaced attribute on export"); equal(has_attr, true, "Preserved namespaced attribute on export");
equal(has_xlink, true, "Included xlink: xmlns"); equal(has_xlink, true, "Included xlink: xmlns");
equal(has_se, true, "Included se: xmlns"); equal(has_se, true, "Included se: xmlns");
equal(has_foo, false, "Did not include foo: xmlns"); equal(has_foo, false, "Did not include foo: xmlns");
}); });
test("Test import math elements inside a foreignObject", function() { test("Test import math elements inside a foreignObject", function() {
expect(4); expect(4);
var set = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">'+ var set = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">'+
@@ -198,28 +198,28 @@
// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute // we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042 // see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
var math = fo.firstChild; var math = fo.firstChild;
equal(!!math, true, "Math element exists"); equal(!!math, true, "Math element exists");
equal(math.nodeName, 'math', "Math element has the proper nodeName"); equal(math.nodeName, 'math', "Math element has the proper nodeName");
equal(math.getAttribute('id'), 'm', "Math element has an id"); equal(math.getAttribute('id'), 'm', "Math element has an id");
equal(math.namespaceURI, "http://www.w3.org/1998/Math/MathML", "Preserved MathML namespace"); equal(math.namespaceURI, "http://www.w3.org/1998/Math/MathML", "Preserved MathML namespace");
}); });
test("Test importing SVG into existing drawing", function() { test("Test importing SVG into existing drawing", function() {
expect(3); expect(3);
var doc = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+ var doc = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+
'<g><title>Layer 1</title>'+ '<g><title>Layer 1</title>'+
'<circle cx="200" cy="200" r="50" fill="blue"/>'+ '<circle cx="200" cy="200" r="50" fill="blue"/>'+
'<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>'+ '<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>'+
'</g>'+ '</g>'+
'</svg>'); '</svg>');
svgCanvas.importSvgString('<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">'+ svgCanvas.importSvgString('<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">'+
'<circle cx="50" cy="50" r="40" fill="yellow"/>'+ '<circle cx="50" cy="50" r="40" fill="yellow"/>'+
'<rect width="20" height="20" fill="blue"/>'+ '<rect width="20" height="20" fill="blue"/>'+
'</svg>'); '</svg>');
var svgcontent = document.getElementById("svgcontent"), var svgcontent = document.getElementById("svgcontent"),
circles = svgcontent.getElementsByTagNameNS(svgns, "circle"), circles = svgcontent.getElementsByTagNameNS(svgns, "circle"),
rects = svgcontent.getElementsByTagNameNS(svgns, "rect"), rects = svgcontent.getElementsByTagNameNS(svgns, "rect"),
@@ -231,7 +231,7 @@
test("Test importing SVG remaps IDs", function() { test("Test importing SVG remaps IDs", function() {
expect(6); expect(6);
var doc = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+ var doc = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+
'<g><title>Layer 1</title>'+ '<g><title>Layer 1</title>'+
'<ellipse id="svg_1" cx="200" cy="200" rx="50" ry="20" fill="blue"/>'+ '<ellipse id="svg_1" cx="200" cy="200" rx="50" ry="20" fill="blue"/>'+
@@ -239,7 +239,7 @@
'<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>'+ '<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>'+
'</g>'+ '</g>'+
'</svg>'); '</svg>');
svgCanvas.importSvgString('<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">'+ svgCanvas.importSvgString('<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">'+
'<defs>'+ '<defs>'+
'<linearGradient id="svg_2">'+ '<linearGradient id="svg_2">'+
@@ -251,7 +251,7 @@
'<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>'+ '<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>'+
'<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>'+ '<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>'+
'</svg>'); '</svg>');
var svgcontent = document.getElementById("svgcontent"), var svgcontent = document.getElementById("svgcontent"),
circles = svgcontent.getElementsByTagNameNS(svgns, "circle"), circles = svgcontent.getElementsByTagNameNS(svgns, "circle"),
rects = svgcontent.getElementsByTagNameNS(svgns, "rect"), rects = svgcontent.getElementsByTagNameNS(svgns, "rect"),
@@ -269,11 +269,11 @@
notEqual(rects.item(0).getAttribute("stroke"), "url(#svg_2)", "Rectangle stroke value not remapped"); notEqual(rects.item(0).getAttribute("stroke"), "url(#svg_2)", "Rectangle stroke value not remapped");
notEqual(uses.item(0).getAttributeNS(xlinkns, "href"), "#svg_3"); notEqual(uses.item(0).getAttributeNS(xlinkns, "href"), "#svg_3");
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<h1 id="qunit-header">Unit Tests for SvgCanvas</h1> <h1 id="qunit-header">Unit Tests for SvgCanvas</h1>
<h2 id="qunit-banner"></h2> <h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2> <h2 id="qunit-userAgent"></h2>
@@ -285,5 +285,5 @@
<div id="tools_left"></div> <div id="tools_left"></div>
<div class="tools_flyout"></div> <div class="tools_flyout"></div>
</div> </div>
</body> </body>
</html> </html>

24
test/units_test.html
View File

@@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Unit Tests for units.js</title> <title>Unit Tests for units.js</title>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/> <link rel="stylesheet" href="qunit/qunit.css"/>
<script src='../editor/jquery.js'></script> <script src="../editor/jquery.js"></script>
<script src='../editor/svgedit.js'></script> <script src="../editor/svgedit.js"></script>
<script src='../editor/units.js'></script> <script src="../editor/units.js"></script>
<script src='qunit/qunit.js'></script> <script src="qunit/qunit.js"></script>
<script> <script>
$(function() { $(function() {
// log function // log function
@@ -92,14 +92,14 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id='qunit-header'>Unit Tests for units.js</h1> <h1 id="qunit-header">Unit Tests for units.js</h1>
<h2 id='qunit-banner'></h2> <h2 id="qunit-banner"></h2>
<h2 id='qunit-userAgent'></h2> <h2 id="qunit-userAgent"></h2>
<ol id='qunit-tests'></ol> <ol id="qunit-tests"></ol>
<div id='anchor' style='visibility:hidden'></div> <div id="anchor" style="visibility:hidden"></div>
<div id="elementsContainer"> <div id="elementsContainer">
<div id='uniqueId' style='visibility:hidden'></div> <div id="uniqueId" style="visibility:hidden"></div>
<div id='nonUniqueId' style='visibility:hidden'></div> <div id="nonUniqueId" style="visibility:hidden"></div>
</div> </div>
</body> </body>
</html> </html>

36
wave/svg-edit.xml
View File

@@ -9,10 +9,10 @@
<base href="http://svg-edit.googlecode.com/svn-history/r1142/branches/2.4/editor/svg-editor.html"> <base href="http://svg-edit.googlecode.com/svn-history/r1142/branches/2.4/editor/svg-editor.html">
<link rel="stylesheet" href="jgraduate/css/jPicker-1.0.9.css" type="text/css"/> <link rel="stylesheet" href="jgraduate/css/jPicker-1.0.9.css"/>
<link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css" type="text/css"/> <link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/> <link rel="stylesheet" href="svg-editor.css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/> <link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css"/>
<!-- Development version of script tags: --> <!-- Development version of script tags: -->
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="js-hotkeys/jquery.hotkeys.min.js"></script> <script src="js-hotkeys/jquery.hotkeys.min.js"></script>
@@ -48,7 +48,7 @@ script src="locale/locale.min.js"></script-->
<div id="svg_editor"> <div id="svg_editor">
<div id="workarea"> <div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style> <style id="styleoverrides" media="screen" scoped="scoped"></style>
<div id="svgcanvas"></div> <div id="svgcanvas"></div>
</div> </div>
@@ -62,7 +62,7 @@ script src="locale/locale.min.js"></script-->
<div id="layer_up" class="layer_button" title="Move Layer Up"></div> <div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div> <div id="layer_down" class="layer_button" title="Move Layer Down"></div>
</fieldset> </fieldset>
<table id="layerlist"> <table id="layerlist">
<tr class="layer"> <tr class="layer">
<td class="layervis"></td> <td class="layervis"></td>
@@ -83,7 +83,7 @@ script src="locale/locale.min.js"></script-->
</div> </div>
<div id="tools_top" class="tools_panel"> <div id="tools_top" class="tools_panel">
<!-- File-like buttons: New, Save, Source --> <!-- File-like buttons: New, Save, Source -->
<div id="file_panel"> <div id="file_panel">
<div class="push_button" id="tool_clear" title="New Image [N]"></div> <div class="push_button" id="tool_clear" title="New Image [N]"></div>
@@ -100,7 +100,7 @@ script src="locale/locale.min.js"></script-->
<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div> <div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div> <div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</div> </div>
<!-- Buttons when a single element is selected --> <!-- Buttons when a single element is selected -->
<div id="selected_panel"> <div id="selected_panel">
<div class="toolset"> <div class="toolset">
@@ -181,7 +181,7 @@ script src="locale/locale.min.js"></script-->
<div class="toolset"> <div class="toolset">
<label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label> <label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label>
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/> <input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
</div> </div>
</div> </div>
<div id="image_panel"> <div id="image_panel">
@@ -245,7 +245,7 @@ script src="locale/locale.min.js"></script-->
<div id="text_panel"> <div id="text_panel">
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div> <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div> <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<div class="toolset"> <div class="toolset">
<input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/> <input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/>
<div id="font_family_dropdown" class="dropdown"> <div id="font_family_dropdown" class="dropdown">
@@ -266,7 +266,7 @@ script src="locale/locale.min.js"></script-->
</div> </div>
<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/> <input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
</div> </div>
<div id="path_node_panel"> <div id="path_node_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<div class="tool_button" id="tool_node_link" title="Link Control Points"></div> <div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
@@ -282,7 +282,7 @@ script src="locale/locale.min.js"></script-->
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div> <div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div> <div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
</div> </div>
</div> <!-- tools_top --> </div> <!-- tools_top -->
<div id="tools_left" class="tools_panel"> <div id="tools_left" class="tools_panel">
@@ -400,15 +400,15 @@ script src="locale/locale.min.js"></script-->
<label> <label>
<span id="svginfo_title">Title:</span> <span id="svginfo_title">Title:</span>
<input type="text" id="canvas_title" size="24"> <input type="text" id="canvas_title" size="24">
</label> </label>
<fieldset id="change_resolution"> <fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend> <legend id="svginfo_dim">Canvas Dimensions</legend>
<label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" size="6"></label> <label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" size="6"></label>
<label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" size="6"></label> <label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" size="6"></label>
<label> <label>
<select id="resolution"> <select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option> <option id="selectedPredefined" selected="selected">Select predefined:</option>
@@ -426,7 +426,7 @@ script src="locale/locale.min.js"></script-->
<legend id="includedImages">Included Images</legend> <legend id="includedImages">Included Images</legend>
<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label> <label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label> <label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label>
</fieldset> </fieldset>
</fieldset> </fieldset>
@@ -463,7 +463,7 @@ script src="locale/locale.min.js"></script-->
<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="21"></label> <label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="21"></label>
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p> <p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
</fieldset> </fieldset>
</fieldset> </fieldset>
</div> </div>