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

Merge branch 'master' of https://github.com/SVG-Edit/svgedit

Browse Source
This commit is contained in:
Agriya Dev5
2021-05-22 13:32:01 +05:30
parent acb667c446 bebc71358c
commit 0579213abf
1048 changed files with 54098 additions and 53780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintignore
View File

@@ -20,17 +20,12 @@ svgedit-custom.css
# Vendor/minified files # Vendor/minified files
src/editor/jquery.min.js src/editor/jquery.min.js
src/editor/jquery-ui
# Previously minified though exporting # Previously minified though exporting
src/editor/js-hotkeys src/editor/js-hotkeys
src/editor/jspdf/jspdf.min.js
src/editor/jspdf/underscore-min.js
src/editor/extensions/ext-mathjax/mathjax src/editor/extensions/ext-mathjax/mathjax
# jquery files # jquery files
src/editor/svgicons/jQuery.svgIcons.js
src/editor/jgraduate/jQuery.jPicker.js src/editor/jgraduate/jQuery.jPicker.js

291
.eslintrc.js
View File

@@ -8,9 +8,10 @@ module.exports = {
"plugin:promise/recommended", "plugin:promise/recommended",
"plugin:import/errors", "plugin:import/errors",
"plugin:markdown/recommended", "plugin:markdown/recommended",
"plugin:sonarjs/recommended" "plugin:sonarjs/recommended",
"eslint:recommended"
], ],
plugins: ["jsdoc", "promise", "html", "import", "sonarjs"], plugins: [ "jsdoc", "promise", "html", "import", "sonarjs" ],
parserOptions: { parserOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
sourceType: "module" sourceType: "module"
@@ -19,261 +20,67 @@ module.exports = {
browser: true, browser: true,
es6: true es6: true
}, },
settings: {
polyfills: [
// These are the primary polyfills needed by regular users if
// not present, e.g., with core-js-bundle; also those under
// extensions
"fetch",
"Promise",
"Promise.all",
// 'Set',
"Uint8Array",
"URL"
]
},
rules: { rules: {
// check-examples is not picking up eslint config properly in some /** @todo len should probably more 120-150 */
// environments; see also discussion above "max-len": [ "warn", { "code": 250 } ],
// `mocha-cleanup/no-assertions-outside-it` /** @todo jsdoc should be made warn or error */
"sonarjs/cognitive-complexity": 0, "valid-jsdoc": "off",
"sonarjs/no-duplicate-string": 0, /** @todo cognitive complexity should be much lower (25-50?) */
"sonarjs/no-collapsible-if": 0, "sonarjs/cognitive-complexity": [ "warn", 200 ],
"sonarjs/no-small-switch": 0, /** @todo no param reassign creates too many warnings but should be a warning */
"sonarjs/no-identical-functions": 0, "no-param-reassign": "off",
"sonarjs/no-duplicated-branches": 0, "node/no-unsupported-features/es-syntax": 0,
"no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ],
"jsdoc/check-examples": [ "sonarjs/no-duplicate-string": 0,
"semi" : "error",
"no-trailing-spaces": "error",
"array-bracket-spacing": [ "error", "always" ],
"comma-spacing": "error",
"object-curly-spacing": [ "error", "always" ],
"no-console": [
"warn", "warn",
{ { "allow": [ "warn", "error", "info", "table" ] }
rejectExampleCodeRegex: "^`",
checkDefaults: true,
checkParams: true,
checkProperties: true
}
], ],
// The Babel transform seems to have a problem converting these "arrow-parens": [ "error", "always" ],
"prefer-named-capture-group": "off",
"jsdoc/require-file-overview": [
"error",
{
tags: {
file: {
initialCommentsOnly: true,
preventDuplicates: true
},
license: {
initialCommentsOnly: true,
preventDuplicates: true
},
copyright: {
initialCommentsOnly: true,
preventDuplicates: true
},
author: {
initialCommentsOnly: true,
preventDuplicates: true
},
module: {
initialCommentsOnly: true,
preventDuplicates: true
},
exports: {
initialCommentsOnly: true,
preventDuplicates: true
}
}
}
],
// Warning or Off for now but should be reviewed
// Override these rules which are difficult for us
// to apply at this time
"default-case": "off",
"require-unicode-regexp": "off",
"max-len": ["warn", { ignoreComments: true, code: 130 }], // 130 is too much but too many occurences
"eslint-comments/require-description": "off",
"compat/compat": "error",
"consistent-this": "off",
"import/no-anonymous-default-export": "off",
"node/no-unsupported-features/node-builtins": "warn",
"prefer-exponentiation-operator": "warn",
"node/no-unsupported-features/es-syntax": "off",
"no-unsanitized/method": [
"error",
{
escape: {
methods: ["encodeURIComponent", "encodeURI"]
}
}
]
}, },
overrides: [ overrides: [
// Locales have no need for importing outside of SVG-Edit
// and translations may need a longer line length
{ {
files: [ files: [ 'cypress/**/*' ],
'src/editor/locale/lang.*.js',
'src/editor/extensions/*/locale/**',
'docs/tutorials/ExtensionDocs.md/*.js'
],
rules: {
"import/no-anonymous-default-export": "off",
"max-len": "off",
"node/no-missing-import": "off",
"import/no-unresolved": "off"
}
},
// These browser files don't do importing or requiring
{
files: [
"src/editor/touch.js",
"src/editor/typedefs.js",
"src/editor/redirect-on-no-module-support.js",
"src/editor/extensions/ext-imagelib/index.js",
"screencasts/svgopen2010/script.js"
],
rules: {
"import/unambiguous": ["off"]
}
},
{
files: ["**/*.html", "screencasts/**"],
globals: {
root: "off"
},
settings: {
polyfills: [
"document.querySelector",
"history",
"history.pushState",
"history.replaceState",
"location.hash",
"navigator",
"Number.parseFloat",
"Number.parseInt",
"Number.isNaN"
]
},
rules: {
"import/unambiguous": "off"
}
},
{
// As consumed by jsdoc, cannot be expressed as ESM
files: ["docs/jsdoc-config.js"],
parserOptions: {
sourceType: "script"
},
globals: {
module: false
},
rules: {
"import/no-commonjs": "off",
strict: "off"
}
},
{
files: ["cypress/**"],
extends: [ extends: [
"plugin:cypress/recommended", "plugin:cypress/recommended"
"plugin:mocha/recommended",
"plugin:mocha-cleanup/recommended-no-limits",
"plugin:@fintechstudios/chai-as-promised/recommended",
"plugin:chai-expect-keywords/recommended",
"plugin:chai-expect/recommended",
"plugin:chai-friendly/recommended"
], ],
env: { env: {
mocha: true,
node: true node: true
}, },
settings: { globals: { "assert": true },
polyfills: [
"console",
"Date.now",
"document.body",
"document.createElementNS",
"document.head",
"DOMParser",
"Number.isNaN",
"Object.keys",
"Object.entries",
"Promise"
]
},
rules: { rules: {
// These errors are caused in Cypress files if user has not // with ci, instrumented is not created before linter
// yet instrumented code; need to reinvestigate why we had to "import/no-unresolved": [ 2, { ignore: [ 'instrumented' ] } ],
// instrument separately from nyc mocha "node/no-missing-import": 0
"import/no-unresolved": ["error", { ignore: ["/instrumented/"] }],
"node/no-missing-import": "off",
"jsdoc/check-examples": "off",
"chai-expect-keywords/no-unsupported-keywords": [
"error",
{
allowChaiDOM: true
}
],
// Would be good but seems necessary due to some bugs in Cypress
// in detecting visibility
// 'cypress/no-force': 0,
// Good but would be difficult to enforce (and data-* may not be less
// brittle than IDs/classes anyways)
// 'cypress/require-data-selectors': 0,
"cypress/assertion-before-screenshot": 2,
// Conflicts with Cypress `should`
"mocha-cleanup/invalid-assertions": 0,
// Might see about working around to avoid the option limitation,
// but convenient
"mocha-cleanup/no-expressions-in-assertions": [
"error",
{
replacementsOnly: true
}
],
// Too oppressive when planning to extend a section
"mocha/no-hooks-for-single-case": 0,
// Would be good to enable but needs some refactoring
"mocha/no-setup-in-describe": 0,
"mocha-cleanup/no-outside-declaration": 0,
// Useful to ensure allowing `this.timeout()`, etc., but a
// little oppressive
"mocha/no-mocha-arrows": 0,
// Useful if enabling the regular `prefer-arrow-callback`
// 'mocha/prefer-arrow-callback': 2
"jsdoc/require-jsdoc": 0,
"no-console": 0,
"import/unambiguous": 0
} }
}, },
{ {
// Node files files: [ 'docs/**/*' ],
files: [ rules: { // md files have example that don't need a strict checking
"docs/jsdoc-config.js", "no-undef": 0,
"build/build-html.js", "import/no-unresolved": 0,
"rollup.config.js", "node/no-missing-import": 0,
"rollup-config.config.js" "jsdoc/check-examples": [
], "warn",
env: { {
node: true rejectExampleCodeRegex: "^`",
}, checkDefaults: true,
settings: { checkParams: true,
polyfills: ["console", "Promise.resolve"] checkProperties: true
}, }
globals: { ]
require: true }
}, },
rules: { {
// We can't put Rollup in npmignore or user can't get access, files: [ 'src/editor/locale/*.js' ],
// and we have too many modules to add to `peerDependencies` rules: { // lang files may have long length
// so this rule can know them to be available, so we instead "max-len": "off",
// disable
"node/no-unpublished-import": "off"
} }
} }
] ]

2
.github/FUNDING.yml vendored
View File

@@ -1 +1 @@
github: [brettz9] # May have up to 4 comma-separated user names github: [brettz9 , OptimistikSAS] # May have up to 4 comma-separated user names

2
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@@ -4,7 +4,7 @@ about: Create a report in case we may be able to help
labels: bug - unconfirmed labels: bug - unconfirmed
--- ---
**PLEASE NOTE: This project is not currently being actively developed due to the core developers having moved on, and the only remaining maintainer merely applying occasional minor PRs or tweaks to keep the project alive. While you can file an issue, you should not expect any action, even if we label the issue.** **PLEASE NOTE: We are trying to make this project live again. While you can file an issue, we will do our best but you should not expect any action, even if we label the issue. However, we are welcoming new contributors **
**Describe the bug** **Describe the bug**
A clear and concise description of what the bug is. A clear and concise description of what the bug is.

20
.github/workflows/onpushandpullrequest.yml vendored Normal file
View File

@@ -0,0 +1,20 @@
name: Node CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: 14.x
- name: npm install, test and lint
run: |
npm ci
npm run lint
npm run test

8
.gitignore vendored
View File

@@ -1,21 +1,17 @@
ignore ignore
node_modules node_modules
svgedit-custom.css
docs/jsdoc docs/jsdoc
cypress/results cypress/results
cypress/screenshots cypress/screenshots
cypress/videos cypress/videos
cypress.env.json cypress.env.json
coverage coverage
instrumented instrumented
.nyc_output .nyc_output
mochawesome-report mochawesome-report
mochawesome.json mochawesome.json
.vscode .vscode
.eslintcache .eslintcache
.DS_Store .DS_Store
.idea
dist

6
CHANGES.md
View File

@@ -1,5 +1,11 @@
# SVG-Edit CHANGES # SVG-Edit CHANGES
## 7.0.0 (preview - work in progress)
- New UI
- Rearchitecture the code (more modular)
- simplify and refresh the build process
- Introduce Web Component to replace jQuery UI
- update dependencies
## 6.0.0 (unreleased) ## 6.0.0 (unreleased)
- Project: Add `FUNDING.yml` to accept contributions - Project: Add `FUNDING.yml` to accept contributions

1
Gemfile
View File

@@ -1 +0,0 @@
gem "github-pages", :source => "https://rubygems.org"

186
README.md
View File

@@ -1,4 +1,6 @@
# ![LOGO](src/editor/images/logo.png) SVG-edit <img src="https://svg-edit.github.io/svgedit/src/editor/images/logo.svg" width="50" height="50" />
# SVG-Edit
[![npm](https://img.shields.io/npm/v/svgedit.svg)](https://www.npmjs.com/package/svgedit) [![npm](https://img.shields.io/npm/v/svgedit.svg)](https://www.npmjs.com/package/svgedit)
[![Dependencies](https://img.shields.io/david/SVG-Edit/svgedit.svg)](https://david-dm.org/SVG-Edit/svgedit) [![Dependencies](https://img.shields.io/david/SVG-Edit/svgedit.svg)](https://david-dm.org/SVG-Edit/svgedit)
@@ -14,205 +16,67 @@
[![Total Alerts](https://img.shields.io/lgtm/alerts/g/SVG-Edit/svgedit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/SVG-Edit/svgedit/alerts) [![Total Alerts](https://img.shields.io/lgtm/alerts/g/SVG-Edit/svgedit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/SVG-Edit/svgedit/alerts)
[![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/SVG-Edit/svgedit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/SVG-Edit/svgedit/context:javascript) [![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/SVG-Edit/svgedit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/SVG-Edit/svgedit/context:javascript)
[![Licenses badge](https://raw.githubusercontent.com/SVG-Edit/svgedit/master/badges/licenses-badge.svg?sanitize=true)](badges/licenses-badge.svg)
(see also [licenses for dev. deps.](https://raw.githubusercontent.com/SVG-Edit/svgedit/master/badges/licenses-badge-dev.svg?sanitize=true))
(Note: The license provenance of the images in `/editor/images` may not be
fully clear, even with the origin of some of the images listed as being from <http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/>. We would like to
replace these images if their provenance cannot be determined or is found to
be under a protective license. If you know of the original terms, or can help
create SVG replacement images, please let us know at:
[#377](https://github.com/SVG-Edit/svgedit/issues/377).)
<!-- [![License](https://img.shields.io/npm/l/svgedit.svg)](LICENSE-MIT) -->
[![issuehunt-to-marktext](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/r/SVG-Edit/svgedit) [![issuehunt-to-marktext](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/r/SVG-Edit/svgedit)
SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that
works in any modern browser. works in any modern browser.
![screenshot](docs/screenshot.png) ![screenshot](docs/screenshot.png)
[SVG](https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg) [](https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg)
## Help wanted ## Help wanted
While we have made some recent releases to SVG-edit for bug fixes, SVG-Edit is the most popular open source SVG editor. It was started more than 10 years ago by a fantastic team of developers. Unfortunately, the product was not maintained for a quite long period. We decided to give this tool a new life by refreshing many aspects.
refactoring and documentation to make the codebase more maintainable, the If you can help us to maintain SVG-Edit, you are more than welcome!
core developers responsible for the bulk of the drawing features are no
longer active with the project, so we would love others familiar with SVG
to join the project.
## Demo ## Demo
### [Try SVG-edit here](https://svg-edit.github.io/svgedit/dist/editor/index.html) Thanks to Netlify, you can test the following builds:
We also build a systemJS version at [`master`](https://svg-edit.github.io/svgedit/dist/editor/system/index.html) ### [Try SVG-edit V7-preview here](https://svgedit.netlify.app/editor/index.html)
You may also obtain URLs for specific [releases](https://github.com/SVG-Edit/svgedit/releases). [Try SVG-edit 5.1.0 here](https://6098683962bf91702907ee33--svgedit.netlify.app/editor/svg-editor.html)
[Try SVG-edit 6.1.0 here](https://60a0000fc9900b0008fd268d--svgedit.netlify.app/editor/index.html)
## Installation ## Installation
### Quick install ### Quick install
1. Clone or copy the repository contents (at least the `editor` directory). 1. Clone or copy the repository contents
Please note that you should not do a recursive Git clone (i.e., with the 1. run `npm i` to install dependencies
`--recursive` or `--recurse-submodules` flags), as you will get assorted 1. run `npm run start` to start a local server
past versions (which are available on the parent as branches anyways). 1. Use your browser to access `http://localhost:8000/src/editor/index.html`
(The reason these past versions are available as submodules is merely
for convenience in hosting these versions, along with `master`, online
on Github Pages.)
1. If you need programmatic customization, see its section below.
1. Otherwise, just add an iframe to your site, adding any extensions or
configuration (see `docs/tutorials/ConfigOptions.md`
([ConfigOptions]{@tutorial ConfigOptions})) within the URL:
```html ### Integrating SVG-edit into your own application
<iframe src="svgedit/src/editor/svg-editor.html?extensions="
width="100%" height="100%"></iframe>
```
Note that if you want support for the following browsers, you will at least V7 is changing significantly the way to integrate and customize SVG-Edit. The documentation will be detailed here.
need some polyfills.
For Android Browser 4.4.3-4.4.4, you will need at least `fetch`. SVG-Edit is made of two major components:
1. The "svgcanvas" that takes care of the underlying svg edition. It can be used to build your own editor. See example in the demos folder or the svg-edit-react repository.
For the following, you will need at least `URL`, `Promise`, and `fetch`: 1. The "editor" that takes care of the editor UI (menus, buttons, etc.)
- IE <= 11
- IE Mobile
- Opera Mini
- Blackberry Browser <= 10
And for still older browsers (e.g., IE 8), you will at minimum need a
`querySelector` polyfill.
### Integrating SVG-edit into your own npm package
These steps are only needed if you wish to set up your own npm package
incorporating SVGEdit. You will need to have Node.js/npm installed.
1. Create and enter an empty folder somewhere on your desktop.
1. Create your npm package: `npm init` (complete the fields).
1. Install SVG-edit into your package:
`npm i --save svgedit`.
1. Look within `node_modules/svgedit/`, e.g., `node_modules/svgedit/src/editor/svg-editor.html`
for the files your package needs and use accordingly (from outside of
`node_modules`).
1. If you want to publish your own work, you can use `npm publish`.
## Programmatic customization
1. If you are not concerned about supporting ES6 Modules (see the
"ES6 Modules file" section), you can add your config directly to
`svgedit-config-iife.js` within the SVG-Edit project root.
1. Note: Do not remove the `import svgEditor...` code which is responsible
for importing the SVG edit code. Versions prior to 3.0 did not require
this, but the advantage is that your HTML does not need to be polluted
with extra script references.
1. Modify or utilize any options. See `docs/tutorials/ConfigOptions.md`
([ConfigOptions]{@tutorial ConfigOptions}).
## ES6 Modules file
1. `svg-editor-es.html` is an HTML file directly using ES6 modules.
It is only supported in the latest browsers. It is probably mostly
useful for debugging, as it requires more network requests.
If you would like to work with this file, you should make configuration
changes in `svgedit-config-es.js` (in the SVG-Edit project root).
1. If you are working with the ES6 Modules config but also wish to work with
the normal `svg-editor.html` version (so your code can work in older
browsers or get the presumable performance benefits of this file which
references JavaScript rolled up into a single file), you can follow these
steps after any config changes you make, so that your changes can also be
automatically made available to both versions.
1. JavaScript:
1. Run `npm install` within the svgedit directory
(`node_modules/svgedit` if you installed via npm) and the root
repository directory if you cloned the Git repository instead.
This will install the build tools for SVG-edit.
1. Run `npm run build-by-config` within the svgedit directory mentioned
in the step above.
1. This will rebuild `svgedit-config-iife.js` (applying Babel to
allow it to work on older browsers and applying Rollup to build
all JavaScript into one file). The file will then contain
non-ES6 module JavaScript that can work in older browsers.
Note that it bundles all of SVGEdit, so it is to be expected
that this file will be much larger in size than the original
ES6 config file.
1. HTML:
1. If you wish to make changes to both HTML files, it is recommended that
you work and test on `svg-editor-es.html` and then run
`npm run build-html` to have the changes properly copied to
`svg-editor.html`.
## Recent news
- 2020-02-22 Published 6.0.0 License clarifications/updates, PDF export
improvements, clipboard `sessionStorage`, and other changes.
- 2019-11-16 Published 5.1.0 Misc. fixes and refactoring
- 2019-05-07 Published 5.0.0 Change from `@babel/polyfill`
- 2019-04-03 Published 4.3.0 Fix for double click on gradient
picker droplets affecting some browsers and dragging control
point of arc. Other misc. fixes. Some accessibility and i18n.
- 2018-12-13 Published 4.2.0 (Chinese (simplified) and Russian locale
updates; retaining lines with grid mode)
- 2018-11-29 Published 4.1.0 (Fix for hyphenated locales, svgcanvas
distributions)
- 2018-11-16 Published 4.0.0/4.0.1 (Move to Promise-based APIs)
- 2018-11-01 Published 3.2.0 (Update qunit to resolve security vulnerability
of a dependency)
- 2018-10-25 Published 3.1.1 (Fix for saving SVG on Firefox)
- 2018-10-24 Published 3.1.0 (Redirect on modular page for non-module-support;
versions document (for migrating))
- 2018-10-22 Published 3.0.1 (Revert fix affecting polygon selection)
- 2018-10-21 Published 3.0.0 (misc. improvements including centering canvas and
key locale fixes since last RC)
- 2018-09-30 Published 3.0.0-rc.3 with security and other fixes
- 2018-07-31 Published 3.0.0-rc.2 with misc. fixes
- 2018-07-19 Published 3.0.0-rc.1 allowing for extensions and locales to be
expressed as modules
- 2018-05-26 Published 3.0.0-alpha.2 with ES6 Modules support
- 2017-07 Added to Packagist: https://packagist.org/packages/svg-edit/svgedit
- 2015-12-02 SVG-edit 2.8.1 was released.
- 2015-11-24 SVG-edit 2.8 was released.
- 2015-11-24 Code, issue tracking, and docs are being moved to github
(previously [code.google.com](https://code.google.com/p/svg-edit)).
- 2014-04-17 2.7 and stable branches updated to reflect 2.7.1 important bug
fixes for the embedded editor.
- 2014-04-07 SVG-edit 2.7 was released.
- 2013-01-15 SVG-edit 2.6 was released.
## Videos
* [SVG-edit 2.4 Part 1](https://www.youtube.com/watch?v=zpC7b1ZJvvM)
* [SVG-edit 2.4 Part 2](https://www.youtube.com/watch?v=mDzZEoGUDe8)
* [SVG-edit 2.3 Features](https://www.youtube.com/watch?v=RVIcIy5fXOc)
* [Introduction to SVG-edit](https://www.youtube.com/watch?v=ZJKmEI06YiY) (Version 2.2)
For earlier versions of SVG-Edit, please look in their respective branches.
## Supported browsers ## Supported browsers
- Opera 59+, - Opera 59+,
- IE 12+,
- Chrome 75+, - Chrome 75+,
- FireFox 68+, - FireFox 68+,
- Safari 10+ - Safari 11+
- Edge 18+
Support for old browsers may require to use an older version of the package. However, Support for old browsers may require to use an older version of the package. However,
please open an issue if you need support for a specific version of your browser so please open an issue if you need support for a specific version of your browser so
the project team can decide if we should support with the latest version. the project team can decide if we should support with the latest version.
## Further reading and more information ## Further reading and more information
* Participate in [discussions](https://github.com/SVG-Edit/svgedit/discussions)
* See [docs](docs/) for more documentation. See the * See [docs](docs/) for more documentation. See the
[JSDocs for our latest release](https://svg-edit.github.io/svgedit/releases/latest/docs/jsdoc/index.html). [JSDocs for our latest release](https://svg-edit.github.io/svgedit/releases/latest/docs/jsdoc/index.html).
* [Acknowledgements](docs/Acknowledgements.md) lists open source projects * [Acknowledgements](docs/Acknowledgements.md) lists open source projects
used in svg-edit. used in svg-edit.
* See [AUTHORS](AUTHORS) file for authors. * See [AUTHORS](AUTHORS) file for authors.
* [StackOverflow](https://stackoverflow.com/tags/svg-edit) group. * [StackOverflow](https://stackoverflow.com/tags/svg-edit) group.
* Join the [svg-edit mailing list](https://groups.google.com/forum/#!forum/svg-edit).
* Join us on `#svg-edit` on `freenode.net` (or use the
[web client](https://webchat.freenode.net/?channels=svg-edit)).
# Hosting # Hosting
SVGedit versions are deployed to: SVGedit versions are deployed to:
[![Deploys by Netlify](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com) [![Deploys by Netlify](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)

2
archive/from-old-wiki/CodeRefactoring.md
View File

@@ -32,7 +32,7 @@ Current Tasks
1) I introduced the concept of a Drawing earlier on that would encapsulate the state of a single open SVG document. The SVG editor has a handle to the current drawing and uses that instead of accessing svg DOM elements directly. Eventually all code that deals with layers, current editing context, document history and more will be moved into draw.js but for now, much of that code still lives in svgcanvas.js. 1) I introduced the concept of a Drawing earlier on that would encapsulate the state of a single open SVG document. The SVG editor has a handle to the current drawing and uses that instead of accessing svg DOM elements directly. Eventually all code that deals with layers, current editing context, document history and more will be moved into draw.js but for now, much of that code still lives in svgcanvas.js.
2) I'm in the process of migrating a large chunk of svgcanvas.js called "pathActions" into its own module (path.js). This piece of code did have a lot of dependencies so moving it piece-by-piece seemed like the right way to go. Currently it's about half-way migrated, with most of the 'public API' still living in svgcanvas.js. 1) I'm in the process of migrating a large chunk of svgcanvas.js called "pathActions" into its own module (path.js). This piece of code did have a lot of dependencies so moving it piece-by-piece seemed like the right way to go. Currently it's about half-way migrated, with most of the 'public API' still living in svgcanvas.js.
TODOs TODOs
Finish moving layers functionality into the Drawing class Finish moving layers functionality into the Drawing class

0
gh-disabled-workflows/coverage.yml → archive/gh-disabled-workflows/coverage.yml
View File

0
gh-disabled-workflows/nodejs.yml → archive/gh-disabled-workflows/nodejs.yml
View File

0
gh-disabled-workflows/npmpublish.yml → archive/gh-disabled-workflows/npmpublish.yml
View File

2
badges/coverage-badge.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="428" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h109v20H120zM229 0h87v20h-87zM316 0h112v20H316z"/><path fill="url(#smooth)" d="M0 0h428v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 52.81%</text><text class="high" x="5" y="14">Statements 52.81%</text><text class="shadow" x="125.5" y="15">Branches 41.64%</text><text class="high" x="125" y="14">Branches 41.64%</text><text class="shadow" x="234.5" y="15">Lines 53.62%</text><text class="high" x="234" y="14">Lines 53.62%</text><text class="shadow" x="321.5" y="15">Functions 60.18%</text><text class="high" x="321" y="14">Functions 60.18%</text></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="403" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h102v20H120zM222 0h87v20h-87zM309 0h94v20h-94z"/><path fill="url(#smooth)" d="M0 0h403v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 46.86%</text><text class="high" x="5" y="14">Statements 46.86%</text><text class="shadow" x="125.5" y="15">Branches 35.1%</text><text class="high" x="125" y="14">Branches 35.1%</text><text class="shadow" x="227.5" y="15">Lines 47.67%</text><text class="high" x="227" y="14">Lines 47.67%</text><text class="shadow" x="314.5" y="15">Functions 54%</text><text class="high" x="314" y="14">Functions 54%</text></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

1
badges/licenses-badge-dev.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

1
badges/licenses-badge.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="863" height="116"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="navy" d="M0 0h227v116H0z"/><path fill="green" d="M227 0h265v116H227z"/><path fill="#cc0" d="M492 0h128v116H492z"/><path fill="#a9a9a9" d="M620 0h243v116H620z"/><path fill="url(#smooth)" d="M0 0h863v116H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">License types</text><text class="high" x="5" y="14">License types</text><text class="shadow" x="5.5" y="27">(project, deps, and bundled devDeps)</text><text class="high" x="5" y="26">(project, deps, and bundled devDeps)</text><text class="shadow" x="232.5" y="15">Permissive</text><text class="high" x="232" y="14">Permissive</text><text class="shadow" x="232.5" y="39">1. (MIT OR Apache-2.0)</text><text class="high" x="232" y="38">1. (MIT OR Apache-2.0)</text><text class="shadow" x="232.5" y="51">2. (MPL-2.0 OR Apache-2.0)</text><text class="high" x="232" y="50">2. (MPL-2.0 OR Apache-2.0)</text><text class="shadow" x="232.5" y="63">3. Apache-2.0</text><text class="high" x="232" y="62">3. Apache-2.0</text><text class="shadow" x="232.5" y="75">4. ISC</text><text class="high" x="232" y="74">4. ISC</text><text class="shadow" x="232.5" y="87">5. MIT</text><text class="high" x="232" y="86">5. MIT</text><text class="shadow" x="232.5" y="99">6. MIT OR SEE LICENSE IN FEEL-FREE.md</text><text class="high" x="232" y="98">6. MIT OR SEE LICENSE IN FEEL-FREE.md</text><text class="shadow" x="232.5" y="111">7. X11</text><text class="high" x="232" y="110">7. X11</text><text class="shadow" x="497.5" y="15">Weakly</text><text class="high" x="497" y="14">Weakly</text><text class="shadow" x="497.5" y="27">protective</text><text class="high" x="497" y="26">protective</text><text class="shadow" x="497.5" y="51">1. LGPL-3.0-or-later</text><text class="high" x="497" y="50">1. LGPL-3.0-or-later</text><text class="shadow" x="625.5" y="15">Uncategorized</text><text class="high" x="625" y="14">Uncategorized</text><text class="shadow" x="625.5" y="39">1. Chromium&apos;s License (pathseg (1.2.0))</text><text class="high" x="625" y="38">1. Chromium&apos;s License (pathseg (1.2.0))</text></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

2
badges/tests-badge.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#e05d44" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">140/141</text><text class="high" x="46" y="14">140/141</text></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="83" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h42v20H41z"/><path fill="url(#smooth)" d="M0 0h83v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">21/21</text><text class="high" x="46" y="14">21/21</text></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 823 B

After

Width:  |  Height:  |  Size: 817 B

4
composer.json
View File

@@ -25,6 +25,10 @@
{ {
"name": "Brett Zamir", "name": "Brett Zamir",
"email": "brettz9@yahoo.com" "email": "brettz9@yahoo.com"
},
{
"name": "Optimistik SAS",
"email": "contact@optimistik.fr"
} }
], ],
"keywords": [ "keywords": [

2
cypress.json
View File

@@ -8,6 +8,8 @@
"ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"], "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"],
"defaultCommandTimeout": 10000, "defaultCommandTimeout": 10000,
"pageLoadTimeout": 120000, "pageLoadTimeout": 120000,
"includeShadowDom": true,
"scrollBehavior": false,
"cypress-plugin-snapshots": { "cypress-plugin-snapshots": {
"autoCleanUp": true, "autoCleanUp": true,
"prettier": true, "prettier": true,

283
cypress/integration/ui/__snapshots__/scenario.js.snap
View File

@@ -91,13 +91,13 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
> >
B AB
</text> </text>
</g> </g>
</svg> </svg>
@@ -137,13 +137,13 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -152,14 +152,14 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
id="svg_2" id="svg_2"
> >
B AB
</text> </text>
</g> </g>
</svg> </svg>
@@ -199,14 +199,14 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
font-="" font-=""
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -215,7 +215,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -223,7 +223,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
id="svg_2" id="svg_2"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
> >
B AB
</text> </text>
</g> </g>
</svg> </svg>
@@ -263,7 +263,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -271,7 +271,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
font-="" font-=""
font-weight="bold" font-weight="bold"
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -280,7 +280,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -288,7 +288,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
id="svg_2" id="svg_2"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
> >
B AB
</text> </text>
</g> </g>
</svg> </svg>
@@ -328,7 +328,7 @@ exports[`use various parts of svg-edit > check change color #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -336,7 +336,7 @@ exports[`use various parts of svg-edit > check change color #0`] = `
font-="" font-=""
font-weight="bold" font-weight="bold"
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -345,7 +345,7 @@ exports[`use various parts of svg-edit > check change color #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -353,13 +353,13 @@ exports[`use various parts of svg-edit > check change color #0`] = `
id="svg_2" id="svg_2"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
> >
B AB
</text> </text>
</g> </g>
</svg> </svg>
`; `;
exports[`use various parts of svg-edit > check tool_start #0`] = ` exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = `
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
@@ -371,8 +371,8 @@ exports[`use various parts of svg-edit > check tool_start #0`] = `
y="480" y="480"
viewBox="0 0 640 480" viewBox="0 0 640 480"
> >
<g class="layer" style="pointer-events:all"> <g class="layer">
<title style="pointer-events:inherit">Layer 1</title> <title>Layer 1</title>
<rect <rect
id="rect" id="rect"
fill="#FF0000" fill="#FF0000"
@@ -382,7 +382,6 @@ exports[`use various parts of svg-edit > check tool_start #0`] = `
width="94" width="94"
x="69.5" x="69.5"
y="51.5" y="51.5"
style="pointer-events:inherit"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
></rect> ></rect>
@@ -394,15 +393,15 @@ exports[`use various parts of svg-edit > check tool_start #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="start"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
font-style="italic" font-=""
font-weight="bold" font-weight="bold"
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -411,7 +410,7 @@ exports[`use various parts of svg-edit > check tool_start #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -419,33 +418,138 @@ exports[`use various parts of svg-edit > check tool_start #0`] = `
id="svg_2" id="svg_2"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
> >
B AB
</text> </text>
<polygon </g>
cx="407" </svg>
cy="45" `;
id="svg_3"
shape="star" exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = `
point="5" <svg
r="13.333333333333334" xmlns="http://www.w3.org/2000/svg"
radialshift="" xmlns:svg="http://www.w3.org/2000/svg"
r2="5.333333333333334" width="640"
orient="point" height="480"
fill="#000000" id="svgcontent"
strokecolor="#000000" overflow="visible"
strokeWidth="0" x="640"
points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 " y="480"
viewBox="0 0 640 480"
>
<g class="layer">
<title>Layer 1</title>
<rect
id="rect"
fill="#FF0000"
height="70"
stroke="#000000"
stroke-width="5"
width="94"
x="69.5"
y="51.5"
fill-opacity="1"
stroke-opacity="1"
></rect>
<text
fill="#ffff00"
stroke="#000000" stroke="#000000"
stroke-width="0" stroke-width="0"
x="116"
y="87"
id="svg_1"
font-size="24"
font-family="Serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
font-=""
font-weight="bold"
> >
<animate AB
attributeName="opacity" </text>
begin="indefinite" <text
dur="0.2" fill="#000000"
fill="freeze" stroke="#000000"
to="1" stroke-width="0"
></animate> x="136"
</polygon> y="107"
font-size="24"
font-family="Serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
AB
</text>
</g>
</svg>
`;
exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer">
<title>Layer 1</title>
<rect
id="rect"
fill="#FF0000"
height="70"
stroke="#000000"
stroke-width="5"
width="94"
x="69.5"
y="51.5"
fill-opacity="1"
stroke-opacity="1"
></rect>
<text
fill="#ffff00"
stroke="#000000"
stroke-width="0"
x="116"
y="87"
id="svg_1"
font-size="24"
font-family="Serif"
text-anchor="end"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
font-=""
font-weight="bold"
>
AB
</text>
<text
fill="#000000"
stroke="#000000"
stroke-width="0"
x="136"
y="107"
font-size="24"
font-family="Serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
AB
</text>
</g> </g>
</svg> </svg>
`; `;
@@ -462,8 +566,8 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
y="480" y="480"
viewBox="0 0 640 480" viewBox="0 0 640 480"
> >
<g class="layer" style="pointer-events:all"> <g class="layer">
<title style="pointer-events:inherit">Layer 1</title> <title>Layer 1</title>
<rect <rect
id="rect" id="rect"
fill="#FF0000" fill="#FF0000"
@@ -473,7 +577,6 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
width="94" width="94"
x="69.5" x="69.5"
y="51.5" y="51.5"
style="pointer-events:inherit"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
></rect> ></rect>
@@ -485,15 +588,15 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="end"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
font-style="italic" font-=""
font-weight="bold" font-weight="bold"
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -502,7 +605,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -510,22 +613,22 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
id="svg_2" id="svg_2"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
> >
B AB
</text> </text>
<polygon <polygon
cx="407" cx="370"
cy="45" cy="202"
id="svg_3" id="svg_3"
shape="star" shape="star"
point="5" point="5"
r="13.333333333333334" r="66.66666666666667"
radialshift="" radialshift="0"
r2="5.333333333333334" r2="22.222222222222225"
orient="point" orient="point"
fill="#000000" fill="#ffff00"
strokecolor="#000000" strokecolor="#000000"
strokeWidth="0" strokewidth="0"
points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 " points="370,135.33333333333331 383.0618944953883,184.02184456944562 433.40376775301024,181.39886704167017 391.13458925100343,208.86704431944327 409.18568348616486,255.93446629166317 370,224.22222222222223 330.81431651383514,255.93446629166317 348.86541074899657,208.86704431944327 306.59623224698976,181.39886704167017 356.9381055046117,184.02184456944562 370,135.33333333333331 383.0618944953883,184.02184456944562 "
stroke="#000000" stroke="#000000"
stroke-width="0" stroke-width="0"
> >
@@ -553,8 +656,8 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
y="480" y="480"
viewBox="0 0 640 480" viewBox="0 0 640 480"
> >
<g class="layer" style="pointer-events:all"> <g class="layer">
<title style="pointer-events:inherit">Layer 1</title> <title>Layer 1</title>
<rect <rect
id="rect" id="rect"
fill="#FF0000" fill="#FF0000"
@@ -564,7 +667,6 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
width="94" width="94"
x="69.5" x="69.5"
y="51.5" y="51.5"
style="pointer-events:inherit"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
></rect> ></rect>
@@ -576,15 +678,15 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
y="87" y="87"
id="svg_1" id="svg_1"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="end"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
font-style="italic" font-=""
font-weight="bold" font-weight="bold"
> >
B AB
</text> </text>
<text <text
fill="#000000" fill="#000000"
@@ -593,7 +695,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
x="136" x="136"
y="107" y="107"
font-size="24" font-size="24"
font-family="serif" font-family="Serif"
text-anchor="middle" text-anchor="middle"
xml:space="preserve" xml:space="preserve"
fill-opacity="1" fill-opacity="1"
@@ -601,40 +703,39 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
id="svg_2" id="svg_2"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
> >
B AB
</text> </text>
<polygon <polygon
cx="407" cx="370"
cy="45" cy="202"
id="svg_3" id="svg_3"
shape="star" shape="star"
point="5" point="5"
r="13.333333333333334" r="66.66666666666667"
radialshift="" radialshift="0"
r2="5.333333333333334" r2="22.222222222222225"
orient="point" orient="point"
fill="#000000" fill="#ffff00"
strokecolor="#000000" strokecolor="#000000"
strokeWidth="0" strokewidth="0"
points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 " points="370,135.33333333333331 383.0618944953883,184.02184456944562 433.40376775301024,181.39886704167017 391.13458925100343,208.86704431944327 409.18568348616486,255.93446629166317 370,224.22222222222223 330.81431651383514,255.93446629166317 348.86541074899657,208.86704431944327 306.59623224698976,181.39886704167017 356.9381055046117,184.02184456944562 370,135.33333333333331 383.0618944953883,184.02184456944562 "
stroke="#000000" stroke="#000000"
stroke-width="0" stroke-width="0"
style="pointer-events:inherit"
fill-opacity="1" fill-opacity="1"
stroke-opacity="1" stroke-opacity="1"
></polygon> ></polygon>
<polygon <polygon
cx="457" cx="420"
cy="95" cy="302"
id="svg_4" id="svg_4"
shape="regularPoly" shape="regularPoly"
sides="5" sides="5"
orient="x" orient="x"
edge="6.666666666666667" edge="80"
fill="#000000" fill="#ffff00"
strokecolor="#000000" strokecolor="#000000"
strokeWidth="5" strokewidth="5"
points="462.6710053890136,95 458.7524370403971,100.39344662916632 452.4120602650961,98.33333333333333 452.4120602650961,91.66666666666667 458.7524370403971,89.60655337083368 462.6710053890136,95 " points="488.0520646681632,302 441.02924448476534,366.7213595499958 364.94472318115305,342 364.94472318115305,262 441.02924448476534,237.27864045000422 488.0520646681632,302 "
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
> >

21
cypress/integration/ui/accessibility.js
View File

@@ -1,19 +1,22 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
describe('UI - Accessibility', function () { describe('UI - Accessibility', function () {
beforeEach(() => { beforeEach(() => {
cy.visit('/instrumented/editor/index.html'); visitAndApproveStorage();
cy.injectAxe(); cy.injectAxe();
}); });
// https://www.npmjs.com/package/cypress-axe // https://www.npmjs.com/package/cypress-axe
it('Has no detectable a11y violations on load', () => { it.skip('Has no detectable a11y violations on load', () => {
// Configure aXe and test the page at initial load // Configure aXe and test the page at initial load
cy.configureAxe({ cy.configureAxe({
// Todo: Reenable when have time to fix // Todo: Reenable when have time to fix
// See https://www.deque.com/axe/axe-for-web/documentation/api-documentation/#user-content-parameters-1 // See https://www.deque.com/axe/axe-for-web/documentation/api-documentation/#user-content-parameters-1
rules: [{ rules: [ {
id: 'meta-viewport', id: 'meta-viewport',
enabled: false enabled: false
}] } ]
/* /*
branding: { branding: {
brand: String, brand: String,
@@ -29,10 +32,10 @@ describe('UI - Accessibility', function () {
{}, {},
{ {
rules: { rules: {
'label-title-only': {enabled: false}, 'label-title-only': { enabled: false },
'page-has-heading-one': {enabled: false}, 'page-has-heading-one': { enabled: false },
region: {enabled: false}, region: { enabled: false },
'scrollable-region-focusable': {enabled: false} 'scrollable-region-focusable': { enabled: false }
} }
} }
); );

20
cypress/integration/ui/clipboard.js
View File

@@ -11,13 +11,13 @@ describe('UI - Clipboard', function () {
cy.get('#tool_source').click(); cy.get('#tool_source').click();
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
<circle cx="100" cy="100" r="50" fill="#FF0000" id="testCircle" stroke="#000000" stroke-width="5"/> <circle cx="100" cy="100" r="50" fill="#FF0000" id="testCircle" stroke="#000000" stroke-width="5"/>
</g> </g>
</svg>`, {force: true, parseSpecialCharSequences: false}); </svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click(); cy.get('#tool_source_save').click();
cy.get('#testCircle').should('exist'); cy.get('#testCircle').should('exist');
cy.get('#svg_1').should('not.exist'); cy.get('#svg_1').should('not.exist');
@@ -25,20 +25,20 @@ describe('UI - Clipboard', function () {
// Copy. // Copy.
cy.get('#testCircle').click().rightclick(); cy.get('#testCircle').click().rightclick();
cy.get('#cmenu_canvas a[href="#copy"]').click({force: true}); cy.get('#cmenu_canvas a[href="#copy"]').click({ force: true });
// Paste. // Paste.
// Scrollbars fail to recenter in Cypress test. Works fine in reality. // Scrollbars fail to recenter in Cypress test. Works fine in reality.
// Thus forcing click is needed since workspace is mostly offscreen. // Thus forcing click is needed since workspace is mostly offscreen.
cy.get('#svgroot').rightclick({force: true}); cy.get('#svgroot').rightclick({ force: true });
cy.get('#cmenu_canvas a[href="#paste"]').click({force: true}); cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true });
cy.get('#testCircle').should('exist'); cy.get('#testCircle').should('exist');
cy.get('#svg_1').should('exist'); cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('not.exist'); cy.get('#svg_2').should('not.exist');
// Cut. // Cut.
cy.get('#testCircle').click().rightclick(); cy.get('#testCircle').click().rightclick();
cy.get('#cmenu_canvas a[href="#cut"]').click({force: true}); cy.get('#cmenu_canvas a[href="#cut"]').click({ force: true });
cy.get('#testCircle').should('not.exist'); cy.get('#testCircle').should('not.exist');
cy.get('#svg_1').should('exist'); cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('not.exist'); cy.get('#svg_2').should('not.exist');
@@ -46,17 +46,17 @@ describe('UI - Clipboard', function () {
// Paste. // Paste.
// Scrollbars fail to recenter in Cypress test. Works fine in reality. // Scrollbars fail to recenter in Cypress test. Works fine in reality.
// Thus forcing click is needed since workspace is mostly offscreen. // Thus forcing click is needed since workspace is mostly offscreen.
cy.get('#svgroot').rightclick({force: true}); cy.get('#svgroot').rightclick({ force: true });
cy.get('#cmenu_canvas a[href="#paste"]').click({force: true}); cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true });
cy.get('#testCircle').should('not.exist'); cy.get('#testCircle').should('not.exist');
cy.get('#svg_1').should('exist'); cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('exist'); cy.get('#svg_2').should('exist');
// Delete. // Delete.
cy.get('#svg_2').click().rightclick(); cy.get('#svg_2').click().rightclick();
cy.get('#cmenu_canvas a[href="#delete"]').click({force: true}); cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true });
cy.get('#svg_1').click().rightclick(); cy.get('#svg_1').click().rightclick();
cy.get('#cmenu_canvas a[href="#delete"]').click({force: true}); cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true });
cy.get('#svg_1').should('not.exist'); cy.get('#svg_1').should('not.exist');
cy.get('#svg_2').should('not.exist'); cy.get('#svg_2').should('not.exist');
}); });

22
cypress/integration/ui/control-points.js
View File

@@ -10,24 +10,24 @@ describe('UI - Control Points', function () {
it('Editor - No parameters: Drag control point of arc path', () => { it('Editor - No parameters: Drag control point of arc path', () => {
const randomOffset = () => 2 + Math.round(10 + Math.random() * 40); const randomOffset = () => 2 + Math.round(10 + Math.random() * 40);
cy.get('#tool_source').click(); cy.get('#tool_source').click();
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
<path d="m187,194a114,62 0 1 0 219,2" id="svg_1" fill="#FF0000" stroke="#000000" stroke-width="5"/> <path d="m187,194a114,62 0 1 0 219,2" id="svg_1" fill="#FF0000" stroke="#000000" stroke-width="5"/>
</g> </g>
</svg>`, {force: true, parseSpecialCharSequences: false}); </svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click(); cy.get('#tool_source_save').click({ force: true });
cy.get('#svg_1').click().click();
cy.get('#pathpointgrip_0').trigger('mousedown', {which: 1, force: true}) cy.get('#svg_1').click({ force: true }).click({ force: true });
.trigger('mousemove', randomOffset(), randomOffset(), {force: true})
.trigger('mouseup', {force: true}); cy.get('#pathpointgrip_0').trigger('mousedown', { which: 1, force: true })
cy.get('#pathpointgrip_1').trigger('mousedown', {which: 1, force: true}) .trigger('mousemove', randomOffset(), randomOffset(), { force: true })
.trigger('mousemove', randomOffset(), randomOffset(), {force: true}) .trigger('mouseup', { force: true });
.trigger('mouseup', {force: true}); cy.get('#pathpointgrip_1').trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', randomOffset(), randomOffset(), { force: true })
.trigger('mouseup', { force: true });
cy.get('#svg_1[d]').should('not.contain', 'NaN'); cy.get('#svg_1[d]').should('not.contain', 'NaN');
}); });

2
cypress/integration/ui/export.js
View File

@@ -14,7 +14,7 @@ describe('UI - Export tests', function () {
it('Editor - No parameters: Export button clicking; dialog opens', () => { it('Editor - No parameters: Export button clicking; dialog opens', () => {
openMainMenu(); openMainMenu();
cy.get('#tool_export').click({force: true}); cy.get('#tool_export').click({ force: true });
cy.get('#dialog_content select'); cy.get('#dialog_content select');
}); });
}); });

4
cypress/integration/ui/issues/issue-359.js
View File

@@ -11,13 +11,13 @@ describe('Fix issue 359', function () {
it('can undo without throwing', function () { it('can undo without throwing', function () {
cy.get('#tool_source').click(); cy.get('#tool_source').click();
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
<rect fill="#ffff00" height="70" width="165" x="179.5" y="146.5"/> <rect fill="#ffff00" height="70" width="165" x="179.5" y="146.5"/>
</g> </g>
</svg>`, {parseSpecialCharSequences: false, force: true}); </svg>`, { parseSpecialCharSequences: false, force: true });
cy.get('#tool_source_save').click(); cy.get('#tool_source_save').click();
cy.get('#tool_undo').click(); cy.get('#tool_undo').click();
cy.get('#tool_redo').click(); // test also redo to make the test more comprehensive cy.get('#tool_redo').click(); // test also redo to make the test more comprehensive

21
cypress/integration/ui/issues/issue-364.js
View File

@@ -1,21 +0,0 @@
import {
visitAndApproveStorage
} from '../../../support/ui-test-helper.js';
// See https://github.com/SVG-Edit/svgedit/issues/364
describe('Issue 364; IE errorwith rectangle selection by click', function () {
beforeEach(() => {
visitAndApproveStorage();
});
it('should set rectangle selection after click', function () {
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.get('#tools_rect_show')
.trigger('mousedown', {force: true})
.wait(100) // this delay seems necessary
.trigger('mouseup', {force: true})
.should((button) => {
expect(button).to.have.class('tool_button_current');
});
});
});

12
cypress/integration/ui/issues/issue-407.js
View File

@@ -11,7 +11,7 @@ describe('Fix issue 407', function () {
it('can enter edit on text child', function () { it('can enter edit on text child', function () {
cy.get('#tool_source').click(); cy.get('#tool_source').click();
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
@@ -20,16 +20,16 @@ describe('Fix issue 407', function () {
<text fill="#000000" id="a_text" text-anchor="middle" x="260.5" xml:space="preserve" y="192.5">hello</text> <text fill="#000000" id="a_text" text-anchor="middle" x="260.5" xml:space="preserve" y="192.5">hello</text>
</g> </g>
</g> </g>
</svg>`, {parseSpecialCharSequences: false}); </svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click(); cy.get('#tool_source_save').click();
cy.get('#svg_1').click().dblclick(); cy.get('#svg_1').click().dblclick();
cy.get('#a_text').should('exist'); cy.get('#a_text').should('exist');
cy.get('#a_text') cy.get('#a_text')
.trigger('mousedown', {which: 1, force: true}) .trigger('mousedown', { which: 1, force: true })
.trigger('mouseup', {force: true}) .trigger('mouseup', { force: true })
.dblclick({force: true}); .dblclick({ force: true });
// svgedit use the #text text field to capture the text // svgedit use the #text text field to capture the text
cy.get('#text').type('1234', {force: true}); cy.get('#text').type('1234', { force: true });
cy.get('#a_text').should('have.text', 'he1234llo'); cy.get('#a_text').should('have.text', 'he1234llo');
}); });
}); });

4
cypress/integration/ui/issues/issue-408.js
View File

@@ -11,7 +11,7 @@ describe('Fix issue 408', function () {
it('should not throw when showing/saving svg content', function () { it('should not throw when showing/saving svg content', function () {
cy.get('#tool_source').click(); cy.get('#tool_source').click();
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
@@ -20,7 +20,7 @@ describe('Fix issue 408', function () {
<circle cx="117.5" cy="87.5" fill="#ffff00" r="19.84943" stroke="#000000" /> <circle cx="117.5" cy="87.5" fill="#ffff00" r="19.84943" stroke="#000000" />
</g> </g>
</g> </g>
</svg>`, {parseSpecialCharSequences: false}); </svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click(); cy.get('#tool_source_save').click();
cy.get('#svg_6').click().dblclick(); // change context cy.get('#svg_6').click().dblclick(); // change context
cy.get('#tool_source').click(); // reopen tool_source cy.get('#tool_source').click(); // reopen tool_source

14
cypress/integration/ui/issues/issue-423.js
View File

@@ -11,7 +11,7 @@ describe('Fix issue 423', function () {
it('should not throw when undoing the move', function () { it('should not throw when undoing the move', function () {
cy.get('#tool_source').click(); cy.get('#tool_source').click();
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> .type(`<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
@@ -22,12 +22,12 @@ describe('Fix issue 423', function () {
<rect clip-path="url(#svg_2)" fill="#0033b5" height="174.9" id="TANK1" width="78" x="77.5" y="29"/> <rect clip-path="url(#svg_2)" fill="#0033b5" height="174.9" id="TANK1" width="78" x="77.5" y="29"/>
</g> </g>
</g> </g>
</svg>`, {parseSpecialCharSequences: false, force: true}); </svg>`, { parseSpecialCharSequences: false, force: true });
cy.get('#tool_source_save').click({force: true}); cy.get('#tool_source_save').click({ force: true });
cy.get('#TANK1') cy.get('#TANK1')
.trigger('mousedown', {force: true}) .trigger('mousedown', { force: true })
.trigger('mousemove', 50, 0, {force: true}) .trigger('mousemove', 50, 0, { force: true })
.trigger('mouseup', {force: true}); .trigger('mouseup', { force: true });
cy.get('#tool_undo').click({force: true}); cy.get('#tool_undo').click({ force: true });
}); });
}); });

2
cypress/integration/ui/key-commands.js
View File

@@ -8,7 +8,7 @@ describe('Key commands', function () {
visitAndApproveStorage(); visitAndApproveStorage();
}); });
it('cmd-A on empty canvas should not cause an error', function () { it.skip('cmd-A on empty canvas should not cause an error', function () {
cy.get('body').type('{cmd}a'); cy.get('body').type('{cmd}a');
}); });
}); });

81
cypress/integration/ui/scenario.js
View File

@@ -12,80 +12,97 @@ describe('use various parts of svg-edit', function () {
}); });
it('check tool_source', function () { it('check tool_source', function () {
cy.get('#tool_source').click({force: true}); cy.get('#tool_source').click({ force: true });
cy.get('#svg_source_textarea') cy.get('#svg_source_textarea')
.type('{selectall}', {force: true}) .type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer"> <g class="layer">
<title>Layer 1</title> <title>Layer 1</title>
<rect id="rect" fill="#FF0000" height="70" stroke="#000000" stroke-width="5" width="94" x="69.5" y="51.5"/> <rect id="rect" fill="#FF0000" height="70" stroke="#000000" stroke-width="5" width="94" x="69.5" y="51.5"/>
</g> </g>
</svg>`, {force: true, parseSpecialCharSequences: false}); </svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({force: true}); cy.get('#tool_source_save').click({ force: true });
testSnapshot(); testSnapshot();
}); });
it('check tool_fhpath', function () { it('check tool_fhpath', function () {
cy.get('#tool_fhpath') cy.get('#tool_fhpath')
.click({force: true}); .click({ force: true });
cy.get('#rect') cy.get('#rect')
.trigger('mousemove', 200, 200, {force: true}) .trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, {force: true}) .trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 20, 20, {force: true}) .trigger('mousemove', 20, 20, { force: true })
.trigger('mouseup', {force: true}); .trigger('mouseup', { force: true });
cy.get('#svgcontent').toMatchSnapshot(); cy.get('#svgcontent').toMatchSnapshot();
}); });
it('check tool_text', function () { it('check tool_text', function () {
cy.get('#tool_text') cy.get('#tool_text')
.click({force: true}); .click({ force: true });
cy.get('#rect') cy.get('#rect')
.trigger('mousedown', 'center', {force: true}) .trigger('mousedown', 46, 35, { force: true })
.trigger('mouseup', {force: true}); .trigger('mouseup', { force: true });
// svgedit use the #text text field to capture the text // svgedit use the #text text field to capture the text
// cy.get('#text').type('1234', {force: true}); cy.get('#text').type('AB', { force: true });
cy.get('#text').type('B', {force: true});
testSnapshot(); testSnapshot();
}); });
it('check tool_clone', function () { it('check tool_clone', function () {
cy.get('#svg_1').click({force: true}); cy.get('#svg_1').click({ force: true });
cy.get('#tool_clone') cy.get('#tool_clone')
.click({force: true}); .click({ force: true });
testSnapshot(); testSnapshot();
}); });
it('check tool_italic', function () { it('check tool_italic', function () {
cy.get('#svg_1').click({force: true}); cy.get('#svg_1').click({ force: true });
cy.get('#tool_italic') cy.get('#tool_italic')
.click({force: true}); .click({ force: true });
testSnapshot(); testSnapshot();
}); });
it('check tool_bold', function () { it('check tool_bold', function () {
cy.get('#svg_1').click({force: true}); cy.get('#svg_1').click({ force: true });
cy.get('#tool_bold') cy.get('#tool_bold')
.click({force: true}); .click({ force: true });
testSnapshot(); testSnapshot();
}); });
it('check change color', function () { it('check change color', function () {
cy.get('#svg_1').click({force: true}); cy.get('#svg_1').click({ force: true });
cy.get('[data-rgb="#ffff00"]') cy.get('[data-rgb="#ffff00"]')
.click({force: true}); .click({ force: true });
testSnapshot();
});
it('check tool_text_anchor_start', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_text_anchor_start')
.click({ force: true });
testSnapshot();
});
it('check tool_text_anchor_middle', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_text_anchor_middle')
.click({ force: true });
testSnapshot();
});
it('check tool_text_anchor_end', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_text_anchor_end')
.click({ force: true });
testSnapshot(); testSnapshot();
}); });
it('check tool_star', function () { it('check tool_star', function () {
cy.get('#tool_star') cy.get('#tool_star')
.click({force: true}); .click({ force: true });
cy.get('#svgcontent') cy.get('#svgcontent')
.trigger('mousedown', {which: 1, pageX: 600, pageY: 150, force: true}) .trigger('mousedown', 300, 150, { force: true })
.trigger('mousemove', {which: 1, pageX: 600, pageY: 170, force: true}) .trigger('mousemove', 300, 250, { force: true })
.trigger('mouseup', {force: true}); .trigger('mouseup', { force: true });
cy.get('#svgcontent').toMatchSnapshot(); testSnapshot();
}); });
it('check tool_polygon', function () { it('check tool_polygon', function () {
cy.get('#tool_polygon') cy.get('#tool_polygon')
.click({force: true}); .click({ force: true });
cy.get('#svgcontent') cy.get('#svgcontent')
.trigger('mousedown', {which: 1, pageX: 650, pageY: 200, force: true}) .trigger('mousedown', 350, 250, { force: true })
.trigger('mousemove', {which: 1, pageX: 650, pageY: 210, force: true}) .trigger('mousemove', 350, 370, { force: true })
.trigger('mouseup', {force: true}); .trigger('mouseup', { force: true });
cy.get('#svgcontent').toMatchSnapshot(); testSnapshot();
}); });
}); });

13
cypress/integration/ui/tool-selection.js
View File

@@ -8,13 +8,10 @@ describe('UI - Tool selection', function () {
}); });
it('should set rectangle selection by click', function () { it('should set rectangle selection by click', function () {
// eslint-disable-next-line cypress/no-unnecessary-waiting cy.get('#tools_rect')
cy.get('#tools_rect_show') .should('not.have.attr', 'pressed');
.trigger('mousedown', {force: true}) cy.get('#tools_rect')
.wait(100) // this delay seems necessary .trigger('click', { force: true })
.trigger('mouseup', {force: true}) .should('have.attr', 'pressed');
.should((button) => {
expect(button).to.have.class('tool_button_current');
});
}); });
}); });

12
cypress/integration/unit/contextmenu.js
View File

@@ -19,26 +19,26 @@ describe('contextmenu', function () {
it('Test svgedit.contextmenu does not add invalid menu item', function () { it('Test svgedit.contextmenu does not add invalid menu item', function () {
assert.throws( assert.throws(
() => contextmenu.add({id: 'justanid'}), () => contextmenu.add({ id: 'justanid' }),
null, null, null, null,
'menu item with just an id is invalid' 'menu item with just an id is invalid'
); );
assert.throws( assert.throws(
() => contextmenu.add({id: 'idandlabel', label: 'anicelabel'}), () => contextmenu.add({ id: 'idandlabel', label: 'anicelabel' }),
null, null, null, null,
'menu item with just an id and label is invalid' 'menu item with just an id and label is invalid'
); );
assert.throws( assert.throws(
() => contextmenu.add({id: 'idandlabel', label: 'anicelabel', action: 'notafunction'}), () => contextmenu.add({ id: 'idandlabel', label: 'anicelabel', action: 'notafunction' }),
null, null, null, null,
'menu item with action that is not a function is invalid' 'menu item with action that is not a function is invalid'
); );
}); });
it('Test svgedit.contextmenu adds valid menu item', function () { it('Test svgedit.contextmenu adds valid menu item', function () {
const validItem = {id: 'valid', label: 'anicelabel', action () { /* empty fn */ }}; const validItem = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } };
contextmenu.add(validItem); contextmenu.add(validItem);
assert.ok(contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.'); assert.ok(contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.');
@@ -46,8 +46,8 @@ describe('contextmenu', function () {
}); });
it('Test svgedit.contextmenu rejects valid duplicate menu item id', function () { it('Test svgedit.contextmenu rejects valid duplicate menu item id', function () {
const validItem1 = {id: 'valid', label: 'anicelabel', action () { /* empty fn */ }}; const validItem1 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } };
const validItem2 = {id: 'valid', label: 'anicelabel', action () { /* empty fn */ }}; const validItem2 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } };
contextmenu.add(validItem1); contextmenu.add(validItem1);
assert.throws( assert.throws(

4
cypress/integration/unit/coords.js
View File

@@ -1,7 +1,7 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as coords from '../../../instrumented/svgcanvas/coords.js'; import * as coords from '../../../instrumented/svgcanvas/coords.js';
describe('coords', function () { describe('coords', function () {

15
cypress/integration/unit/draw.js
View File

@@ -1,6 +1,6 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as draw from '../../../instrumented/svgcanvas/draw.js'; import * as draw from '../../../instrumented/svgcanvas/draw.js';
import * as units from '../../../instrumented/common/units.js'; import * as units from '../../../instrumented/common/units.js';
@@ -44,7 +44,7 @@ describe('draw.Drawing', function () {
const getCurrentDrawing = function () { const getCurrentDrawing = function () {
return currentDrawing_; return currentDrawing_;
}; };
const setCurrentGroup = (cg) => { /* empty fn */ }; const setCurrentGroup = () => { /* empty fn */ };
draw.init( draw.init(
/** /**
* @implements {module:draw.DrawCanvasInit} * @implements {module:draw.DrawCanvasInit}
@@ -61,7 +61,7 @@ describe('draw.Drawing', function () {
*/ */
function createSVGElement (jsonMap) { function createSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element); const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([attr, value]) => { Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value); elem.setAttribute(attr, value);
}); });
return elem; return elem;
@@ -86,7 +86,7 @@ describe('draw.Drawing', function () {
layer3.append(layer3Title); layer3.append(layer3Title);
svgElem.append(layer3); svgElem.append(layer3);
return [layer1, layer2, layer3]; return [ layer1, layer2, layer3 ];
}; };
const createSomeElementsInGroup = function (group) { const createSomeElementsInGroup = function (group) {
@@ -101,11 +101,11 @@ describe('draw.Drawing', function () {
// }), // }),
createSVGElement({ createSVGElement({
element: 'rect', element: 'rect',
attr: {x: '0', y: '1', width: '5', height: '10'} attr: { x: '0', y: '1', width: '5', height: '10' }
}), }),
createSVGElement({ createSVGElement({
element: 'line', element: 'line',
attr: {x1: '0', y1: '1', x2: '5', y2: '6'} attr: { x1: '0', y1: '1', x2: '5', y2: '6' }
}) })
); );
@@ -115,7 +115,7 @@ describe('draw.Drawing', function () {
}); });
g.append(createSVGElement({ g.append(createSVGElement({
element: 'rect', element: 'rect',
attr: {x: '0', y: '1', width: '5', height: '10'} attr: { x: '0', y: '1', width: '5', height: '10' }
})); }));
group.append(g); group.append(g);
return 4; return 4;
@@ -727,7 +727,6 @@ describe('draw.Drawing', function () {
drawing.setLayerOpacity(LAYER3, -1.4); drawing.setLayerOpacity(LAYER3, -1.4);
assert.strictEqual(drawing.getLayerOpacity(LAYER1), 0.4); assert.strictEqual(drawing.getLayerOpacity(LAYER1), 0.4);
// console.log('layer2 opacity ' + drawing.getLayerOpacity(LAYER2));
assert.strictEqual(drawing.getLayerOpacity(LAYER2), 1.0); assert.strictEqual(drawing.getLayerOpacity(LAYER2), 1.0);
assert.strictEqual(drawing.getLayerOpacity(LAYER3), 1.0); assert.strictEqual(drawing.getLayerOpacity(LAYER3), 1.0);

28
cypress/integration/unit/history.js
View File

@@ -1,20 +1,20 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as transformlist from '../../../instrumented/common/svgtransformlist.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as hstory from '../../../instrumented/svgcanvas/history.js'; import * as hstory from '../../../instrumented/svgcanvas/history.js';
describe('history', function () { describe('history', function () {
// TODO(codedread): Write tests for handling history events. // TODO(codedread): Write tests for handling history events.
// Mocked out methods. // Mocked out methods.
transformlist.changeRemoveElementFromListMap((elem) => { /* empty fn */ }); transformlist.changeRemoveElementFromListMap(() => { /* empty fn */ });
utilities.mock({ utilities.mock({
getHref (elem) { return '#foo'; }, getHref () { return '#foo'; },
setHref (elem, val) { /* empty fn */ }, setHref () { /* empty fn */ },
getRotationAngle (elem) { return 0; } getRotationAngle () { return 0; }
}); });
// const svg = document.createElementNS(NS.SVG, 'svg'); // const svg = document.createElementNS(NS.SVG, 'svg');
@@ -402,7 +402,7 @@ describe('history', function () {
it('Test ChangeElementCommand', function () { it('Test ChangeElementCommand', function () {
this.div1.setAttribute('title', 'new title'); this.div1.setAttribute('title', 'new title');
let change = new hstory.ChangeElementCommand(this.div1, let change = new hstory.ChangeElementCommand(this.div1,
{title: 'old title', class: 'foo'}); { title: 'old title', class: 'foo' });
assert.ok(change.unapply); assert.ok(change.unapply);
assert.ok(change.apply); assert.ok(change.apply);
assert.equal(typeof change.unapply, typeof function () { /* empty fn */ }); assert.equal(typeof change.unapply, typeof function () { /* empty fn */ });
@@ -418,7 +418,7 @@ describe('history', function () {
this.div1.textContent = 'inner text'; this.div1.textContent = 'inner text';
change = new hstory.ChangeElementCommand(this.div1, change = new hstory.ChangeElementCommand(this.div1,
{'#text': null}); { '#text': null });
change.unapply(); change.unapply();
assert.ok(!this.div1.textContent); assert.ok(!this.div1.textContent);
@@ -428,7 +428,7 @@ describe('history', function () {
this.div1.textContent = ''; this.div1.textContent = '';
change = new hstory.ChangeElementCommand(this.div1, change = new hstory.ChangeElementCommand(this.div1,
{'#text': 'old text'}); { '#text': 'old text' });
change.unapply(); change.unapply();
assert.equal(this.div1.textContent, 'old text'); assert.equal(this.div1.textContent, 'old text');
@@ -452,12 +452,12 @@ describe('history', function () {
assert.equal(val, sethrefvalue); assert.equal(val, sethrefvalue);
justCalled = 'setHref'; justCalled = 'setHref';
}, },
getRotationAngle (elem) { return 0; } getRotationAngle () { return 0; }
}); });
gethrefvalue = '#newhref'; gethrefvalue = '#newhref';
change = new hstory.ChangeElementCommand(rect, change = new hstory.ChangeElementCommand(rect,
{'#href': '#oldhref'}); { '#href': '#oldhref' });
assert.equal(justCalled, 'getHref'); assert.equal(justCalled, 'getHref');
justCalled = null; justCalled = null;
@@ -472,7 +472,7 @@ describe('history', function () {
const line = document.createElementNS(NS.SVG, 'line'); const line = document.createElementNS(NS.SVG, 'line');
line.setAttribute('class', 'newClass'); line.setAttribute('class', 'newClass');
change = new hstory.ChangeElementCommand(line, {class: 'oldClass'}); change = new hstory.ChangeElementCommand(line, { class: 'oldClass' });
assert.ok(change.unapply); assert.ok(change.unapply);
assert.ok(change.apply); assert.ok(change.apply);
@@ -488,7 +488,7 @@ describe('history', function () {
it('Test BatchCommand', function () { it('Test BatchCommand', function () {
let concatResult = ''; let concatResult = '';
MockCommand.prototype.apply = function (handler) { concatResult += this.text; }; MockCommand.prototype.apply = function () { concatResult += this.text; };
const batch = new hstory.BatchCommand(); const batch = new hstory.BatchCommand();
assert.ok(batch.unapply); assert.ok(batch.unapply);

10
cypress/integration/unit/math.js
View File

@@ -1,7 +1,7 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as math from '../../../instrumented/common/math.js'; import * as math from '../../../instrumented/svgcanvas/math.js';
describe('math', function () { describe('math', function () {
const svg = document.createElementNS(NS.SVG, 'svg'); const svg = document.createElementNS(NS.SVG, 'svg');
@@ -17,7 +17,7 @@ describe('math', function () {
}); });
it('Test svgedit.math.transformPoint() function', function () { it('Test svgedit.math.transformPoint() function', function () {
const {transformPoint} = math; const { transformPoint } = math;
const m = svg.createSVGMatrix(); const m = svg.createSVGMatrix();
m.a = 1; m.b = 0; m.a = 1; m.b = 0;
@@ -51,7 +51,7 @@ describe('math', function () {
it('Test svgedit.math.matrixMultiply() function', function () { it('Test svgedit.math.matrixMultiply() function', function () {
const mult = math.matrixMultiply; const mult = math.matrixMultiply;
const {isIdentity} = math; const { isIdentity } = math;
// translate there and back // translate there and back
const tr1 = svg.createSVGMatrix().translate(100, 50), const tr1 = svg.createSVGMatrix().translate(100, 50),
@@ -84,7 +84,7 @@ describe('math', function () {
}); });
it('Test svgedit.math.transformBox() function', function () { it('Test svgedit.math.transformBox() function', function () {
const {transformBox} = math; const { transformBox } = math;
const m = svg.createSVGMatrix(); const m = svg.createSVGMatrix();
m.a = 1; m.b = 0; m.a = 1; m.b = 0;

24
cypress/integration/unit/path.js
View File

@@ -3,11 +3,11 @@ import 'pathseg';
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as pathModule from '../../../instrumented/svgcanvas/path.js'; import * as pathModule from '../../../instrumented/svgcanvas/path.js';
import {Path, Segment} from '../../../instrumented/svgcanvas/path-method.js'; import { Path, Segment } from '../../../instrumented/svgcanvas/path-method.js';
import {init as unitsInit} from '../../../instrumented/common/units.js'; import { init as unitsInit } from '../../../instrumented/common/units.js';
describe('path', function () { describe('path', function () {
/** /**
@@ -48,7 +48,7 @@ describe('path', function () {
const path = document.createElementNS(NS.SVG, 'path'); const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z'); path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const [mockPathContext, mockUtilitiesContext] = getMockContexts(); const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext); pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext); utilities.init(mockUtilitiesContext);
new Path(path); // eslint-disable-line no-new new Path(path); // eslint-disable-line no-new
@@ -57,7 +57,7 @@ describe('path', function () {
assert.equal(path.pathSegList.getItem(1).x, 10); assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11); assert.equal(path.pathSegList.getItem(1).y, 11);
pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path); pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [ 30, 31 ], path);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l'); assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
assert.equal(path.pathSegList.getItem(1).x, 30); assert.equal(path.pathSegList.getItem(1).x, 30);
@@ -68,7 +68,7 @@ describe('path', function () {
const path = document.createElementNS(NS.SVG, 'path'); const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z'); path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const [mockPathContext, mockUtilitiesContext] = getMockContexts(); const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext); pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext); utilities.init(mockUtilitiesContext);
new Path(path); // eslint-disable-line no-new new Path(path); // eslint-disable-line no-new
@@ -78,7 +78,7 @@ describe('path', function () {
assert.equal(path.pathSegList.getItem(1).y, 11); assert.equal(path.pathSegList.getItem(1).y, 11);
const segment = new Segment(1, path.pathSegList.getItem(1)); const segment = new Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]); segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [ 30, 31 ]);
assert.equal(segment.item.pathSegTypeAsLetter, 'l'); assert.equal(segment.item.pathSegTypeAsLetter, 'l');
assert.equal(segment.item.x, 30); assert.equal(segment.item.x, 30);
assert.equal(segment.item.y, 31); assert.equal(segment.item.y, 31);
@@ -96,7 +96,7 @@ describe('path', function () {
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z'); path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.append(path); svg.append(path);
const [mockPathContext, mockUtilitiesContext] = getMockContexts(svg); const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(svg);
pathModule.init(mockPathContext); pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext); utilities.init(mockUtilitiesContext);
const segment = new Segment(1, path.pathSegList.getItem(1)); const segment = new Segment(1, path.pathSegList.getItem(1));
@@ -110,7 +110,7 @@ describe('path', function () {
assert.equal(path.pathSegList.getItem(1).x, 15); assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16); assert.equal(path.pathSegList.getItem(1).y, 16);
segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [30, 31, 32, 33, 34, 35]); segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [ 30, 31, 32, 33, 34, 35 ]);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c'); assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c');
assert.equal(path.pathSegList.getItem(1).x1, 32); assert.equal(path.pathSegList.getItem(1).x1, 32);
assert.equal(path.pathSegList.getItem(1).y1, 33); assert.equal(path.pathSegList.getItem(1).y1, 33);
@@ -124,7 +124,7 @@ describe('path', function () {
const path = document.createElementNS(NS.SVG, 'path'); const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z'); path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const [mockPathContext, mockUtilitiesContext] = getMockContexts(); const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext); pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext); utilities.init(mockUtilitiesContext);
new Path(path); // eslint-disable-line no-new new Path(path); // eslint-disable-line no-new
@@ -144,7 +144,7 @@ describe('path', function () {
const path = document.createElementNS(NS.SVG, 'path'); const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z'); path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
const [mockPathContext, mockUtilitiesContext] = getMockContexts(); const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext); pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext); utilities.init(mockUtilitiesContext);
new Path(path); // eslint-disable-line no-new new Path(path); // eslint-disable-line no-new

56
cypress/integration/unit/recalculate.js
View File

@@ -1,7 +1,7 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as coords from '../../../instrumented/svgcanvas/coords.js'; import * as coords from '../../../instrumented/svgcanvas/coords.js';
import * as recalculate from '../../../instrumented/svgcanvas/recalculate.js'; import * as recalculate from '../../../instrumented/svgcanvas/recalculate.js';
@@ -17,21 +17,45 @@ describe('recalculate', function () {
const svg = document.createElementNS(NS.SVG, 'svg'); const svg = document.createElementNS(NS.SVG, 'svg');
svgroot.append(svg); svgroot.append(svg);
const dataStorage = {
_storage: new WeakMap(),
put: function (element, key, obj) {
if (!this._storage.has(element)) {
this._storage.set(element, new Map());
}
this._storage.get(element).set(key, obj);
},
get: function (element, key) {
return this._storage.get(element).get(key);
},
has: function (element, key) {
return this._storage.has(element) && this._storage.get(element).has(key);
},
remove: function (element, key) {
var ret = this._storage.get(element).delete(key);
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
}
return ret;
}
};
let elemId = 1; let elemId = 1;
/** /**
* Initilize modules to set up the tests. * Initilize modules to set up the tests.
* @returns {void} * @returns {void}
*/ */
function setUp () { function setUp() {
utilities.init( utilities.init(
/** /**
* @implements {module:utilities.EditorContext} * @implements {module:utilities.EditorContext}
*/ */
{ {
getSVGRoot () { return svg; }, getSVGRoot() { return svg; },
getDOMDocument () { return null; }, getDOMDocument() { return null; },
getDOMContainer () { return null; } getDOMContainer() { return null; },
getDataStorage() { return dataStorage; }
} }
); );
coords.init( coords.init(
@@ -39,12 +63,13 @@ describe('recalculate', function () {
* @implements {module:coords.EditorContext} * @implements {module:coords.EditorContext}
*/ */
{ {
getGridSnapping () { return false; }, getGridSnapping() { return false; },
getDrawing () { getDrawing() {
return { return {
getNextId () { return String(elemId++); } getNextId() { return String(elemId++); }
}; };
} },
getDataStorage() { return dataStorage; }
} }
); );
recalculate.init( recalculate.init(
@@ -52,9 +77,10 @@ describe('recalculate', function () {
* @implements {module:recalculate.EditorContext} * @implements {module:recalculate.EditorContext}
*/ */
{ {
getSVGRoot () { return svg; }, getSVGRoot() { return svg; },
getStartTransform () { return ''; }, getStartTransform() { return ''; },
setStartTransform () { /* empty fn */ } setStartTransform() { /* empty fn */ },
getDataStorage() { return dataStorage; }
} }
); );
} }
@@ -65,7 +91,7 @@ describe('recalculate', function () {
* Initialize for tests and set up `rect` element. * Initialize for tests and set up `rect` element.
* @returns {void} * @returns {void}
*/ */
function setUpRect () { function setUpRect() {
setUp(); setUp();
elem = document.createElementNS(NS.SVG, 'rect'); elem = document.createElementNS(NS.SVG, 'rect');
elem.setAttribute('x', '200'); elem.setAttribute('x', '200');
@@ -79,7 +105,7 @@ describe('recalculate', function () {
* Initialize for tests and set up `text` element with `tspan` child. * Initialize for tests and set up `text` element with `tspan` child.
* @returns {void} * @returns {void}
*/ */
function setUpTextWithTspan () { function setUpTextWithTspan() {
setUp(); setUp();
elem = document.createElementNS(NS.SVG, 'text'); elem = document.createElementNS(NS.SVG, 'text');
elem.setAttribute('x', '200'); elem.setAttribute('x', '200');

2
cypress/integration/unit/sanitize.js
View File

@@ -1,6 +1,6 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as sanitize from '../../../instrumented/svgcanvas/sanitize.js'; import * as sanitize from '../../../instrumented/svgcanvas/sanitize.js';
describe('sanitize', function () { describe('sanitize', function () {

47
cypress/integration/unit/select.js
View File

@@ -1,7 +1,7 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import * as select from '../../../instrumented/svgcanvas/select.js'; import * as select from '../../../instrumented/svgcanvas/select.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
describe('select', function () { describe('select', function () {
const sandbox = document.createElement('div'); const sandbox = document.createElement('div');
@@ -10,7 +10,29 @@ describe('select', function () {
let svgroot; let svgroot;
let svgcontent; let svgcontent;
const mockConfig = { const mockConfig = {
dimensions: [640, 480] dimensions: [ 640, 480 ]
};
const dataStorage = {
_storage: new WeakMap(),
put: function (element, key, obj) {
if (!this._storage.has(element)) {
this._storage.set(element, new Map());
}
this._storage.get(element).set(key, obj);
},
get: function (element, key) {
return this._storage.get(element).get(key);
},
has: function (element, key) {
return this._storage.has(element) && this._storage.get(element).has(key);
},
remove: function (element, key) {
var ret = this._storage.get(element).delete(key);
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
}
return ret;
}
}; };
/** /**
@@ -19,13 +41,14 @@ describe('select', function () {
const mockFactory = { const mockFactory = {
createSVGElement (jsonMap) { createSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element); const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([attr, value]) => { Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value); elem.setAttribute(attr, value);
}); });
return elem; return elem;
}, },
svgRoot () { return svgroot; }, svgRoot () { return svgroot; },
svgContent () { return svgcontent; } svgContent () { return svgcontent; },
getDataStorage () { return dataStorage; }
}; };
/** /**
@@ -35,15 +58,15 @@ describe('select', function () {
beforeEach(() => { beforeEach(() => {
svgroot = mockFactory.createSVGElement({ svgroot = mockFactory.createSVGElement({
element: 'svg', element: 'svg',
attr: {id: 'svgroot'} attr: { id: 'svgroot' }
}); });
svgcontent = svgroot.appendChild( svgcontent = mockFactory.createSVGElement({
mockFactory.createSVGElement({ element: 'svg',
element: 'svg', attr: { id: 'svgcontent' }
attr: {id: 'svgcontent'} });
})
); svgroot.append(svgcontent);
/* const rect = */ svgcontent.appendChild( /* const rect = */ svgcontent.append(
mockFactory.createSVGElement({ mockFactory.createSVGElement({
element: 'rect', element: 'rect',
attr: { attr: {

15
cypress/integration/unit/svgtransformlist.js
View File

@@ -1,8 +1,8 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as transformlist from '../../../instrumented/common/svgtransformlist.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js';
import {disableSupportsNativeTransformLists} from '../../../instrumented/common/browser.js'; import { disableSupportsNativeTransformLists } from '../../../instrumented/common/browser.js';
import almostEqualsPlugin from '../../support/assert-almostEquals.js'; import almostEqualsPlugin from '../../support/assert-almostEquals.js';
import expectOutOfBoundsExceptionPlugin from '../../support/assert-expectOutOfBoundsException.js'; import expectOutOfBoundsExceptionPlugin from '../../support/assert-expectOutOfBoundsException.js';
@@ -26,10 +26,13 @@ describe('svgtransformlist', function () {
svgroot.style.visibility = 'hidden'; svgroot.style.visibility = 'hidden';
document.body.append(svgroot); document.body.append(svgroot);
svgcontent = svgroot.appendChild(document.createElementNS(NS.SVG, 'svg')); svgcontent = document.createElementNS(NS.SVG, 'svg');
rect = svgcontent.appendChild(document.createElementNS(NS.SVG, 'rect')); svgroot.append(svgcontent);
rect = document.createElementNS(NS.SVG, 'rect');
svgcontent.append(rect);
rect.id = 'r'; rect.id = 'r';
circle = svgcontent.appendChild(document.createElementNS(NS.SVG, 'circle')); circle = document.createElementNS(NS.SVG, 'circle');
svgcontent.append(circle);
circle.id = 'c'; circle.id = 'c';
}); });

13
cypress/integration/unit/test1.js
View File

@@ -1,6 +1,5 @@
/* eslint-disable max-len */ /* eslint-disable max-len, no-console */
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import '../../../instrumented/editor/jquery-ui/jquery-ui-1.8.17.custom.min.js';
import SvgCanvas from '../../../instrumented/svgcanvas/svgcanvas.js'; import SvgCanvas from '../../../instrumented/svgcanvas/svgcanvas.js';
@@ -35,16 +34,14 @@ describe('Basic Module', function () {
workarea.append(svgcanvas); workarea.append(svgcanvas);
const toolsLeft = document.createElement('div'); const toolsLeft = document.createElement('div');
toolsLeft.id = 'tools_left'; toolsLeft.id = 'tools_left';
const toolsFlyout = document.createElement('div');
toolsFlyout.id = 'tools_flyout';
svgEditor.append(workarea, toolsLeft, toolsFlyout); svgEditor.append(workarea, toolsLeft);
document.body.append(svgEditor); document.body.append(svgEditor);
svgCanvas = new SvgCanvas( svgCanvas = new SvgCanvas(
document.getElementById('svgcanvas'), { document.getElementById('svgcanvas'), {
canvas_expansion: 3, canvas_expansion: 3,
dimensions: [640, 480], dimensions: [ 640, 480 ],
initFill: { initFill: {
color: 'FF0000', // solid red color: 'FF0000', // solid red
opacity: 1 opacity: 1
@@ -58,7 +55,7 @@ describe('Basic Module', function () {
imgPath: '../editor/images/', imgPath: '../editor/images/',
langPath: 'locale/', langPath: 'locale/',
extPath: 'extensions/', extPath: 'extensions/',
extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'], extensions: [ 'ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js' ],
initTool: 'select', initTool: 'select',
wireframe: false wireframe: false
} }
@@ -162,8 +159,6 @@ describe('Basic Module', function () {
assert.strictEqual(attrVal, 'bar', true, 'Preserved namespaced attribute on import'); assert.strictEqual(attrVal, 'bar', true, 'Preserved namespaced attribute on import');
const output = svgCanvas.getSvgString(); const output = svgCanvas.getSvgString();
// } catch(e) {console.log(e)}
// console.log('output',output);
const hasXlink = output.includes('xmlns:xlink="http://www.w3.org/1999/xlink"'); const hasXlink = output.includes('xmlns:xlink="http://www.w3.org/1999/xlink"');
const hasSe = output.includes('xmlns:se='); const hasSe = output.includes('xmlns:se=');
const hasFoo = output.includes('xmlns:foo='); const hasFoo = output.includes('xmlns:foo=');

4
cypress/integration/unit/units.js
View File

@@ -51,7 +51,7 @@ describe('units', function () {
assert.ok(units.shortFloat); assert.ok(units.shortFloat);
assert.equal(typeof units.shortFloat, typeof function () { /* empty fn */ }); assert.equal(typeof units.shortFloat, typeof function () { /* empty fn */ });
const {shortFloat} = units; const { shortFloat } = units;
assert.equal(shortFloat(0.00000001), 0); assert.equal(shortFloat(0.00000001), 0);
assert.equal(shortFloat(1), 1); assert.equal(shortFloat(1), 1);
assert.equal(shortFloat(3.45678), 3.4568); assert.equal(shortFloat(3.45678), 3.4568);
@@ -63,7 +63,7 @@ describe('units', function () {
assert.ok(units.isValidUnit); assert.ok(units.isValidUnit);
assert.equal(typeof units.isValidUnit, typeof function () { /* empty fn */ }); assert.equal(typeof units.isValidUnit, typeof function () { /* empty fn */ });
const {isValidUnit} = units; const { isValidUnit } = units;
assert.ok(isValidUnit('0')); assert.ok(isValidUnit('0'));
assert.ok(isValidUnit('1')); assert.ok(isValidUnit('1'));
assert.ok(isValidUnit('1.1')); assert.ok(isValidUnit('1.1'));

176
cypress/integration/unit/utilities-bbox.js
View File

@@ -3,10 +3,10 @@ import 'pathseg';
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as transformlist from '../../../instrumented/common/svgtransformlist.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js';
import * as math from '../../../instrumented/common/math.js'; import * as math from '../../../instrumented/svgcanvas/math.js';
import * as path from '../../../instrumented/svgcanvas/path.js'; import * as path from '../../../instrumented/svgcanvas/path.js';
import setAssertionMethods from '../../support/assert-close.js'; import setAssertionMethods from '../../support/assert-close.js';
@@ -20,7 +20,7 @@ describe('utilities bbox', function () {
*/ */
function mockCreateSVGElement (jsonMap) { function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element); const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([attr, value]) => { Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value); elem.setAttribute(attr, value);
}); });
return elem; return elem;
@@ -55,7 +55,7 @@ describe('utilities bbox', function () {
const type = seg.pathSegType; const type = seg.pathSegType;
if (type === 1) { continue; } if (type === 1) { continue; }
const pts = []; const pts = [];
['', 1, 2].forEach(function (n, j) { [ '', 1, 2 ].forEach(function (n) {
const x = seg['x' + n], y = seg['y' + n]; const x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) { if (x !== undefined && y !== undefined) {
const pt = math.transformPoint(x, y, m); const pt = math.transformPoint(x, y, m);
@@ -82,7 +82,7 @@ describe('utilities bbox', function () {
svgroot = mockCreateSVGElement({ svgroot = mockCreateSVGElement({
element: 'svg', element: 'svg',
attr: {id: 'svgroot'} attr: { id: 'svgroot' }
}); });
sandbox.append(svgroot); sandbox.append(svgroot);
@@ -101,41 +101,41 @@ describe('utilities bbox', function () {
}); });
it('Test getBBoxWithTransform and no transform', function () { it('Test getBBoxWithTransform and no transform', function () {
const {getBBoxWithTransform} = utilities; const { getBBoxWithTransform } = utilities;
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3'} attr: { id: 'path', d: 'M0,1 L2,3' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2}); assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElementFromJsonCallCount, 0);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElementFromJsonCallCount, 0);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'line', element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElementFromJsonCallCount, 0);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
const g = mockCreateSVGElement({ const g = mockCreateSVGElement({
element: 'g', element: 'g',
@@ -144,17 +144,17 @@ describe('utilities bbox', function () {
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElementFromJsonCallCount, 0);
g.remove(); g.remove();
}); });
it('Test getBBoxWithTransform and a rotation transform', function () { it.skip('Test getBBoxWithTransform and a rotation transform', function () {
const {getBBoxWithTransform} = utilities; const { getBBoxWithTransform } = utilities;
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)'} attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
@@ -166,7 +166,7 @@ describe('utilities bbox', function () {
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)'} attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
@@ -177,12 +177,12 @@ describe('utilities bbox', function () {
assert.equal(mockaddSVGElementFromJsonCallCount, 1); assert.equal(mockaddSVGElementFromJsonCallCount, 1);
elem.remove(); elem.remove();
const rect = {x: 10, y: 10, width: 10, height: 20}; const rect = { x: 10, y: 10, width: 10, height: 20 };
const angle = 45; const angle = 45;
const origin = {x: 15, y: 20}; // eslint-disable-line no-shadow const origin = { x: 15, y: 20 }; // eslint-disable-line no-shadow
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'} attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' }
}); });
svgroot.append(elem); svgroot.append(elem);
mockaddSVGElementFromJsonCallCount = 0; mockaddSVGElementFromJsonCallCount = 0;
@@ -198,11 +198,11 @@ describe('utilities bbox', function () {
// Same as previous but wrapped with g and the transform is with the g. // Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height} attr: { id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height }
}); });
const g = mockCreateSVGElement({ const g = mockCreateSVGElement({
element: 'g', element: 'g',
attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'} attr: { transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' }
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
@@ -217,22 +217,22 @@ describe('utilities bbox', function () {
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'ellipse', element: 'ellipse',
attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)'} attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)' }
}); });
svgroot.append(elem); svgroot.append(elem);
mockaddSVGElementFromJsonCallCount = 0; mockaddSVGElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. /** @todo: Review these test the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */
assert.ok(bbox.x > 45 && bbox.x <= 50); // assert.ok(bbox.x > 45 && bbox.x <= 50);
assert.ok(bbox.y > 45 && bbox.y <= 50); assert.ok(bbox.y > 45 && bbox.y <= 50);
assert.ok(bbox.width >= 100 && bbox.width < 110); // assert.ok(bbox.width >= 100 && bbox.width < 110);
assert.ok(bbox.height >= 100 && bbox.height < 110); // assert.ok(bbox.height >= 100 && bbox.height < 110);
assert.equal(mockaddSVGElementFromJsonCallCount, 1); assert.equal(mockaddSVGElementFromJsonCallCount, 1);
elem.remove(); elem.remove();
}); });
it('Test getBBoxWithTransform with rotation and matrix transforms', function () { it.skip('Test getBBoxWithTransform with rotation and matrix transforms', function () {
const {getBBoxWithTransform} = utilities; const { getBBoxWithTransform } = utilities;
let tx = 10; // tx right let tx = 10; // tx right
let ty = 10; // tx down let ty = 10; // tx down
@@ -241,7 +241,7 @@ describe('utilities bbox', function () {
let matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'; let matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix} attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
@@ -256,7 +256,7 @@ describe('utilities bbox', function () {
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'; matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix} attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
@@ -266,9 +266,9 @@ describe('utilities bbox', function () {
assert.close(bbox.height, 10, EPSILON); assert.close(bbox.height, 10, EPSILON);
elem.remove(); elem.remove();
const rect = {x: 10, y: 10, width: 10, height: 20}; const rect = { x: 10, y: 10, width: 10, height: 20 };
const angle = 45; const angle = 45;
const origin = {x: 15, y: 20}; // eslint-disable-line no-shadow const origin = { x: 15, y: 20 }; // eslint-disable-line no-shadow
tx = 10; // tx right tx = 10; // tx right
ty = 10; // tx down ty = 10; // tx down
txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space. txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
@@ -276,7 +276,7 @@ describe('utilities bbox', function () {
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'; matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix} attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
@@ -290,11 +290,11 @@ describe('utilities bbox', function () {
// Same as previous but wrapped with g and the transform is with the g. // Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height} attr: { id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height }
}); });
const g = mockCreateSVGElement({ const g = mockCreateSVGElement({
element: 'g', element: 'g',
attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix} attr: { transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix }
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
@@ -307,52 +307,52 @@ describe('utilities bbox', function () {
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'ellipse', element: 'ellipse',
attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix} attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. /** @todo: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */
assert.ok(bbox.x > 45 + tx && bbox.x <= 50 + tx); // assert.ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty); assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
assert.ok(bbox.width >= 100 && bbox.width < 110); // assert.ok(bbox.width >= 100 && bbox.width < 110);
assert.ok(bbox.height >= 100 && bbox.height < 110); // assert.ok(bbox.height >= 100 && bbox.height < 110);
elem.remove(); elem.remove();
}); });
it('Test getStrokedBBox with stroke-width 10', function () { it('Test getStrokedBBox with stroke-width 10', function () {
const {getStrokedBBox} = utilities; const { getStrokedBBox } = utilities;
const strokeWidth = 10; const strokeWidth = 10;
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth} attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth}); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth}); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'line', element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth} attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth}); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth }
}); });
const g = mockCreateSVGElement({ const g = mockCreateSVGElement({
element: 'g', element: 'g',
@@ -360,44 +360,44 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth}); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth });
g.remove(); g.remove();
}); });
it("Test getStrokedBBox with stroke-width 'none'", function () { it("Test getStrokedBBox with stroke-width 'none'", function () {
const {getStrokedBBox} = utilities; const { getStrokedBBox } = utilities;
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none'} attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2}); assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'line', element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none'} attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' }
}); });
const g = mockCreateSVGElement({ const g = mockCreateSVGElement({
element: 'g', element: 'g',
@@ -405,44 +405,44 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
g.remove(); g.remove();
}); });
it('Test getStrokedBBox with no stroke-width attribute', function () { it('Test getStrokedBBox with no stroke-width attribute', function () {
const {getStrokedBBox} = utilities; const { getStrokedBBox } = utilities;
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3'} attr: { id: 'path', d: 'M0,1 L2,3' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2}); assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'line', element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
const g = mockCreateSVGElement({ const g = mockCreateSVGElement({
element: 'g', element: 'g',
@@ -450,8 +450,8 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
g.remove(); g.remove();
}); });
@@ -473,7 +473,7 @@ describe('utilities bbox', function () {
*/ */
function rotatePoint (point, angle, origin) { // eslint-disable-line no-shadow function rotatePoint (point, angle, origin) { // eslint-disable-line no-shadow
if (!origin) { if (!origin) {
origin = {x: 0, y: 0}; origin = { x: 0, y: 0 };
} }
const x = point.x - origin.x; const x = point.x - origin.x;
const y = point.y - origin.y; const y = point.y - origin.y;
@@ -491,10 +491,10 @@ describe('utilities bbox', function () {
* @returns {module:utilities.BBoxObject} * @returns {module:utilities.BBoxObject}
*/ */
function rotateRect (rect, angle, origin) { // eslint-disable-line no-shadow function rotateRect (rect, angle, origin) { // eslint-disable-line no-shadow
const tl = rotatePoint({x: rect.x, y: rect.y}, angle, origin); const tl = rotatePoint({ x: rect.x, y: rect.y }, angle, origin);
const tr = rotatePoint({x: rect.x + rect.width, y: rect.y}, angle, origin); const tr = rotatePoint({ x: rect.x + rect.width, y: rect.y }, angle, origin);
const br = rotatePoint({x: rect.x + rect.width, y: rect.y + rect.height}, angle, origin); const br = rotatePoint({ x: rect.x + rect.width, y: rect.y + rect.height }, angle, origin);
const bl = rotatePoint({x: rect.x, y: rect.y + rect.height}, angle, origin); const bl = rotatePoint({ x: rect.x, y: rect.y + rect.height }, angle, origin);
const minx = Math.min(tl.x, tr.x, bl.x, br.x); const minx = Math.min(tl.x, tr.x, bl.x, br.x);
const maxx = Math.max(tl.x, tr.x, bl.x, br.x); const maxx = Math.max(tl.x, tr.x, bl.x, br.x);

25
cypress/integration/unit/utilities-performance.js
View File

@@ -1,11 +1,11 @@
/* eslint-disable max-len */ /* eslint-disable max-len, no-console */
import 'pathseg'; import 'pathseg';
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as transformlist from '../../../instrumented/common/svgtransformlist.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js';
import * as math from '../../../instrumented/common/math.js'; import * as math from '../../../instrumented/svgcanvas/math.js';
describe('utilities performance', function () { describe('utilities performance', function () {
let currentLayer, groupWithMatrixTransform, textWithMatrixTransform; let currentLayer, groupWithMatrixTransform, textWithMatrixTransform;
@@ -82,7 +82,7 @@ describe('utilities performance', function () {
*/ */
function mockCreateSVGElement (jsonMap) { function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element); const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([attr, value]) => { Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value); elem.setAttribute(attr, value);
}); });
return elem; return elem;
@@ -111,7 +111,7 @@ describe('utilities performance', function () {
const clone = elem.cloneNode(true); // t: deep clone const clone = elem.cloneNode(true); // t: deep clone
// Make sure you set a unique ID like a real document. // Make sure you set a unique ID like a real document.
clone.setAttribute('id', elemId + index); clone.setAttribute('id', elemId + index);
const {parentNode} = elem; const { parentNode } = elem;
parentNode.append(clone); parentNode.append(clone);
} }
} }
@@ -135,7 +135,7 @@ describe('utilities performance', function () {
continue; continue;
} }
const pts = []; const pts = [];
['', 1, 2].forEach(function (n, j) { [ '', 1, 2 ].forEach(function (n) {
const x = seg['x' + n], const x = seg['x' + n],
y = seg['y' + n]; y = seg['y' + n];
if (x !== undefined && y !== undefined) { if (x !== undefined && y !== undefined) {
@@ -183,8 +183,8 @@ describe('utilities performance', function () {
// Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23 // Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23
it('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () { it('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () {
const {getStrokedBBox} = utilities; const { getStrokedBBox } = utilities;
const {children} = currentLayer; const { children } = currentLayer;
let lastTime, now, let lastTime, now,
min = Number.MAX_VALUE, min = Number.MAX_VALUE,
@@ -200,7 +200,7 @@ describe('utilities performance', function () {
// Skip the first child which is the title. // Skip the first child which is the title.
for (let index = 1; index < count; index++) { for (let index = 1; index < count; index++) {
const child = children[index]; const child = children[index];
/* const obj = */ getStrokedBBox([child], mockaddSVGElementFromJson, mockPathActions); /* const obj = */ getStrokedBBox([ child ], mockaddSVGElementFromJson, mockPathActions);
now = Date.now(); const delta = now - lastTime; lastTime = now; now = Date.now(); const delta = now - lastTime; lastTime = now;
total += delta; total += delta;
min = Math.min(min, delta); min = Math.min(min, delta);
@@ -211,7 +211,6 @@ describe('utilities performance', function () {
assert.isBelow(ave, 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms'); assert.isBelow(ave, 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max); console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max);
// eslint-disable-next-line promise/avoid-new
return new Promise((resolve) => { return new Promise((resolve) => {
// The second pass is two to ten times faster. // The second pass is two to ten times faster.
setTimeout(function () { setTimeout(function () {
@@ -221,7 +220,7 @@ describe('utilities performance', function () {
// Skip the first child which is the title. // Skip the first child which is the title.
for (let index = 1; index < ct; index++) { for (let index = 1; index < ct; index++) {
const child = children[index]; const child = children[index];
/* const obj = */ getStrokedBBox([child], mockaddSVGElementFromJson, mockPathActions); /* const obj = */ getStrokedBBox([ child ], mockaddSVGElementFromJson, mockPathActions);
now = Date.now(); const delta = now - lastTime; lastTime = now; now = Date.now(); const delta = now - lastTime; lastTime = now;
total += delta; total += delta;
min = Math.min(min, delta); min = Math.min(min, delta);

78
cypress/integration/unit/utilities.js
View File

@@ -2,8 +2,8 @@
import '../../../instrumented/editor/jquery.min.js'; import '../../../instrumented/editor/jquery.min.js';
import * as browser from '../../../instrumented/common/browser.js'; import * as browser from '../../../instrumented/common/browser.js';
import * as utilities from '../../../instrumented/common/utilities.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import {NS} from '../../../instrumented/common/namespaces.js'; import { NS } from '../../../instrumented/common/namespaces.js';
describe('utilities', function () { describe('utilities', function () {
/** /**
@@ -13,7 +13,7 @@ describe('utilities', function () {
*/ */
function mockCreateSVGElement (jsonMap) { function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element); const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([attr, value]) => { Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value); elem.setAttribute(attr, value);
}); });
return elem; return elem;
@@ -28,7 +28,7 @@ describe('utilities', function () {
svgroot.append(elem); svgroot.append(elem);
return elem; return elem;
} }
const mockPathActions = {resetOrientation () { /* empty fn */ }}; const mockPathActions = { resetOrientation () { /* empty fn */ } };
let mockHistorySubCommands = []; let mockHistorySubCommands = [];
const mockHistory = { const mockHistory = {
BatchCommand: class { BatchCommand: class {
@@ -92,7 +92,7 @@ describe('utilities', function () {
svg = document.createElementNS(NS.SVG, 'svg'); svg = document.createElementNS(NS.SVG, 'svg');
svgroot = mockCreateSVGElement({ svgroot = mockCreateSVGElement({
element: 'svg', element: 'svg',
attr: {id: 'svgroot'} attr: { id: 'svgroot' }
}); });
sandbox.append(svgroot); sandbox.append(svgroot);
document.body.append(sandbox); document.body.append(sandbox);
@@ -105,7 +105,7 @@ describe('utilities', function () {
}); });
it('Test svgedit.utilities.toXml() function', function () { it('Test svgedit.utilities.toXml() function', function () {
const {toXml} = utilities; const { toXml } = utilities;
assert.equal(toXml('a'), 'a'); assert.equal(toXml('a'), 'a');
assert.equal(toXml('ABC_'), 'ABC_'); assert.equal(toXml('ABC_'), 'ABC_');
@@ -116,7 +116,7 @@ describe('utilities', function () {
}); });
it('Test svgedit.utilities.fromXml() function', function () { it('Test svgedit.utilities.fromXml() function', function () {
const {fromXml} = utilities; const { fromXml } = utilities;
assert.equal(fromXml('a'), 'a'); assert.equal(fromXml('a'), 'a');
assert.equal(fromXml('ABC_'), 'ABC_'); assert.equal(fromXml('ABC_'), 'ABC_');
@@ -127,7 +127,7 @@ describe('utilities', function () {
}); });
it('Test svgedit.utilities.encode64() function', function () { it('Test svgedit.utilities.encode64() function', function () {
const {encode64} = utilities; const { encode64 } = utilities;
assert.equal(encode64('abcdef'), 'YWJjZGVm'); assert.equal(encode64('abcdef'), 'YWJjZGVm');
assert.equal(encode64('12345'), 'MTIzNDU='); assert.equal(encode64('12345'), 'MTIzNDU=');
@@ -136,7 +136,7 @@ describe('utilities', function () {
}); });
it('Test svgedit.utilities.decode64() function', function () { it('Test svgedit.utilities.decode64() function', function () {
const {decode64} = utilities; const { decode64 } = utilities;
assert.equal(decode64('YWJjZGVm'), 'abcdef'); assert.equal(decode64('YWJjZGVm'), 'abcdef');
assert.equal(decode64('MTIzNDU='), '12345'); assert.equal(decode64('MTIzNDU='), '12345');
@@ -151,7 +151,7 @@ describe('utilities', function () {
}); });
it('Test svgedit.utilities.bboxToObj() function', function () { it('Test svgedit.utilities.bboxToObj() function', function () {
const {bboxToObj} = utilities; const { bboxToObj } = utilities;
const rect = svg.createSVGRect(); const rect = svg.createSVGRect();
rect.x = 1; rect.x = 1;
@@ -188,38 +188,38 @@ describe('utilities', function () {
}); });
it('Test getPathDFromSegments', function () { it('Test getPathDFromSegments', function () {
const {getPathDFromSegments} = utilities; const { getPathDFromSegments } = utilities;
const doc = utilities.text2xml('<svg></svg>'); const doc = utilities.text2xml('<svg></svg>');
const path = doc.createElementNS(NS.SVG, 'path'); const path = doc.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'm0,0l5,0l0,5l-5,0l0,-5z'); path.setAttribute('d', 'm0,0l5,0l0,5l-5,0l0,-5z');
let d = getPathDFromSegments([ let d = getPathDFromSegments([
['M', [1, 2]], [ 'M', [ 1, 2 ] ],
['Z', []] [ 'Z', [] ]
]); ]);
assert.equal(d, 'M1,2 Z'); assert.equal(d, 'M1,2 Z');
d = getPathDFromSegments([ d = getPathDFromSegments([
['M', [1, 2]], [ 'M', [ 1, 2 ] ],
['M', [3, 4]], [ 'M', [ 3, 4 ] ],
['Z', []] [ 'Z', [] ]
]); ]);
assert.equal(d, 'M1,2 M3,4 Z'); assert.equal(d, 'M1,2 M3,4 Z');
d = getPathDFromSegments([ d = getPathDFromSegments([
['M', [1, 2]], [ 'M', [ 1, 2 ] ],
['C', [3, 4, 5, 6]], [ 'C', [ 3, 4, 5, 6 ] ],
['Z', []] [ 'Z', [] ]
]); ]);
assert.equal(d, 'M1,2 C3,4 5,6 Z'); assert.equal(d, 'M1,2 C3,4 5,6 Z');
}); });
it('Test getPathDFromElement', function () { it('Test getPathDFromElement', function () {
const {getPathDFromElement} = utilities; const { getPathDFromElement } = utilities;
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M0,1 Z'} attr: { id: 'path', d: 'M0,1 Z' }
}); });
svgroot.append(elem); svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 Z'); assert.equal(getPathDFromElement(elem), 'M0,1 Z');
@@ -227,7 +227,7 @@ describe('utilities', function () {
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z'); assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
@@ -235,16 +235,16 @@ describe('utilities', function () {
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11'} attr: { id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11' }
}); });
svgroot.append(elem); svgroot.append(elem);
const closeEnough = /M0,4 C0,2.3\d* 0.9\d*,1 2,1 L8,1 C9.0\d*,1 10,2.3\d* 10,4 L10,9 C10,10.6\d* 9.08675799086758,12 8,12 L2,12 C0.9\d*,12 0,10.6\d* 0,9 L0,4 Z/; const closeEnough = /M0,13 C0,2.3\d* 0.9\d*,1 02,1 L8,1 C9.0\d*,1 10,2.3\d* 10,13 L10,9 C10,10.6\d* 9.08675799086758,12 8,12 L02,12 C0.9\d*,12 0,10.6\d* 0,9 L0,13 Z/;
assert.equal(closeEnough.test(getPathDFromElement(elem)), true); assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'line', element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1L5,6'); assert.equal(getPathDFromElement(elem), 'M0,1L5,6');
@@ -252,21 +252,21 @@ describe('utilities', function () {
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'circle', element: 'circle',
attr: {id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10'} attr: { id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 Z'); assert.equal(getPathDFromElement(elem), 'M5,11 C5,5.475138121546961 7.237569060773481,1 10,1 C102.7624309392265194,1 105,5.475138121546961 105,11 C105,115.524861878453039 102.7624309392265194,1110 10,1110 C7.237569060773481,1110 5,115.524861878453039 5,11 Z');
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'polyline', element: 'polyline',
attr: {id: 'polyline', points: '0,1 5,1 5,11 0,11'} attr: { id: 'polyline', points: '0,1 5,1 5,11 0,11' }
}); });
svgroot.append(elem); svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11'); assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
elem.remove(); elem.remove();
assert.equal(getPathDFromElement({tagName: 'something unknown'}), undefined); assert.equal(getPathDFromElement({ tagName: 'something unknown' }), undefined);
}); });
it('Test getBBoxOfElementAsPath', function () { it('Test getBBoxOfElementAsPath', function () {
@@ -281,36 +281,36 @@ describe('utilities', function () {
let elem = mockCreateSVGElement({ let elem = mockCreateSVGElement({
element: 'path', element: 'path',
attr: {id: 'path', d: 'M0,1 Z'} attr: { id: 'path', d: 'M0,1 Z' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0}); assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
element: 'line', element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove(); elem.remove();
// TODO: test element with transform. Need resetOrientation above to be working or mock it. // TODO: test element with transform. Need resetOrientation above to be working or mock it.
}); });
it('Test convertToPath rect', function () { it('Test convertToPath rect', function () {
const {convertToPath} = utilities; const { convertToPath } = utilities;
const attrs = { const attrs = {
fill: 'red', fill: 'red',
stroke: 'white', stroke: 'white',
@@ -320,7 +320,7 @@ describe('utilities', function () {
const elem = mockCreateSVGElement({ const elem = mockCreateSVGElement({
element: 'rect', element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory); const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
@@ -337,7 +337,7 @@ describe('utilities', function () {
}); });
it('Test convertToPath unknown element', function () { it('Test convertToPath unknown element', function () {
const {convertToPath} = utilities; const { convertToPath } = utilities;
const attrs = { const attrs = {
fill: 'red', fill: 'red',
stroke: 'white', stroke: 'white',
@@ -348,7 +348,7 @@ describe('utilities', function () {
const elem = { const elem = {
tagName: 'something unknown', tagName: 'something unknown',
id: 'something-unknown', id: 'something-unknown',
getAttribute (attr) { return ''; }, getAttribute () { return ''; },
parentNode: svgroot parentNode: svgroot
}; };
const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory); const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);

2
cypress/plugins/index.js
View File

@@ -11,6 +11,6 @@
// *********************************************************** // ***********************************************************
require('@babel/register')({ require('@babel/register')({
plugins: ['@babel/plugin-transform-modules-commonjs'] plugins: [ '@babel/plugin-transform-modules-commonjs' ]
}); });
module.exports = require('./main.js').default; module.exports = require('./main.js').default;

32
cypress/plugins/main.js
View File

@@ -1,8 +1,8 @@
// This function is called when a project is opened or re-opened (e.g. due to // This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing) // the project's config changing)
import codeCoverageTask from '@cypress/code-coverage/task.js'; import codeCoverageTask from "@cypress/code-coverage/task.js";
import {initPlugin} from 'cypress-plugin-snapshots/plugin.js'; import { initPlugin } from "cypress-plugin-snapshots/plugin.js";
export default (on, config) => { export default (on, config) => {
// `on` is used to hook into various events Cypress emits // `on` is used to hook into various events Cypress emits
@@ -14,5 +14,33 @@ export default (on, config) => {
// https://docs.cypress.io/guides/tooling/code-coverage.html#Install-the-plugin // https://docs.cypress.io/guides/tooling/code-coverage.html#Install-the-plugin
codeCoverageTask(on, config); codeCoverageTask(on, config);
initPlugin(on, config); initPlugin(on, config);
on("before:browser:launch", (browser, launchOptions) => {
if (browser.name === "chrome" && browser.isHeadless) {
// fullPage screenshot size is 1400x1200 on non-retina screens
// and 2800x2400 on retina screens
launchOptions.args.push("--window-size=1400,1200");
// force screen to be non-retina (1400x1200 size)
launchOptions.args.push("--force-device-scale-factor=1");
// force screen to be retina (2800x2400 size)
// launchOptions.args.push('--force-device-scale-factor=2')
}
if (browser.name === "electron" && browser.isHeadless) {
// fullPage screenshot size is 1400x1200
launchOptions.preferences.width = 1400;
launchOptions.preferences.height = 1200;
}
if (browser.name === "firefox" && browser.isHeadless) {
// menubars take up height on the screen
// so fullPage screenshot size is 1400x1126
launchOptions.args.push("--width=1400");
launchOptions.args.push("--height=1200");
}
return launchOptions;
});
return config; return config;
}; };

2
cypress/support/assert-almostEquals.js
View File

@@ -12,7 +12,7 @@ const NEAR_ZERO = 5e-6; // 0.000005, Firefox fails at higher levels of precision
function almostEquals (actual, expected, message) { function almostEquals (actual, expected, message) {
message = message || (actual + ' did not equal ' + expected); message = message || (actual + ' did not equal ' + expected);
const result = Math.abs(actual - expected) < NEAR_ZERO; const result = Math.abs(actual - expected) < NEAR_ZERO;
return {result, message, actual, expected}; return { result, message, actual, expected };
} }
/** /**

8
cypress/support/assert-close.js
View File

@@ -25,7 +25,7 @@ function close (actual, expected, maxDifference, message) {
const actualDiff = (actual === expected) ? 0 : Math.abs(actual - expected), const actualDiff = (actual === expected) ? 0 : Math.abs(actual - expected),
result = actualDiff <= maxDifference; result = actualDiff <= maxDifference;
message = message || (actual + ' should be within ' + maxDifference + ' (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff)); message = message || (actual + ' should be within ' + maxDifference + ' (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff));
return {result, message, actual, expected}; return { result, message, actual, expected };
} }
/** /**
@@ -55,7 +55,7 @@ function closePercent (actual, expected, maxPercentDifference, message) {
} }
message = message || (actual + ' should be within ' + maxPercentDifference + '% (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%')); message = message || (actual + ' should be within ' + maxPercentDifference + '% (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%'));
return {result, message, actual, expected}; return { result, message, actual, expected };
} }
/** /**
@@ -74,7 +74,7 @@ function notClose (actual, expected, minDifference, message) {
const actualDiff = Math.abs(actual - expected), const actualDiff = Math.abs(actual - expected),
result = actualDiff > minDifference; result = actualDiff > minDifference;
message = message || (actual + ' should not be within ' + minDifference + ' (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff)); message = message || (actual + ' should not be within ' + minDifference + ' (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff));
return {result, message, actual, expected}; return { result, message, actual, expected };
} }
/** /**
@@ -104,7 +104,7 @@ function notClosePercent (actual, expected, minPercentDifference, message) {
} }
message = message || (actual + ' should not be within ' + minPercentDifference + '% (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%')); message = message || (actual + ' should not be within ' + minPercentDifference + '% (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%'));
return {result, message, actual, expected}; return { result, message, actual, expected };
} }
/** /**

2
cypress/support/assert-expectOutOfBoundsException.js
View File

@@ -19,7 +19,7 @@ function expectOutOfBoundsException (obj, fn, arg1) {
} }
} }
const actual = result; const actual = result;
return {result, message, actual, expected}; return { result, message, actual, expected };
} }
/** /**

4
cypress/support/assertion-wrapper.js
View File

@@ -3,10 +3,10 @@
* @param {external:chai_utils} utils * @param {external:chai_utils} utils
* @returns {void} * @returns {void}
*/ */
function setAssertionMethods (_chai, utils) { function setAssertionMethods (_chai, _utils) {
return (method) => { return (method) => {
return (...args) => { return (...args) => {
const {result, message, actual, expected} = method(...args); const { result, message, actual, expected } = method(...args);
const assertion = new _chai.Assertion(); const assertion = new _chai.Assertion();
assertion.assert(result, `Expected ${actual} to be ${expected}`, message); assertion.assert(result, `Expected ${actual} to be ${expected}`, message);
}; };

4
cypress/support/commands.js
View File

@@ -25,14 +25,14 @@
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
// remove the style attributes that is causing differences in snapshots // remove the style attributes that is causing differences in snapshots
const ngAttributes = ['style']; const ngAttributes = [ 'style' ];
Cypress.Commands.add( Cypress.Commands.add(
'cleanSnapshot', 'cleanSnapshot',
{ {
prevSubject: true prevSubject: true
}, },
(subject, snapshotOptions) => { (subject, _snapshotOptions) => {
let html = subject[0].outerHTML; let html = subject[0].outerHTML;
for (const attribute of ngAttributes) { for (const attribute of ngAttributes) {

6
cypress/support/ui-test-helper.js
View File

@@ -1,6 +1,6 @@
export const approveStorage = () => { export const approveStorage = () => {
return cy.get('#dialog_buttons > input[type=button][data-ok]') // JFH will need to be chnaged when dialog is changed...
.click(); cy.get('#storage_ok').click();
}; };
export const visitAndApproveStorage = () => { export const visitAndApproveStorage = () => {
@@ -9,7 +9,7 @@ export const visitAndApproveStorage = () => {
}; };
export const openMainMenu = () => { export const openMainMenu = () => {
return cy.get('#main_icon').click(); return cy.get('#main_button').click({ force: true });
}; };
export const openEditorPreferences = () => { export const openEditorPreferences = () => {

15
demos/canvas.html
View File

@@ -4,9 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Minimal demo of SvgCanvas</title> <title>Minimal demo of SvgCanvas</title>
<script src="../src/editor/jquery.min.js"></script> <script src="../src/editor/jquery.min.js"></script>
<script src="../src/editor/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<style> #svgroot { overflow: hidden; } </style> <style> #svgroot { overflow: hidden; } </style>
<link rel="shortcut icon" type="image/x-icon" href="../src/editor/images/logo.png" /> <link rel="shortcut icon" type="image/x-icon" href="../src/editor/images/logo.svg" />
</head> </head>
<body> <body>
@@ -29,17 +28,17 @@
import SvgCanvas from '../src/svgcanvas/svgcanvas.js'; import SvgCanvas from '../src/svgcanvas/svgcanvas.js';
const container = document.querySelector('#editorContainer'); const container = document.querySelector('#editorContainer');
const {width, height} = {width: 500, height: 300}; const { width, height } = { width: 500, height: 300 };
window.width = width; window.width = width;
window.height = height; window.height = height;
const config = { const config = {
initFill: {color: 'FFFFFF', opacity: 1}, initFill: { color: 'FFFFFF', opacity: 1 },
initStroke: {color: '000000', opacity: 1, width: 1}, initStroke: { color: '000000', opacity: 1, width: 1 },
text: {stroke_width: 0, font_size: 24, font_family: 'serif'}, text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
initOpacity: 1, initOpacity: 1,
imgPath: 'editor/images/', imgPath: '../src/editor/images/',
dimensions: [width, height], dimensions: [ width, height ],
baseUnit: 'px' baseUnit: 'px'
}; };

54
dist/editor/browser-not-supported.html vendored
View File

@@ -1,54 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta 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="svgedit.css"/>
<title>Browser does not support SVG | SVG-edit</title>
<style>
body {
margin: 0;
overflow: hidden;
}
p {
font-size: 0.8em;
font-family: Verdana, Helvetica, Arial;
color: #000;
padding: 8px;
margin: 0;
}
#logo {
float: left;
padding: 10px;
}
#caniuse {
position: absolute;
top: 7em;
bottom: 0;
width: 100%;
}
#caniuse > iframe {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<img id="logo" src="images/logo.png" width="48" height="48" alt="SVG-edit logo" />
<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="https://caniuse.com/#cats=SVG">caniuse.com</a>).
</p>
<p>Try the latest version of
<a href="https://www.getfirefox.com">Firefox</a>,
<a href="https://www.google.com/chrome/">Chrome</a>,
<a href="https://www.apple.com/safari/">Safari</a>,
<a href="https://www.opera.com/download">Opera</a> or
<a href="https://support.microsoft.com/en-us/help/17621/internet-explorer-downloads">Internet Explorer</a>.
</p>
<div id="caniuse">
<iframe src="https://caniuse.com/#cats=SVG"></iframe>
</div>
</body>
</html>

17
dist/editor/embedapi.html vendored
View File

@@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Embed API</title>
<link rel="icon" type="image/png" href="images/logo.png"/>
<script src="jquery.min.js"></script>
<script type="module" src="embedapi-dom.js"></script>
</head>
<body>
<button id="load">Load example</button>
<button id="save">Save data</button>
<button id="exportPNG">Export data to PNG</button>
<button id="exportPDF">Export data to PDF</button>
<br/>
</body>
</html>

397
dist/editor/embedapi.js vendored
View File

@@ -1,397 +0,0 @@
/**
* Handles underlying communication between the embedding window and the
* editor frame.
* @module EmbeddedSVGEdit
*/
let cbid = 0;
/**
* @callback module:EmbeddedSVGEdit.CallbackSetter
* @param {GenericCallback} newCallback Callback to be stored (signature dependent on function)
* @returns {void}
*/
/**
* @callback module:EmbeddedSVGEdit.CallbackSetGetter
* @param {...any} args Signature dependent on the function
* @returns {module:EmbeddedSVGEdit.CallbackSetter}
*/
/**
* @param {string} funcName
* @returns {module:EmbeddedSVGEdit.CallbackSetGetter}
*/
function getCallbackSetter (funcName) {
return function (...args) {
const that = this, // New callback
callbackID = this.send(funcName, args, function () { /* empty */ }); // The callback (currently it's nothing, but will be set later)
return function (newCallback) {
that.callbacks[callbackID] = newCallback; // Set callback
};
};
}
/**
* Having this separate from messageListener allows us to
* avoid using JSON parsing (and its limitations) in the case
* of same domain control.
* @param {module:EmbeddedSVGEdit.EmbeddedSVGEdit} t The `this` value
* @param {PlainObject} data
* @param {JSON} data.result
* @param {string} data.error
* @param {Integer} data.id
* @returns {void}
*/
function addCallback (t, {result, error, id: callbackID}) {
if (typeof callbackID === 'number' && t.callbacks[callbackID]) {
// These should be safe both because we check `cbid` is numeric and
// because the calls are from trusted origins
if (result) {
t.callbacks[callbackID](result); // lgtm [js/unvalidated-dynamic-method-call]
} else {
t.callbacks[callbackID](error, 'error'); // lgtm [js/unvalidated-dynamic-method-call]
}
}
}
/**
* @param {Event} e
* @returns {void}
*/
function messageListener (e) {
// We accept and post strings as opposed to objects for the sake of IE9 support; this
// will most likely be changed in the future
if (!e.data || !['string', 'object'].includes(typeof e.data)) {
return;
}
const {allowedOrigins} = this,
data = typeof e.data === 'object' ? e.data : JSON.parse(e.data);
if (!data || typeof data !== 'object' || data.namespace !== 'svg-edit' ||
e.source !== this.frame.contentWindow ||
(!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin))
) {
// eslint-disable-next-line no-console -- Info for developers
console.error(
`The origin ${e.origin} was not whitelisted as an origin from ` +
`which responses may be received by this ${window.origin} script.`
);
return;
}
addCallback(this, data);
}
/**
* @callback module:EmbeddedSVGEdit.MessageListener
* @param {MessageEvent} e
* @returns {void}
*/
/**
* @param {module:EmbeddedSVGEdit.EmbeddedSVGEdit} t The `this` value
* @returns {module:EmbeddedSVGEdit.MessageListener} Event listener
*/
function getMessageListener (t) {
return function (e) {
messageListener.call(t, e);
};
}
/**
* Embedded SVG-edit API.
* General usage:
* - Have an iframe somewhere pointing to a version of svg-edit > r1000.
* @example
// Initialize the magic with:
const svgCanvas = new EmbeddedSVGEdit(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
throw error
} else {
// Handle data
console.log(data)
}
});
// Everything is done with the same API as the real svg-edit,
// and all documentation is unchanged.
// However, this file depends on the postMessage API which
// can only support JSON-serializable arguments and
// return values, so, for example, arguments whose value is
// 'undefined', a function, a non-finite number, or a built-in
// object like Date(), RegExp(), etc. will most likely not behave
// as expected. In such a case one may need to host
// the SVG editor on the same domain and reference the
// JavaScript methods on the frame itself.
// The only other difference is when handling returns:
// the callback notation is used instead.
const blah = new EmbeddedSVGEdit(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', args); });
*
* @memberof module:EmbeddedSVGEdit
*/
class EmbeddedSVGEdit {
/**
* @param {HTMLIFrameElement} frame
* @param {string[]} [allowedOrigins=[]] Array of origins from which incoming
* messages will be allowed when same origin is not used; defaults to none.
* If supplied, it should probably be the same as svgEditor's allowedOrigins
*/
constructor (frame, allowedOrigins) {
const that = this;
this.allowedOrigins = allowedOrigins || [];
// Initialize communication
this.frame = frame;
this.callbacks = {};
// List of functions extracted with this:
// Run in firebug on http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html
// for (const i=0,q=[],f = document.querySelectorAll('div.CFunction h3.CTitle a'); i < f.length; i++) { q.push(f[i].name); }; q
// const functions = ['clearSelection', 'addToSelection', 'removeFromSelection', 'open', 'save', 'getSvgString', 'setSvgString',
// 'createLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility',
// 'moveSelectedToLayer', 'clear'];
// Newer, well, it extracts things that aren't documented as well. All functions accessible through the normal thingy can now be accessed though the API
// const {svgCanvas} = frame.contentWindow;
// const l = [];
// for (const i in svgCanvas) { if (typeof svgCanvas[i] === 'function') { l.push(i);} };
// alert("['" + l.join("', '") + "']");
// Run in svgedit itself
const functions = [
'addExtension',
'addSVGElementFromJson',
'addToSelection',
'alignSelectedElements',
'assignAttributes',
'bind',
'call',
'changeSelectedAttribute',
'cleanupElement',
'clear',
'clearSelection',
'clearSvgContentElement',
'cloneLayer',
'cloneSelectedElements',
'convertGradients',
'convertToGroup',
'convertToNum',
'convertToPath',
'copySelectedElements',
'createLayer',
'cutSelectedElements',
'cycleElement',
'deleteCurrentLayer',
'deleteSelectedElements',
'embedImage',
'exportPDF',
'findDefs',
'getBBox',
'getBlur',
'getBold',
'getColor',
'getContentElem',
'getCurrentDrawing',
'getDocumentTitle',
'getEditorNS',
'getElem',
'getFillOpacity',
'getFontColor',
'getFontFamily',
'getFontSize',
'getHref',
'getId',
'getIntersectionList',
'getItalic',
'getMode',
'getMouseTarget',
'getNextId',
'getOffset',
'getOpacity',
'getPaintOpacity',
'getPrivateMethods',
'getRefElem',
'getResolution',
'getRootElem',
'getRotationAngle',
'getSelectedElems',
'getStrokeOpacity',
'getStrokeWidth',
'getStrokedBBox',
'getStyle',
'getSvgString',
'getText',
'getTitle',
'getTransformList',
'getUIStrings',
'getUrlFromAttr',
'getVersion',
'getVisibleElements',
'getVisibleElementsAndBBoxes',
'getZoom',
'groupSelectedElements',
'groupSvgElem',
'hasMatrixTransform',
'identifyLayers',
'importSvgString',
'leaveContext',
'linkControlPoints',
'makeHyperlink',
'matrixMultiply',
'mergeAllLayers',
'mergeLayer',
'moveSelectedElements',
'moveSelectedToLayer',
'moveToBottomSelectedElement',
'moveToTopSelectedElement',
'moveUpDownSelected',
'open',
'pasteElements',
'prepareSvg',
'pushGroupProperties',
'randomizeIds',
'rasterExport',
'ready',
'recalculateAllSelectedDimensions',
'recalculateDimensions',
'remapElement',
'removeFromSelection',
'removeHyperlink',
'removeUnusedDefElems',
'renameCurrentLayer',
'round',
'runExtensions',
'sanitizeSvg',
'save',
'selectAllInCurrentLayer',
'selectOnly',
'setBBoxZoom',
'setBackground',
'setBlur',
'setBlurNoUndo',
'setBlurOffsets',
'setBold',
'setColor',
'setConfig',
'setContext',
'setCurrentLayer',
'setCurrentLayerPosition',
'setDocumentTitle',
'setFillPaint',
'setFontColor',
'setFontFamily',
'setFontSize',
'setGoodImage',
'setGradient',
'setGroupTitle',
'setHref',
'setIdPrefix',
'setImageURL',
'setItalic',
'setLayerVisibility',
'setLinkURL',
'setMode',
'setOpacity',
'setPaint',
'setPaintOpacity',
'setRectRadius',
'setResolution',
'setRotationAngle',
'setSegType',
'setStrokeAttr',
'setStrokePaint',
'setStrokeWidth',
'setSvgString',
'setTextContent',
'setUiStrings',
'setUseData',
'setZoom',
'svgCanvasToString',
'svgToString',
'transformListToTransform',
'ungroupSelectedElement',
'uniquifyElems',
'updateCanvas',
'zoomChanged'
];
// TODO: rewrite the following, it's pretty scary.
for (const func of functions) {
this[func] = getCallbackSetter(func);
}
// Older IE may need a polyfill for addEventListener, but so it would for SVG
window.addEventListener('message', getMessageListener(this));
window.addEventListener('keydown', (e) => {
const {type, key} = e;
if (key === 'Backspace') {
e.preventDefault();
const keyboardEvent = new KeyboardEvent(type, {key});
that.frame.contentDocument.dispatchEvent(keyboardEvent);
}
});
}
/**
* @param {string} name
* @param {ArgumentsArray} args Signature dependent on function
* @param {GenericCallback} callback (This may be better than a promise in case adding an event.)
* @returns {Integer}
*/
send (name, args, callback) { // eslint-disable-line promise/prefer-await-to-callbacks
const that = this;
cbid++;
this.callbacks[cbid] = callback;
setTimeout((function (callbackID) {
return function () { // Delay for the callback to be set in case its synchronous
/*
* Todo: Handle non-JSON arguments and return values (undefined,
* nonfinite numbers, functions, and built-in objects like Date,
* RegExp), etc.? Allow promises instead of callbacks? Review
* SVG-Edit functions for whether JSON-able parameters can be
* made compatile with all API functionality
*/
// We accept and post strings for the sake of IE9 support
let sameOriginWithGlobal = false;
try {
sameOriginWithGlobal = window.location.origin === that.frame.contentWindow.location.origin &&
that.frame.contentWindow.svgEditor.canvas;
} catch (err) {}
if (sameOriginWithGlobal) {
// Although we do not really need this API if we are working same
// domain, it could allow us to write in a way that would work
// cross-domain as well, assuming we stick to the argument limitations
// of the current JSON-based communication API (e.g., not passing
// callbacks). We might be able to address these shortcomings; see
// the todo elsewhere in this file.
const message = {id: callbackID},
{svgEditor: {canvas: svgCanvas}} = that.frame.contentWindow;
try {
message.result = svgCanvas[name](...args);
} catch (err) {
message.error = err.message;
}
addCallback(that, message);
} else { // Requires the ext-xdomain-messaging.js extension
that.frame.contentWindow.postMessage(JSON.stringify({
namespace: 'svgCanvas', id: callbackID, name, args
}), '*');
}
};
}(cbid)), 0);
return cbid;
}
}
export default EmbeddedSVGEdit;

10
dist/editor/extensions/ext-arrows/ext-arrows.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-arrows/ext-arrows.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-closepath/ext-closepath.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-closepath/ext-closepath.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-connector/ext-connector.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-connector/ext-connector.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-eyedropper/ext-eyedropper.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-eyedropper/ext-eyedropper.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-foreignobject/ext-foreignobject.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-foreignobject/ext-foreignobject.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-grid/ext-grid.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-grid/ext-grid.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-helloworld/ext-helloworld.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-helloworld/ext-helloworld.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-imagelib/ext-imagelib.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-imagelib/ext-imagelib.js.map vendored
View File

File diff suppressed because one or more lines are too long

32
dist/editor/extensions/ext-markers/ext-markers.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-markers/ext-markers.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-mathjax/ext-mathjax.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-mathjax/ext-mathjax.js.map vendored
View File

File diff suppressed because one or more lines are too long

11
dist/editor/extensions/ext-overview_window/ext-overview_window.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-overview_window/ext-overview_window.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-panning/ext-panning.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-panning/ext-panning.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/extensions/ext-placemark/ext-placemark.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-placemark/ext-placemark.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/extensions/ext-polygon/ext-polygon.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-polygon/ext-polygon.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/extensions/ext-server_moinsave/ext-server_moinsave.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-server_moinsave/ext-server_moinsave.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/extensions/ext-server_opensave/ext-server_opensave.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-server_opensave/ext-server_opensave.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/editor/extensions/ext-shapes/ext-shapes.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-shapes/ext-shapes.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/extensions/ext-star/ext-star.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-star/ext-star.js.map vendored
View File

File diff suppressed because one or more lines are too long

22
dist/editor/extensions/ext-storage/ext-storage.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-storage/ext-storage.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
dist/editor/extensions/ext-webappfind/ext-webappfind.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/editor/extensions/ext-webappfind/ext-webappfind.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/extensions/ext-xdomain-messaging/ext-xdomain-messaging.js vendored
View File

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More