- Security fix: 'extPath', 'imgPath', 'extIconsPath', 'canvgPath', 'langPath', 'jGraduatePath', and 'jspdfPath' were not being prevented
- Breaking change: Rename "svgutils.js" to "utilities.js" (make in conformity with JSDoc module naming convention) - Breaking change: Rename "svgedit.js" to "namespaces.js" (to make clear purpose and avoid confusing with editor) - Breaking change: Rename "jquery-svg.js" to "jQuery.attr.js" - Breaking change: Rename "jquery.contextMenu.js" to "jQuery.contextMenu.js" - Breaking change: Rename "jquery.jpicker.js" to "jQuery.jPicker.js" - Breaking change: Rename "JQuerySpinBtn.css" to "jQuery.SpinButton.css" - Breaking change: Rename "JQuerySpinBtn.js" to "jQuery.SpinButton.js" (to have file name more closely reflect name) - Breaking change: Rename "jquery.svgicons.js" to "jQuery.svgIcons.js" - Breaking change: Rename "jquery.jgraduate.js" to "jQuery.jGraduate.js" - Breaking change: Rename "pathseg.js" to "svgpathseg.js" (as it is a poyfill of SVGPathSeg) - Breaking change: Rename `addSvgElementFromJson()` to `addSVGElementFromJson` for consistency - Breaking change: Rename `changeSvgContent()` to `changeSVGContent()` for consistency - Breaking change: Have `exportPDF` resolve with `output` and `outputType` rather than `dataurlstring` (as type may vary) - Breaking change: Rename `extensions/mathjax/MathJax.js` to `extensions/mathjax/MathJax.min.js` - Breaking change: Avoid recent change to have editor ready callbacks return Promises (we're not using and advantageous to keep sequential) - Breaking change: Avoid recent addition of locale-side function in ext-imagelib for l10n - Breaking change: Change name of ext-arrows.js from `Arrows` to `arrows` for sake of file path (not localized anyways). - Breaking change: Change `addlangData` extension event to `addLangData` for consistency with method name - Breaking change: Have `readLang` return lang and data but do not call `setLang` - Fix: Have general locales load first so extensions may use - Fix: Provide `importLocale` to extensions `init` so it may delay adding of the extension until locale data loaded - Fix: Ensure call to `rasterExport` without `imgType` properly sets MIME type to PNG - Fix: Wrong name for moinsave - Update: Update WebAppFind per new API changes - Enhancement: Make `setStrings` public on editor for late setting (used by `ext-shapes.js`) - Enhancement: Add `extensions_added` event - Enhancement: Add `message` event (Relay messages including those which have been been received prior to extension load) - Enhancement: Allow SVGEdit to work out of the box--avoid need for copying sample config file. Should also help with Github-based file servers - Enhancement: Allow avoiding "name" in extension export (just extract out of file name) - Enhancement: Add stack blur to canvg by default (and refactoring it) - Enhancement: Return `Promise` for `embedImage` (as with some other loading methods) - Enhancement: Supply `importLocale` to `langReady` to facilitate extension locale loading - Enhancement: Recover if an extension fails to load (just log and otherwise ignore) - Enhancement: More i18n of extensions (also fixed issue with some console warnings about missing locale strings); i18nize Hello World too - Enhancement: Allowing importing of locales within `addLangData` - npm: Update devDeps - Docs: Migrate copies of all old wiki pages to docs/from-old-wiki folder; intended for a possible move to Markdown, so raw HTML (with formatting) was not preserved, though named links had their absolute URL links preserved - Docs: Begin deleting `SvgCanvas.md` as ensuring jsdoc has replacements - Docs: Add Edtior doc file for help to general users - Docs: Clarify/simplify install instructions - npm/Docs (JSDoc): Add script to check for overly generic types - Docs (JSDoc): For config/prefs and extension creating, link to tutorials (moved tutorials to own directory to avoid recursion problems by jsdoc) - Docs (JSDoc): Add modules (upper case for usual main entrance files or regular names) - Docs (JSDoc): Fill out missing areas; indicate return of `undefined`; consistency with `@returns` - Docs (JSDoc): Add our own layout template to support overflow - Docs (JSDoc): Use cleverLinks and disallow unknown tags - Docs (JSDoc): Insist on "pedantic" flag; put output directory in config - Docs (JSDoc): Use more precise Integer/Float over number, the specific type of array/function/object - Docs (JSDoc): Use `@throws`, `@enum`, `@event`/`@fires`/`@listens` - Docs: Generally update/improve docs (fixes #92) - Docs: Update links to `latest` path (Avoid needing to update such references upon each release) - Docs: 80 chars max - Refactoring: Drop code for extension as function (already requiring export to be an object) - Refactoring: Object destructuring, `Object.entries`, Object shorthand, array extras, more camelCase variable names - Refactoring: Add a `Command` base class - Refactoring: Simplify svgicons `callback` ready detection - Refactoring: Put `let` or `const` closer to scope - Refactoring: Remove unneeded `delimiter` from regex escaping utility - Refactoring: Clearer variable names - Refactoring: Use (non-deprecated) Event constructors - Testing: Use new Sinonmaster
Brett Zamir
parent
057f5a5dc2
commit
a3f0b8e501
|
|
@ -5,7 +5,6 @@ docs/jsdoc
|
|||
|
||||
svgedit-config-es.js
|
||||
svgedit-config-iife.js
|
||||
svgedit-config-sample-iife.js
|
||||
svgedit-custom.css
|
||||
|
||||
# Vendor/minified files
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@ node_modules
|
|||
|
||||
build/
|
||||
|
||||
# For examples, see
|
||||
# svgedit-config-sample-es.js
|
||||
# svgedit-config-sample-iife.js
|
||||
svgedit-config-es.js
|
||||
svgedit-config-iife.js
|
||||
|
||||
svgedit-custom.css
|
||||
|
||||
docs/jsdoc
|
||||
|
|
|
|||
109
CHANGES.md
109
CHANGES.md
|
|
@ -1,5 +1,37 @@
|
|||
# ?
|
||||
|
||||
- Security fix: 'extPath', 'imgPath', 'extIconsPath', 'canvgPath',
|
||||
'langPath', 'jGraduatePath', and 'jspdfPath' were not being prevented
|
||||
- Breaking change: Rename "svgutils.js" to "utilities.js" (make in
|
||||
conformity with JSDoc module naming convention)
|
||||
- Breaking change: Rename "svgedit.js" to "namespaces.js" (to make clear
|
||||
purpose and avoid confusing with editor)
|
||||
- Breaking change: Rename "jquery-svg.js" to "jQuery.attr.js"
|
||||
- Breaking change: Rename "jquery.contextMenu.js" to "jQuery.contextMenu.js"
|
||||
- Breaking change: Rename "jquery.jpicker.js" to "jQuery.jPicker.js"
|
||||
- Breaking change: Rename "JQuerySpinBtn.css" to "jQuery.SpinButton.css"
|
||||
- Breaking change: Rename "JQuerySpinBtn.js" to "jQuery.SpinButton.js" (to
|
||||
have file name more closely reflect name)
|
||||
- Breaking change: Rename "jquery.svgicons.js" to "jQuery.svgIcons.js"
|
||||
- Breaking change: Rename "jquery.jgraduate.js" to "jQuery.jGraduate.js"
|
||||
- Breaking change: Rename "pathseg.js" to "svgpathseg.js" (as it is a
|
||||
poyfill of SVGPathSeg)
|
||||
- Breaking change: Rename `addSvgElementFromJson()` to `addSVGElementFromJson`
|
||||
for consistency
|
||||
- Breaking change: Rename `changeSvgContent()` to `changeSVGContent()` for
|
||||
consistency
|
||||
- Breaking change: Have `exportPDF` resolve with `output` and `outputType`
|
||||
rather than `dataurlstring` (as type may vary)
|
||||
- Breaking change: Rename `extensions/mathjax/MathJax.js` to
|
||||
`extensions/mathjax/MathJax.min.js`
|
||||
- Breaking change: Avoid recent change to have editor ready callbacks
|
||||
return Promises (we're not using and advantageous to keep sequential)
|
||||
- Breaking change: Avoid recent addition of locale-side function in
|
||||
ext-imagelib for l10n
|
||||
- Breaking change: Change name of `ext-arrows.js` from `Arrows` to `arrows`
|
||||
for sake of file path (not localized anyways).
|
||||
- Breaking change: Change `addlangData` extension event to `addLangData`
|
||||
for consistency with method name
|
||||
- Breaking change: In interests of modularity/removing globals,
|
||||
remove `window.svgCanvas` and `svgCanvas.ready` as used by older
|
||||
extensions; use `svgEditor.canvas` and `svgEditor.ready` instead
|
||||
|
|
@ -13,14 +45,19 @@
|
|||
(`setStackBlurCanvasRGBA`) rather than global; `canvg` now a named export
|
||||
- Breaking change: Avoid passing `canvg`/`buildCanvgCallback` to extensions
|
||||
(have them import)
|
||||
- Breaking change: Have `readLang` return lang and data but do not call
|
||||
`setLang`
|
||||
- npm: Add `prepublishOnly` script to ensure building/testing before publish
|
||||
- npm: Update devDep Rollup, Sinon
|
||||
- npm: Update devDeps including Rollup, Sinon
|
||||
- Fix: Remove redundant (and incorrect) length set. (#256 ; fixes #255)
|
||||
- Fix: Detection of whether to keep ellipse (rx and ry when just created
|
||||
are now returning 0 instead of null); also with rectangle/square;
|
||||
fixes #262
|
||||
- Fix: Avoid erring during resize on encountering MathML (which have no
|
||||
`style`)
|
||||
- Fix: Have general locales load first so extensions may use
|
||||
- Fix: Provide `importLocale` to extensions `init` so it may delay
|
||||
adding of the extension until locale data loaded
|
||||
- Fix: i18nize imaglib more deeply
|
||||
- Fix: Positioning of Document Properties dialog (Fixes #246)
|
||||
- Fix (regression): PDF Export (Fixes #249)
|
||||
|
|
@ -31,15 +68,37 @@
|
|||
- Fix (embedded editor): Fix backspace key in Firefox so it doesn't navigate
|
||||
out of frame
|
||||
- Fix: Alert if no `exportWindow` for PDF (e.g., if blocked)
|
||||
- Fix: Ensure call to `rasterExport` without `imgType` properly sets MIME
|
||||
type to PNG
|
||||
- Fix: Wrong name for moinsave
|
||||
- Fix (Embedded API): Cross-domain may fail to even access `origin` or
|
||||
`contentDocument`
|
||||
- Fix (Embedded API): Avoid adding URL to iframe src if there are no arguments
|
||||
- Fix (Cross-domain usage): Recover from exceptions with `localStorage`
|
||||
- Fix regression (Imagelib): Fix path for non-module version
|
||||
- Update: Update WebAppFind per new API changes
|
||||
- Enhancement: Make `setStrings` public on editor for late setting (used
|
||||
by `ext-shapes.js`)
|
||||
- Enhancement: Add `extensions_added` event
|
||||
- Enhancement: Add `message` event (Relay messages including those which
|
||||
have been been received prior to extension load)
|
||||
- Enhancement: Sort SVG attributes alphabetically (#252 @Neil Fraser)
|
||||
- Enhancement: Allow callback argument and return promise
|
||||
for canvas methods: `rasterExport` and `exportPDF`
|
||||
- Enhancement: Add `pointsAdded` canvas event (Fixes #141)
|
||||
- Enhancement: Allow SVGEdit to work out of the box--avoid need for copying
|
||||
sample config file. Should also help with Github-based file servers
|
||||
- Enhancement: Allow avoiding "name" in extension export (just extract out
|
||||
of file name)
|
||||
- Enhancement: Add stack blur to canvg by default (and refactoring it)
|
||||
- Enhancement: Return `Promise` for `embedImage` (as with some other loading
|
||||
methods)
|
||||
- Enhancement: Supply `importLocale` to `langReady` to facilitate extension
|
||||
locale loading
|
||||
- Enhancement: Recover if an extension fails to load (just log and otherwise
|
||||
ignore)
|
||||
- Enhancement: More i18n of extensions
|
||||
- Enhancement: Allowing importing of locales within `addLangData`
|
||||
- i18n: Clarify locale messages (where still available as English) to reflect
|
||||
fact that Chrome only has "Save as" via context menu/right-click, not via
|
||||
file menu (toward #192)
|
||||
|
|
@ -59,19 +118,55 @@
|
|||
- Refactoring: Fix `lang` and `dir` for locales (though not in use
|
||||
currently anyways)
|
||||
- Refactoring: Provide path config for canvg, jspdf
|
||||
- Refactoring: Drop code for extension as function (already requiring export
|
||||
to be an object)
|
||||
- Refactoring: Object destructuring, `Object.entries`, Object shorthand,
|
||||
array extras, more camelCase variable names
|
||||
- Refactoring: Add a `Command` base class
|
||||
- Refactoring: Simplify svgicons `callback` ready detection
|
||||
- Refactoring: Put `let` or `const` closer to scope
|
||||
- Refactoring: Remove unneeded `delimiter` from regex escaping utility
|
||||
- Refactoring: Clearer variable names
|
||||
- Refactoring: Use (non-deprecated) Event constructors
|
||||
- Refactoring (minor): variadic args through ellipsis
|
||||
- Refactoring (minor): `getIssues` to return codes and strings, lbs
|
||||
- Refactoring (minor): Use single quotes in PHP
|
||||
- Docs (Code comments): Coding standards within
|
||||
- Docs: Move jsdoc output to public directory so may be visible on releases
|
||||
(while still having in a `.gitignore`)
|
||||
- Docs (JSDoc): Add items; fix table layout
|
||||
- Docs: Exclusions from jsdoc
|
||||
- Docs: Transfer some changes from ExtensionDocs on wiki (need to fully
|
||||
reconcile)
|
||||
- Docs: Reference JSDocs in README
|
||||
- Docs (ReleaseInstructions): Update
|
||||
- Docs: Migrate copies of all old wiki pages to docs/from-old-wiki
|
||||
folder; intended for a possible move to Markdown, so raw HTML
|
||||
(with formatting) was not preserved, though named links were carried over
|
||||
with absolute URLs
|
||||
- Docs: Begin deleting `SvgCanvas.md` as ensuring jsdoc has replacements
|
||||
- Docs: Add Edtior doc file for help to general users
|
||||
- Docs: Clarify/simplify install instructions
|
||||
- Docs: Generally update/improve docs (fixes #92)
|
||||
- Docs: Update links to `latest` path (Avoid needing to update such
|
||||
references upon each release)
|
||||
- Docs: 80 chars max
|
||||
- npm/Docs (JSDoc): Add script to check for overly generic types
|
||||
- Docs (JSDoc): Move jsdoc output to public directory so may be visible
|
||||
on releases (while still having in a `.gitignore`)
|
||||
- Docs (JSDoc): Exclusions
|
||||
- Docs (JSDoc): Add items; fix table layout
|
||||
- Docs (JSDoc): For config/prefs and extension creating, link to tutorials
|
||||
(moved tutorials to own directory to avoid recursion problems by jsdoc)
|
||||
- Docs (JSDoc): Add modules (upper case for usual main entrance files or
|
||||
regular names)
|
||||
- Docs (JSDoc): Fill out missing areas; indicate return of `undefined`;
|
||||
consistency with `@returns`
|
||||
- Docs (JSDoc): Use Markdown plugin over HTML
|
||||
- Docs (JSDoc): Add our own layout template to support overflow
|
||||
- Docs (JSDoc): Use cleverLinks and disallow unknown tags
|
||||
- Docs (JSDoc): Insist on "pedantic" flag; put output directory in config
|
||||
- Docs (JSDoc): Use more precise Integer/Float over number, the specific type
|
||||
of array/function/object
|
||||
- Docs (JSDoc): Use `@throws`, `@enum`, `@event`/`@fires`/`@listens`
|
||||
- Linting (ESLint): Avoid linting jsdoc folder
|
||||
- Testing: Use new Sinon
|
||||
|
||||
# 3.0.0-alpha.4
|
||||
|
||||
|
|
@ -333,7 +428,7 @@ git log 4bb15e0..253b4bf
|
|||
- Potentially breaking API changes:
|
||||
* Disallowed "extPath", "imgPath", "langPath", and "jGraduatePath" setting via URL and prevent cross-domain/cross-folder extensions being set by URL (security enhancement)
|
||||
* Deprecated "pngsave" option called by setCustomHandlers() in favor of "exportImage" (to accommodate export of other image types). Second argument will now supply, in addition to "issues" and "svg", the properties "type" (currently 'PNG', 'JPEG', 'BMP', 'WEBP'), "mimeType", and "quality" (for 'JPEG' and 'WEBP' types).
|
||||
* Default extensions will now always load (along with those supplied in the URL unless the latter is prohibited by configuration), so if you do not wish your old code to load all of the default extensions, you will need to add &noDefaultExtensions=true to the URL (or add equivalent configuration in config.js). ext-overview_window.js can now be excluded though it is still a default.
|
||||
* Default extensions will now always load (along with those supplied in the URL unless the latter is prohibited by configuration), so if you do not wish your old code to load all of the default extensions, you will need to add `&noDefaultExtensions=true` to the URL (or add equivalent configuration in config.js). ext-overview_window.js can now be excluded though it is still a default.
|
||||
* Preferences and configuration options must be within the list supplied within svg-editor.js (should include those of all documented extensions).
|
||||
* Embedded messaging will no longer work by default for privacy/data integrity reasons. One must include the "ext-xdomain-messaging.js" extension and supply an array configuration item, "allowedOrigins" with potential values including: "\*" (to allow all domains--strongly discouraged!), "null" as a string to allow file:// access, window.location.origin (to allow same domain access), or specific trusted origins. The embedded editor works without the extension if the main editor is on the same domain, but if cross-domain control is needed, the "allowedOrigins" array must be supplied by a call to svgEditor.setConfig({allowedOrigins: [origin1, origin2, etc.]}) in the new config.js file.
|
||||
|
||||
|
|
@ -357,7 +452,7 @@ git log 4bb15e0..253b4bf
|
|||
- Open Local Files (Firefox 3.6+ only)
|
||||
- Import SVG into Drawing (Firefox 3.6+ only)
|
||||
- Ability to create extensions/plugins
|
||||
- Main menu and overal interface improvements
|
||||
- Main menu and overall interface improvements
|
||||
- Create and select elements outside the canvas
|
||||
- Base support for the svg:use element
|
||||
- Add/Edit Sub-paths
|
||||
|
|
|
|||
12
Makefile
12
Makefile
|
|
@ -8,15 +8,15 @@ ZIP=zip
|
|||
# All files that will be compiled by the Closure compiler.
|
||||
|
||||
JS_FILES=\
|
||||
svgedit.js \
|
||||
jquery-svg.js \
|
||||
contextmenu/jquery.contextMenu.js \
|
||||
pathseg.js \
|
||||
namespaces.js \
|
||||
jQuery.attr.js \
|
||||
contextmenu/jQuery.contextMenu.js \
|
||||
svgpathseg.js \
|
||||
browser.js \
|
||||
svgtransformlist.js \
|
||||
math.js \
|
||||
units.js \
|
||||
svgutils.js \
|
||||
utilities.js \
|
||||
sanitize.js \
|
||||
history.js \
|
||||
historyrecording.js \
|
||||
|
|
@ -93,7 +93,7 @@ chrome:
|
|||
cd build ; $(ZIP) -r $(PACKAGE)-crx.zip svgedit_app ; rm -rf svgedit_app; cd ..
|
||||
|
||||
jgraduate:
|
||||
java -jar $(CLOSURE) --js editor/jgraduate/jquery.jgraduate.js --js_output_file editor/jgraduate/jquery.jgraduate.min.js
|
||||
java -jar $(CLOSURE) --js editor/jgraduate/jquery.jGraduate.js --js_output_file editor/jgraduate/jquery.jgraduate.min.js
|
||||
clean:
|
||||
rm -rf config
|
||||
rm -rf build/$(PACKAGE)
|
||||
|
|
|
|||
108
README.md
108
README.md
|
|
@ -1,39 +1,80 @@
|
|||
#  SVG-edit
|
||||
|
||||
SVG-edit is a fast, web-based, javascript-driven SVG drawing editor that works in any modern browser.
|
||||
SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that
|
||||
works in any modern browser.
|
||||
|
||||
## Demo
|
||||
|
||||
### [Try SVG-edit here](https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html)
|
||||
### [Try SVG-edit here](https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.html)
|
||||
|
||||
(Also available as a [download](https://github.com/SVG-Edit/svgedit/releases/download/svg-edit-2.8.1/svg-edit-2.8.1.zip) in [releases](https://github.com/SVG-Edit/svgedit/releases)).
|
||||
(Also available as a download in [releases](https://github.com/SVG-Edit/svgedit/releases)).
|
||||
|
||||
You may also try the [pre-release](https://svg-edit.github.io/svgedit/releases/svg-edit-3.0.0-alpha.4/editor/svg-editor.html) (or the [ES6-Module](https://svg-edit.github.io/svgedit/releases/svg-edit-3.0.0-alpha.4/editor/svg-editor.html) version, assuming a modern browser).
|
||||
You may also try the [pre-release](https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.html) (or its [ES6-Module](https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.html) version, assuming a modern browser).
|
||||
|
||||
## Installation
|
||||
|
||||
Note that steps 1-2 below are only necessary if you wish to integrate
|
||||
SVG-edit into your own npm package; otherwise, you can skip those steps
|
||||
and instead of looking within `node_modules/svgedit`, look within your
|
||||
copy of the svgedit Git repo.
|
||||
### Quick install
|
||||
|
||||
1. Set up an npm package of your own: `npm init` (complete the fields).
|
||||
1. Install SVG-edit into your package: `npm i svgedit`
|
||||
1. Copy `svgedit-config-sample-es.js` (in the SVG-edit project root;
|
||||
see `node_modules/svgedit`) to `svgedit-config-es.js`.
|
||||
1. This will enable `svg-editor-es.html` to work, an HTML file directly
|
||||
using ES6 modules. Note that this file only works on modern browsers.
|
||||
The config file now imports the SVG edit code, minimizing the scripts
|
||||
that need to be referenced in the HTML file.
|
||||
1. To also build a rolled-up, Babelified, non-ES Modules (IIFE)
|
||||
JavaScript file which will allow `svg-editor.html` to work, a file
|
||||
which does not rely on ES6 Modules support, follow these steps:
|
||||
1. Run `npm install` within the `node_modules/svgedit` directory to
|
||||
install the build tools for SVG-edit.
|
||||
1. Run `npm run build-config` within the `node_modules/svgedit` directory.
|
||||
1. If you wish to make changes to the HTML, modify `svg-editor-es.html` and
|
||||
then run `npm run build-html` to have the changes properly copied to
|
||||
`svg-editor.html`.
|
||||
1. Clone or copy the repository contents (at least the `editor` directory).
|
||||
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
|
||||
<iframe src="svgedit/editor/svg-editor.html?extensions=" width="100%" height="100%"></iframe>
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
1. Create your npm package: `npm init` (complete the fields).
|
||||
1. Install SVG-edit into your package:
|
||||
`npm i svgedit`.
|
||||
1. Look within `node_modules/svgedit/`, e.g., `node_modules/svgedit/editor/svg-editor.html`
|
||||
for the files your package needs and use accordingly.
|
||||
1. `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 `node_modules/svgedit` directory to
|
||||
install the build tools for SVG-edit.
|
||||
1. Run `npm run build-config` within the `node_modules/svgedit` directory.
|
||||
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
|
||||
* 2018-05-26 Published 3.0.0-alpha.2 with ES6 Modules support
|
||||
|
|
@ -54,18 +95,19 @@ copy of the svgedit Git repo.
|
|||
|
||||
## Supported browsers
|
||||
|
||||
The following browsers had been tested for 2.6 or earlier and will probably continue to work with 2.8.
|
||||
* Firefox 1.5+
|
||||
* Opera 9.50+
|
||||
* Safari 4+
|
||||
* Chrome 1+
|
||||
* IE 9+ and Edge
|
||||
The following browsers had been tested for 2.6 or earlier and will probably continue to work with 3.0.
|
||||
|
||||
- Firefox 1.5+
|
||||
- Opera 9.50+
|
||||
- Safari 4+
|
||||
- Chrome 1+
|
||||
- IE 9+ and Edge
|
||||
|
||||
## Further reading and more information
|
||||
|
||||
* See [docs](docs/) for more documentation. See the [JSDocs for our latest release](https://svg-edit.github.io/svgedit/releases/svg-edit-3.0.0-alpha.4/docs/jsdoc/index.html).
|
||||
* 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).
|
||||
* [Acknowledgements](docs/Acknowledgements.md) lists open source projects used in svg-edit.
|
||||
* 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)).
|
||||
|
|
|
|||
|
|
@ -151,6 +151,13 @@ var canvg = (function (exports) {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* For parsing color values
|
||||
* @module RGBColor
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
var simpleColors = {
|
||||
aliceblue: 'f0f8ff',
|
||||
antiquewhite: 'faebd7',
|
||||
|
|
@ -320,12 +327,12 @@ var canvg = (function (exports) {
|
|||
|
||||
/**
|
||||
* A class to parse color values
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @link https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
var RGBColor = function () {
|
||||
/**
|
||||
* @param {string} colorString
|
||||
*/
|
||||
function RGBColor(colorString) {
|
||||
classCallCheck(this, RGBColor);
|
||||
|
||||
|
|
@ -372,6 +379,9 @@ var canvg = (function (exports) {
|
|||
}
|
||||
|
||||
// some getters
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
createClass(RGBColor, [{
|
||||
|
|
@ -379,6 +389,11 @@ var canvg = (function (exports) {
|
|||
value: function toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'toHex',
|
||||
value: function toHex() {
|
||||
|
|
@ -397,7 +412,10 @@ var canvg = (function (exports) {
|
|||
return '#' + r + g + b;
|
||||
}
|
||||
|
||||
// help
|
||||
/**
|
||||
* help
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'getHelpXML',
|
||||
|
|
@ -434,28 +452,414 @@ var canvg = (function (exports) {
|
|||
return RGBColor;
|
||||
}();
|
||||
|
||||
/* eslint-disable new-cap */
|
||||
/**
|
||||
* StackBlur - a fast almost Gaussian Blur For Canvas
|
||||
|
||||
var stackBlurCanvasRGBA = void 0;
|
||||
var setStackBlurCanvasRGBA = function setStackBlurCanvasRGBA(value) {
|
||||
stackBlurCanvasRGBA = value;
|
||||
In case you find this class useful - especially in commercial projects -
|
||||
I am not totally unhappy for a small donation to my PayPal account
|
||||
mario@quasimondo.de
|
||||
|
||||
Or support me on flattr:
|
||||
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
|
||||
|
||||
* @module StackBlur
|
||||
* @version 0.5
|
||||
* @author Mario Klingemann
|
||||
Contact: mario@quasimondo.com
|
||||
Website: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
|
||||
Twitter: @quasimondo
|
||||
|
||||
* @copyright (c) 2010 Mario Klingemann
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var mulTable = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
|
||||
|
||||
var shgTable = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];
|
||||
|
||||
/**
|
||||
* @param {string|HTMLCanvasElement} canvas
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @throws {Error}
|
||||
* @returns {ImageData} See {@link https://html.spec.whatwg.org/multipage/canvas.html#imagedata}
|
||||
*/
|
||||
function getImageDataFromCanvas(canvas, topX, topY, width, height) {
|
||||
if (typeof canvas === 'string') {
|
||||
canvas = document.getElementById(canvas);
|
||||
}
|
||||
if (!canvas || !('getContext' in canvas)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
try {
|
||||
return context.getImageData(topX, topY, width, height);
|
||||
} catch (e) {
|
||||
throw new Error('unable to access image data: ' + e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} canvas
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @param {Float} radius
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function processCanvasRGBA(canvas, topX, topY, width, height, radius) {
|
||||
if (isNaN(radius) || radius < 1) {
|
||||
return;
|
||||
}
|
||||
radius |= 0;
|
||||
|
||||
var imageData = getImageDataFromCanvas(canvas, topX, topY, width, height);
|
||||
|
||||
imageData = processImageDataRGBA(imageData, topX, topY, width, height, radius);
|
||||
|
||||
canvas.getContext('2d').putImageData(imageData, topX, topY);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ImageData} imageData
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @param {Float} radius
|
||||
* @returns {ImageData}
|
||||
*/
|
||||
function processImageDataRGBA(imageData, topX, topY, width, height, radius) {
|
||||
var pixels = imageData.data;
|
||||
|
||||
var x = void 0,
|
||||
y = void 0,
|
||||
i = void 0,
|
||||
p = void 0,
|
||||
yp = void 0,
|
||||
yi = void 0,
|
||||
yw = void 0,
|
||||
rSum = void 0,
|
||||
gSum = void 0,
|
||||
bSum = void 0,
|
||||
aSum = void 0,
|
||||
rOutSum = void 0,
|
||||
gOutSum = void 0,
|
||||
bOutSum = void 0,
|
||||
aOutSum = void 0,
|
||||
rInSum = void 0,
|
||||
gInSum = void 0,
|
||||
bInSum = void 0,
|
||||
aInSum = void 0,
|
||||
pr = void 0,
|
||||
pg = void 0,
|
||||
pb = void 0,
|
||||
pa = void 0,
|
||||
rbs = void 0;
|
||||
|
||||
var div = radius + radius + 1;
|
||||
// const w4 = width << 2;
|
||||
var widthMinus1 = width - 1;
|
||||
var heightMinus1 = height - 1;
|
||||
var radiusPlus1 = radius + 1;
|
||||
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
|
||||
|
||||
var stackStart = new BlurStack();
|
||||
var stack = stackStart;
|
||||
var stackEnd = void 0;
|
||||
for (i = 1; i < div; i++) {
|
||||
stack = stack.next = new BlurStack();
|
||||
if (i === radiusPlus1) {
|
||||
stackEnd = stack;
|
||||
}
|
||||
}
|
||||
stack.next = stackStart;
|
||||
var stackIn = null;
|
||||
var stackOut = null;
|
||||
|
||||
yw = yi = 0;
|
||||
|
||||
var mulSum = mulTable[radius];
|
||||
var shgSum = shgTable[radius];
|
||||
|
||||
for (y = 0; y < height; y++) {
|
||||
rInSum = gInSum = bInSum = aInSum = rSum = gSum = bSum = aSum = 0;
|
||||
|
||||
rOutSum = radiusPlus1 * (pr = pixels[yi]);
|
||||
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
|
||||
aOutSum = radiusPlus1 * (pa = pixels[yi + 3]);
|
||||
|
||||
rSum += sumFactor * pr;
|
||||
gSum += sumFactor * pg;
|
||||
bSum += sumFactor * pb;
|
||||
aSum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for (i = 0; i < radiusPlus1; i++) {
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
for (i = 1; i < radiusPlus1; i++) {
|
||||
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
|
||||
rSum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
|
||||
gSum += (stack.g = pg = pixels[p + 1]) * rbs;
|
||||
bSum += (stack.b = pb = pixels[p + 2]) * rbs;
|
||||
aSum += (stack.a = pa = pixels[p + 3]) * rbs;
|
||||
|
||||
rInSum += pr;
|
||||
gInSum += pg;
|
||||
bInSum += pb;
|
||||
aInSum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for (x = 0; x < width; x++) {
|
||||
pixels[yi + 3] = pa = aSum * mulSum >> shgSum;
|
||||
if (pa !== 0) {
|
||||
pa = 255 / pa;
|
||||
pixels[yi] = (rSum * mulSum >> shgSum) * pa;
|
||||
pixels[yi + 1] = (gSum * mulSum >> shgSum) * pa;
|
||||
pixels[yi + 2] = (bSum * mulSum >> shgSum) * pa;
|
||||
} else {
|
||||
pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
|
||||
}
|
||||
|
||||
rSum -= rOutSum;
|
||||
gSum -= gOutSum;
|
||||
bSum -= bOutSum;
|
||||
aSum -= aOutSum;
|
||||
|
||||
rOutSum -= stackIn.r;
|
||||
gOutSum -= stackIn.g;
|
||||
bOutSum -= stackIn.b;
|
||||
aOutSum -= stackIn.a;
|
||||
|
||||
p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;
|
||||
|
||||
rInSum += stackIn.r = pixels[p];
|
||||
gInSum += stackIn.g = pixels[p + 1];
|
||||
bInSum += stackIn.b = pixels[p + 2];
|
||||
aInSum += stackIn.a = pixels[p + 3];
|
||||
|
||||
rSum += rInSum;
|
||||
gSum += gInSum;
|
||||
bSum += bInSum;
|
||||
aSum += aInSum;
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
rOutSum += pr = stackOut.r;
|
||||
gOutSum += pg = stackOut.g;
|
||||
bOutSum += pb = stackOut.b;
|
||||
aOutSum += pa = stackOut.a;
|
||||
|
||||
rInSum -= pr;
|
||||
gInSum -= pg;
|
||||
bInSum -= pb;
|
||||
aInSum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += 4;
|
||||
}
|
||||
yw += width;
|
||||
}
|
||||
|
||||
for (x = 0; x < width; x++) {
|
||||
gInSum = bInSum = aInSum = rInSum = gSum = bSum = aSum = rSum = 0;
|
||||
|
||||
yi = x << 2;
|
||||
rOutSum = radiusPlus1 * (pr = pixels[yi]);
|
||||
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
|
||||
aOutSum = radiusPlus1 * (pa = pixels[yi + 3]);
|
||||
|
||||
rSum += sumFactor * pr;
|
||||
gSum += sumFactor * pg;
|
||||
bSum += sumFactor * pb;
|
||||
aSum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for (i = 0; i < radiusPlus1; i++) {
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
yp = width;
|
||||
|
||||
for (i = 1; i <= radius; i++) {
|
||||
yi = yp + x << 2;
|
||||
|
||||
rSum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
|
||||
gSum += (stack.g = pg = pixels[yi + 1]) * rbs;
|
||||
bSum += (stack.b = pb = pixels[yi + 2]) * rbs;
|
||||
aSum += (stack.a = pa = pixels[yi + 3]) * rbs;
|
||||
|
||||
rInSum += pr;
|
||||
gInSum += pg;
|
||||
bInSum += pb;
|
||||
aInSum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
|
||||
if (i < heightMinus1) {
|
||||
yp += width;
|
||||
}
|
||||
}
|
||||
|
||||
yi = x;
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for (y = 0; y < height; y++) {
|
||||
p = yi << 2;
|
||||
pixels[p + 3] = pa = aSum * mulSum >> shgSum;
|
||||
if (pa > 0) {
|
||||
pa = 255 / pa;
|
||||
pixels[p] = (rSum * mulSum >> shgSum) * pa;
|
||||
pixels[p + 1] = (gSum * mulSum >> shgSum) * pa;
|
||||
pixels[p + 2] = (bSum * mulSum >> shgSum) * pa;
|
||||
} else {
|
||||
pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
|
||||
}
|
||||
|
||||
rSum -= rOutSum;
|
||||
gSum -= gOutSum;
|
||||
bSum -= bOutSum;
|
||||
aSum -= aOutSum;
|
||||
|
||||
rOutSum -= stackIn.r;
|
||||
gOutSum -= stackIn.g;
|
||||
bOutSum -= stackIn.b;
|
||||
aOutSum -= stackIn.a;
|
||||
|
||||
p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;
|
||||
|
||||
rSum += rInSum += stackIn.r = pixels[p];
|
||||
gSum += gInSum += stackIn.g = pixels[p + 1];
|
||||
bSum += bInSum += stackIn.b = pixels[p + 2];
|
||||
aSum += aInSum += stackIn.a = pixels[p + 3];
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
rOutSum += pr = stackOut.r;
|
||||
gOutSum += pg = stackOut.g;
|
||||
bOutSum += pb = stackOut.b;
|
||||
aOutSum += pa = stackOut.a;
|
||||
|
||||
rInSum -= pr;
|
||||
gInSum -= pg;
|
||||
bInSum -= pb;
|
||||
aInSum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += width;
|
||||
}
|
||||
}
|
||||
return imageData;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
var BlurStack = function BlurStack() {
|
||||
classCallCheck(this, BlurStack);
|
||||
|
||||
this.r = 0;
|
||||
this.g = 0;
|
||||
this.b = 0;
|
||||
this.a = 0;
|
||||
this.next = null;
|
||||
};
|
||||
|
||||
// canvg(target, s)
|
||||
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
|
||||
// target: canvas element or the id of a canvas element
|
||||
// s: svg string, url to svg file, or xml document
|
||||
// opts: optional hash of options
|
||||
// ignoreMouse: true => ignore mouse events
|
||||
// ignoreAnimation: true => ignore animations
|
||||
// ignoreDimensions: true => does not try to resize canvas
|
||||
// ignoreClear: true => does not clear canvas
|
||||
// offsetX: int => draws at a x offset
|
||||
// offsetY: int => draws at a y offset
|
||||
// scaleWidth: int => scales horizontally to width
|
||||
// scaleHeight: int => scales vertically to height
|
||||
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
|
||||
// returns all the function after the first render is completed with dom
|
||||
/* eslint-disable new-cap */
|
||||
|
||||
var canvasRGBA_ = processCanvasRGBA;
|
||||
|
||||
/**
|
||||
* @callback module:canvg.StackBlurCanvasRGBA
|
||||
* @param {string} id
|
||||
* @param {Float} x
|
||||
* @param {Float} y
|
||||
* @param {Float} width
|
||||
* @param {Float} height
|
||||
* @param {Float} blurRadius
|
||||
*/
|
||||
|
||||
/**
|
||||
* @callback module:canvg.ForceRedraw
|
||||
* @returns {boolean}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @function module:canvg.setStackBlurCanvasRGBA
|
||||
* @param {module:canvg.StackBlurCanvasRGBA} cb Will be passed the canvas ID, x, y, width, height, blurRadius
|
||||
*/
|
||||
var setStackBlurCanvasRGBA = function setStackBlurCanvasRGBA(cb) {
|
||||
canvasRGBA_ = cb;
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef {PlainObject} module:canvg.CanvgOptions
|
||||
* @property {boolean} opts.ignoreMouse true => ignore mouse events
|
||||
* @property {boolean} opts.ignoreAnimation true => ignore animations
|
||||
* @property {boolean} opts.ignoreDimensions true => does not try to resize canvas
|
||||
* @property {boolean} opts.ignoreClear true => does not clear canvas
|
||||
* @property {Integer} opts.offsetX int => draws at a x offset
|
||||
* @property {Integer} opts.offsetY int => draws at a y offset
|
||||
* @property {Integer} opts.scaleWidth int => scales horizontally to width
|
||||
* @property {Integer} opts.scaleHeight int => scales vertically to height
|
||||
* @property {module:canvg.ForceRedraw} opts.forceRedraw function => will call the function on every frame, if it returns true, will redraw
|
||||
* @property {boolean} opts.log Adds log function
|
||||
* @property {boolean} opts.useCORS Whether to set CORS `crossOrigin` for the image to `Anonymous`
|
||||
*/
|
||||
|
||||
/**
|
||||
* If called with no arguments, it will replace all `<svg>` elements on the page with `<canvas>` elements
|
||||
* @function module:canvg.canvg
|
||||
* @param {HTMLCanvasElement|string} target canvas element or the id of a canvas element
|
||||
* @param {string|XMLDocument} s: svg string, url to svg file, or xml document
|
||||
* @param {module:canvg.CanvgOptions} [opts] Optional hash of options
|
||||
* @returns {Promise} All the function after the first render is completed with dom
|
||||
*/
|
||||
var canvg = function canvg(target, s, opts) {
|
||||
// no parameters
|
||||
if (target == null && s == null && opts == null) {
|
||||
|
|
@ -497,6 +901,11 @@ var canvg = (function (exports) {
|
|||
return svg.load(ctx, s);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {module:canvg.CanvgOptions} opts
|
||||
* @returns {object}
|
||||
* @todo Flesh out exactly what object is returned here (after updating to latest and reincluding our changes here and those of StackBlur)
|
||||
*/
|
||||
function build(opts) {
|
||||
var svg = { opts: opts };
|
||||
|
||||
|
|
@ -3635,16 +4044,17 @@ var canvg = (function (exports) {
|
|||
createClass(_class46, [{
|
||||
key: 'apply',
|
||||
value: function apply(ctx, x, y, width, height) {
|
||||
if (typeof stackBlurCanvasRGBA === 'undefined') {
|
||||
if (typeof canvasRGBA_ === 'undefined') {
|
||||
svg.log('ERROR: `setStackBlurCanvasRGBA` must be run for blur to work');
|
||||
return;
|
||||
}
|
||||
|
||||
// Todo: This might not be a problem anymore with out `instanceof` fix
|
||||
// StackBlur requires canvas be on document
|
||||
ctx.canvas.id = svg.UniqueId();
|
||||
ctx.canvas.style.display = 'none';
|
||||
document.body.append(ctx.canvas);
|
||||
stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
||||
canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
||||
ctx.canvas.remove();
|
||||
}
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1,302 +1,367 @@
|
|||
var svgEditorExtension_arrows = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-arrows.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
var extArrows = {
|
||||
name: 'Arrows',
|
||||
init: function init(S) {
|
||||
var svgEditor = this;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
var $ = jQuery;
|
||||
// {svgcontent} = S,
|
||||
var addElem = S.addSvgElementFromJson,
|
||||
nonce = S.nonce,
|
||||
langList = {
|
||||
en: [{ id: 'arrow_none', textContent: 'No arrow' }],
|
||||
fr: [{ id: 'arrow_none', textContent: 'Sans flèche' }]
|
||||
},
|
||||
prefix = 'se_arrow_';
|
||||
name: 'arrows',
|
||||
init: function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(S) {
|
||||
var strings, svgEditor, svgCanvas, $, addElem, nonce, prefix, selElems, arrowprefix, randomizeIds, setArrowNonce, unsetArrowNonce, pathdata, getLinked, showPanel, resetMarker, addMarker, setArrow, colorChanged, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
colorChanged = function colorChanged(elem) {
|
||||
var color = elem.getAttribute('stroke');
|
||||
var mtypes = ['start', 'mid', 'end'];
|
||||
var defs = S.findDefs();
|
||||
|
||||
$.each(mtypes, function (i, type) {
|
||||
var marker = getLinked(elem, 'marker-' + type);
|
||||
if (!marker) {
|
||||
return;
|
||||
}
|
||||
|
||||
var curColor = $(marker).children().attr('fill');
|
||||
var curD = $(marker).children().attr('d');
|
||||
if (curColor === color) {
|
||||
return;
|
||||
}
|
||||
|
||||
var allMarkers = $(defs).find('marker');
|
||||
var newMarker = null;
|
||||
// Different color, check if already made
|
||||
allMarkers.each(function () {
|
||||
var attrs = $(this).children().attr(['fill', 'd']);
|
||||
if (attrs.fill === color && attrs.d === curD) {
|
||||
// Found another marker with this color and this path
|
||||
newMarker = this;
|
||||
}
|
||||
});
|
||||
|
||||
if (!newMarker) {
|
||||
// Create a new marker with this color
|
||||
var lastId = marker.id;
|
||||
var dir = lastId.includes('_fw') ? 'fw' : 'bk';
|
||||
|
||||
newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length);
|
||||
|
||||
$(newMarker).children().attr('fill', color);
|
||||
}
|
||||
|
||||
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')');
|
||||
|
||||
// Check if last marker can be removed
|
||||
var remove = true;
|
||||
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
|
||||
var elem = this;
|
||||
$.each(mtypes, function (j, mtype) {
|
||||
if ($(elem).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
|
||||
remove = false;
|
||||
return remove;
|
||||
}
|
||||
});
|
||||
if (!remove) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Not found, so can safely remove
|
||||
if (remove) {
|
||||
$(marker).remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
setArrow = function setArrow() {
|
||||
resetMarker();
|
||||
|
||||
var type = this.value;
|
||||
if (type === 'none') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set marker on element
|
||||
var dir = 'fw';
|
||||
if (type === 'mid_bk') {
|
||||
type = 'mid';
|
||||
dir = 'bk';
|
||||
} else if (type === 'both') {
|
||||
addMarker('bk', type);
|
||||
svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')');
|
||||
type = 'end';
|
||||
dir = 'fw';
|
||||
} else if (type === 'start') {
|
||||
dir = 'bk';
|
||||
}
|
||||
|
||||
addMarker(dir, type);
|
||||
svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
|
||||
S.call('changed', selElems);
|
||||
};
|
||||
|
||||
addMarker = function addMarker(dir, type, id) {
|
||||
// TODO: Make marker (or use?) per arrow type, since refX can be different
|
||||
id = id || arrowprefix + dir;
|
||||
|
||||
var data = pathdata[dir];
|
||||
|
||||
if (type === 'mid') {
|
||||
data.refx = 5;
|
||||
}
|
||||
|
||||
var marker = S.getElem(id);
|
||||
if (!marker) {
|
||||
marker = addElem({
|
||||
element: 'marker',
|
||||
attr: {
|
||||
viewBox: '0 0 10 10',
|
||||
id: id,
|
||||
refY: 5,
|
||||
markerUnits: 'strokeWidth',
|
||||
markerWidth: 5,
|
||||
markerHeight: 5,
|
||||
orient: 'auto',
|
||||
style: 'pointer-events:none' // Currently needed for Opera
|
||||
}
|
||||
});
|
||||
var arrow = addElem({
|
||||
element: 'path',
|
||||
attr: {
|
||||
d: data.d,
|
||||
fill: '#000000'
|
||||
}
|
||||
});
|
||||
marker.append(arrow);
|
||||
S.findDefs().append(marker);
|
||||
}
|
||||
|
||||
marker.setAttribute('refX', data.refx);
|
||||
|
||||
return marker;
|
||||
};
|
||||
|
||||
resetMarker = function resetMarker() {
|
||||
var el = selElems[0];
|
||||
el.removeAttribute('marker-start');
|
||||
el.removeAttribute('marker-mid');
|
||||
el.removeAttribute('marker-end');
|
||||
};
|
||||
|
||||
showPanel = function showPanel(on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
if (on) {
|
||||
var el = selElems[0];
|
||||
var end = el.getAttribute('marker-end');
|
||||
var start = el.getAttribute('marker-start');
|
||||
var mid = el.getAttribute('marker-mid');
|
||||
var val = void 0;
|
||||
if (end && start) {
|
||||
val = 'both';
|
||||
} else if (end) {
|
||||
val = 'end';
|
||||
} else if (start) {
|
||||
val = 'start';
|
||||
} else if (mid) {
|
||||
val = 'mid';
|
||||
if (mid.includes('bk')) {
|
||||
val = 'mid_bk';
|
||||
}
|
||||
}
|
||||
|
||||
if (!start && !mid && !end) {
|
||||
val = 'none';
|
||||
}
|
||||
|
||||
$('#arrow_list').val(val);
|
||||
}
|
||||
};
|
||||
|
||||
getLinked = function getLinked(elem, attr) {
|
||||
var str = elem.getAttribute(attr);
|
||||
if (!str) {
|
||||
return null;
|
||||
}
|
||||
var m = str.match(/\(#(.*)\)/);
|
||||
if (!m || m.length !== 2) {
|
||||
return null;
|
||||
}
|
||||
return S.getElem(m[1]);
|
||||
};
|
||||
|
||||
unsetArrowNonce = function unsetArrowNonce(window) {
|
||||
randomizeIds = false;
|
||||
arrowprefix = prefix;
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
};
|
||||
|
||||
setArrowNonce = function setArrowNonce(window, n) {
|
||||
randomizeIds = true;
|
||||
arrowprefix = prefix + n + '_';
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
};
|
||||
|
||||
_context2.next = 10;
|
||||
return S.importLocale();
|
||||
|
||||
case 10:
|
||||
strings = _context2.sent;
|
||||
svgEditor = this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
$ = jQuery;
|
||||
// {svgcontent} = S,
|
||||
addElem = S.addSVGElementFromJson, nonce = S.nonce, prefix = 'se_arrow_';
|
||||
selElems = void 0, arrowprefix = void 0, randomizeIds = S.randomize_ids;
|
||||
|
||||
|
||||
var selElems = void 0,
|
||||
arrowprefix = void 0,
|
||||
randomizeIds = S.randomize_ids;
|
||||
svgCanvas.bind('setnonce', setArrowNonce);
|
||||
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
||||
|
||||
function setArrowNonce(window, n) {
|
||||
randomizeIds = true;
|
||||
arrowprefix = prefix + n + '_';
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
}
|
||||
if (randomizeIds) {
|
||||
arrowprefix = prefix + nonce + '_';
|
||||
} else {
|
||||
arrowprefix = prefix;
|
||||
}
|
||||
|
||||
function unsetArrowNonce(window) {
|
||||
randomizeIds = false;
|
||||
arrowprefix = prefix;
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
}
|
||||
pathdata = {
|
||||
fw: { d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', refx: 8, id: arrowprefix + 'fw' },
|
||||
bk: { d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', refx: 2, id: arrowprefix + 'bk' }
|
||||
};
|
||||
contextTools = [{
|
||||
type: 'select',
|
||||
panel: 'arrow_panel',
|
||||
id: 'arrow_list',
|
||||
defval: 'none',
|
||||
events: {
|
||||
change: setArrow
|
||||
}
|
||||
}];
|
||||
return _context2.abrupt('return', {
|
||||
name: strings.name,
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#arrow_panel').hide();
|
||||
// Set ID so it can be translated in locale file
|
||||
$('#arrow_list option')[0].id = 'connector_no_arrow';
|
||||
},
|
||||
addLangData: function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref2) {
|
||||
var lang = _ref2.lang,
|
||||
importLocale = _ref2.importLocale;
|
||||
var strings;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_context.next = 2;
|
||||
return importLocale();
|
||||
|
||||
svgCanvas.bind('setnonce', setArrowNonce);
|
||||
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
||||
case 2:
|
||||
strings = _context.sent;
|
||||
return _context.abrupt('return', {
|
||||
data: strings.langList
|
||||
});
|
||||
|
||||
if (randomizeIds) {
|
||||
arrowprefix = prefix + nonce + '_';
|
||||
} else {
|
||||
arrowprefix = prefix;
|
||||
}
|
||||
case 4:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
var pathdata = {
|
||||
fw: { d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', refx: 8, id: arrowprefix + 'fw' },
|
||||
bk: { d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', refx: 2, id: arrowprefix + 'bk' }
|
||||
};
|
||||
function addLangData(_x2) {
|
||||
return _ref3.apply(this, arguments);
|
||||
}
|
||||
|
||||
function getLinked(elem, attr) {
|
||||
var str = elem.getAttribute(attr);
|
||||
if (!str) {
|
||||
return null;
|
||||
}
|
||||
var m = str.match(/\(#(.*)\)/);
|
||||
if (!m || m.length !== 2) {
|
||||
return null;
|
||||
}
|
||||
return S.getElem(m[1]);
|
||||
}
|
||||
return addLangData;
|
||||
}(),
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
function showPanel(on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
if (on) {
|
||||
var el = selElems[0];
|
||||
var end = el.getAttribute('marker-end');
|
||||
var start = el.getAttribute('marker-start');
|
||||
var mid = el.getAttribute('marker-mid');
|
||||
var val = void 0;
|
||||
if (end && start) {
|
||||
val = 'both';
|
||||
} else if (end) {
|
||||
val = 'end';
|
||||
} else if (start) {
|
||||
val = 'start';
|
||||
} else if (mid) {
|
||||
val = 'mid';
|
||||
if (mid.includes('bk')) {
|
||||
val = 'mid_bk';
|
||||
var markerElems = ['line', 'path', 'polyline', 'polygon'];
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && markerElems.includes(elem.tagName)) {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
var elem = opts.elems[0];
|
||||
if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) {
|
||||
// const start = elem.getAttribute('marker-start');
|
||||
// const mid = elem.getAttribute('marker-mid');
|
||||
// const end = elem.getAttribute('marker-end');
|
||||
// Has marker, so see if it should match color
|
||||
colorChanged(elem);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 22:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this);
|
||||
}));
|
||||
|
||||
if (!start && !mid && !end) {
|
||||
val = 'none';
|
||||
}
|
||||
|
||||
$('#arrow_list').val(val);
|
||||
}
|
||||
function init(_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
}
|
||||
|
||||
function resetMarker() {
|
||||
var el = selElems[0];
|
||||
el.removeAttribute('marker-start');
|
||||
el.removeAttribute('marker-mid');
|
||||
el.removeAttribute('marker-end');
|
||||
}
|
||||
|
||||
function addMarker(dir, type, id) {
|
||||
// TODO: Make marker (or use?) per arrow type, since refX can be different
|
||||
id = id || arrowprefix + dir;
|
||||
|
||||
var data = pathdata[dir];
|
||||
|
||||
if (type === 'mid') {
|
||||
data.refx = 5;
|
||||
}
|
||||
|
||||
var marker = S.getElem(id);
|
||||
if (!marker) {
|
||||
marker = addElem({
|
||||
element: 'marker',
|
||||
attr: {
|
||||
viewBox: '0 0 10 10',
|
||||
id: id,
|
||||
refY: 5,
|
||||
markerUnits: 'strokeWidth',
|
||||
markerWidth: 5,
|
||||
markerHeight: 5,
|
||||
orient: 'auto',
|
||||
style: 'pointer-events:none' // Currently needed for Opera
|
||||
}
|
||||
});
|
||||
var arrow = addElem({
|
||||
element: 'path',
|
||||
attr: {
|
||||
d: data.d,
|
||||
fill: '#000000'
|
||||
}
|
||||
});
|
||||
marker.append(arrow);
|
||||
S.findDefs().append(marker);
|
||||
}
|
||||
|
||||
marker.setAttribute('refX', data.refx);
|
||||
|
||||
return marker;
|
||||
}
|
||||
|
||||
function setArrow() {
|
||||
resetMarker();
|
||||
|
||||
var type = this.value;
|
||||
if (type === 'none') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set marker on element
|
||||
var dir = 'fw';
|
||||
if (type === 'mid_bk') {
|
||||
type = 'mid';
|
||||
dir = 'bk';
|
||||
} else if (type === 'both') {
|
||||
addMarker('bk', type);
|
||||
svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')');
|
||||
type = 'end';
|
||||
dir = 'fw';
|
||||
} else if (type === 'start') {
|
||||
dir = 'bk';
|
||||
}
|
||||
|
||||
addMarker(dir, type);
|
||||
svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
|
||||
S.call('changed', selElems);
|
||||
}
|
||||
|
||||
function colorChanged(elem) {
|
||||
var color = elem.getAttribute('stroke');
|
||||
var mtypes = ['start', 'mid', 'end'];
|
||||
var defs = S.findDefs();
|
||||
|
||||
$.each(mtypes, function (i, type) {
|
||||
var marker = getLinked(elem, 'marker-' + type);
|
||||
if (!marker) {
|
||||
return;
|
||||
}
|
||||
|
||||
var curColor = $(marker).children().attr('fill');
|
||||
var curD = $(marker).children().attr('d');
|
||||
if (curColor === color) {
|
||||
return;
|
||||
}
|
||||
|
||||
var allMarkers = $(defs).find('marker');
|
||||
var newMarker = null;
|
||||
// Different color, check if already made
|
||||
allMarkers.each(function () {
|
||||
var attrs = $(this).children().attr(['fill', 'd']);
|
||||
if (attrs.fill === color && attrs.d === curD) {
|
||||
// Found another marker with this color and this path
|
||||
newMarker = this;
|
||||
}
|
||||
});
|
||||
|
||||
if (!newMarker) {
|
||||
// Create a new marker with this color
|
||||
var lastId = marker.id;
|
||||
var dir = lastId.includes('_fw') ? 'fw' : 'bk';
|
||||
|
||||
newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length);
|
||||
|
||||
$(newMarker).children().attr('fill', color);
|
||||
}
|
||||
|
||||
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')');
|
||||
|
||||
// Check if last marker can be removed
|
||||
var remove = true;
|
||||
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
|
||||
var elem = this;
|
||||
$.each(mtypes, function (j, mtype) {
|
||||
if ($(elem).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
|
||||
remove = false;
|
||||
return remove;
|
||||
}
|
||||
});
|
||||
if (!remove) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Not found, so can safely remove
|
||||
if (remove) {
|
||||
$(marker).remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Arrows',
|
||||
context_tools: [{
|
||||
type: 'select',
|
||||
panel: 'arrow_panel',
|
||||
title: 'Select arrow type',
|
||||
id: 'arrow_list',
|
||||
options: {
|
||||
none: 'No arrow',
|
||||
end: '---->',
|
||||
start: '<----',
|
||||
both: '<--->',
|
||||
mid: '-->--',
|
||||
mid_bk: '--<--'
|
||||
},
|
||||
defval: 'none',
|
||||
events: {
|
||||
change: setArrow
|
||||
}
|
||||
}],
|
||||
callback: function callback() {
|
||||
$('#arrow_panel').hide();
|
||||
// Set ID so it can be translated in locale file
|
||||
$('#arrow_list option')[0].id = 'connector_no_arrow';
|
||||
},
|
||||
addLangData: function addLangData(lang) {
|
||||
return {
|
||||
data: langList[lang]
|
||||
};
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var markerElems = ['line', 'path', 'polyline', 'polygon'];
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && markerElems.includes(elem.tagName)) {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
var elem = opts.elems[0];
|
||||
if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) {
|
||||
// const start = elem.getAttribute('marker-start');
|
||||
// const mid = elem.getAttribute('marker-mid');
|
||||
// const end = elem.getAttribute('marker-end');
|
||||
// Has marker, so see if it should match color
|
||||
colorChanged(elem);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extArrows;
|
||||
|
|
|
|||
|
|
@ -1,101 +1,160 @@
|
|||
var svgEditorExtension_closepath = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-closepath.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2010 Jeff Schiller
|
||||
* @copyright 2010 Jeff Schiller
|
||||
*
|
||||
*/
|
||||
|
||||
// This extension adds a simple button to the contextual panel for paths
|
||||
// The button toggles whether the path is open or closed
|
||||
var extClosepath = {
|
||||
name: 'ClosePath',
|
||||
init: function init() {
|
||||
var $ = jQuery;
|
||||
var svgEditor = this;
|
||||
var selElems = void 0;
|
||||
var updateButton = function updateButton(path) {
|
||||
var seglist = path.pathSegList,
|
||||
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
|
||||
showbutton = closed ? '#tool_openpath' : '#tool_closepath',
|
||||
hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
|
||||
$(hidebutton).hide();
|
||||
$(showbutton).show();
|
||||
};
|
||||
var showPanel = function showPanel(on) {
|
||||
$('#closepath_panel').toggle(on);
|
||||
if (on) {
|
||||
var path = selElems[0];
|
||||
if (path) {
|
||||
updateButton(path);
|
||||
}
|
||||
}
|
||||
};
|
||||
var toggleClosed = function toggleClosed() {
|
||||
var path = selElems[0];
|
||||
if (path) {
|
||||
var seglist = path.pathSegList,
|
||||
last = seglist.numberOfItems - 1;
|
||||
// is closed
|
||||
if (seglist.getItem(last).pathSegType === 1) {
|
||||
seglist.removeItem(last);
|
||||
} else {
|
||||
seglist.appendItem(path.createSVGPathSegClosePath());
|
||||
}
|
||||
updateButton(path);
|
||||
}
|
||||
};
|
||||
name: 'closepath',
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
var strings, $, svgEditor, selElems, updateButton, showPanel, toggleClosed, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_context.next = 2;
|
||||
return importLocale();
|
||||
|
||||
return {
|
||||
name: 'ClosePath',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg',
|
||||
buttons: [{
|
||||
id: 'tool_openpath',
|
||||
type: 'context',
|
||||
panel: 'closepath_panel',
|
||||
title: 'Open path',
|
||||
events: {
|
||||
click: function click() {
|
||||
toggleClosed();
|
||||
case 2:
|
||||
strings = _context.sent;
|
||||
$ = jQuery;
|
||||
svgEditor = this;
|
||||
selElems = void 0;
|
||||
|
||||
updateButton = function updateButton(path) {
|
||||
var seglist = path.pathSegList,
|
||||
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
|
||||
showbutton = closed ? '#tool_openpath' : '#tool_closepath',
|
||||
hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
|
||||
$(hidebutton).hide();
|
||||
$(showbutton).show();
|
||||
};
|
||||
|
||||
showPanel = function showPanel(on) {
|
||||
$('#closepath_panel').toggle(on);
|
||||
if (on) {
|
||||
var path = selElems[0];
|
||||
if (path) {
|
||||
updateButton(path);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
toggleClosed = function toggleClosed() {
|
||||
var path = selElems[0];
|
||||
if (path) {
|
||||
var seglist = path.pathSegList,
|
||||
last = seglist.numberOfItems - 1;
|
||||
// is closed
|
||||
if (seglist.getItem(last).pathSegType === 1) {
|
||||
seglist.removeItem(last);
|
||||
} else {
|
||||
seglist.appendItem(path.createSVGPathSegClosePath());
|
||||
}
|
||||
updateButton(path);
|
||||
}
|
||||
};
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_openpath',
|
||||
type: 'context',
|
||||
panel: 'closepath_panel',
|
||||
events: {
|
||||
click: function click() {
|
||||
toggleClosed();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
id: 'tool_closepath',
|
||||
type: 'context',
|
||||
panel: 'closepath_panel',
|
||||
events: {
|
||||
click: function click() {
|
||||
toggleClosed();
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#closepath_panel').hide();
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
selElems = opts.elems;
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.tagName === 'path') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 11:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
id: 'tool_closepath',
|
||||
type: 'context',
|
||||
panel: 'closepath_panel',
|
||||
title: 'Close path',
|
||||
events: {
|
||||
click: function click() {
|
||||
toggleClosed();
|
||||
}
|
||||
}
|
||||
}],
|
||||
callback: function callback() {
|
||||
$('#closepath_panel').hide();
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
selElems = opts.elems;
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.tagName === 'path') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extClosepath;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,131 +1,182 @@
|
|||
var svgEditorExtension_eyedropper = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-eyedropper.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2010 Jeff Schiller
|
||||
* @copyright 2010 Jeff Schiller
|
||||
*
|
||||
*/
|
||||
|
||||
var extEyedropper = {
|
||||
name: 'eyedropper',
|
||||
init: function init(S) {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var ChangeElementCommand = S.ChangeElementCommand,
|
||||
svgCanvas = svgEditor.canvas,
|
||||
addToHistory = function addToHistory(cmd) {
|
||||
svgCanvas.undoMgr.addCommandToHistory(cmd);
|
||||
},
|
||||
currentStyle = {
|
||||
fillPaint: 'red', fillOpacity: 1.0,
|
||||
strokePaint: 'black', strokeOpacity: 1.0,
|
||||
strokeWidth: 5, strokeDashArray: null,
|
||||
opacity: 1.0,
|
||||
strokeLinecap: 'butt',
|
||||
strokeLinejoin: 'miter'
|
||||
};
|
||||
init: function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(S) {
|
||||
var strings, svgEditor, $, ChangeElementCommand, svgCanvas, addToHistory, currentStyle, getStyle, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
getStyle = function getStyle(opts) {
|
||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode === 'eyedropper') {
|
||||
return;
|
||||
}
|
||||
|
||||
function getStyle(opts) {
|
||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode === 'eyedropper') {
|
||||
return;
|
||||
}
|
||||
var tool = $('#tool_eyedropper');
|
||||
// enable-eye-dropper if one element is selected
|
||||
var elem = null;
|
||||
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
|
||||
elem = opts.elems[0];
|
||||
tool.removeClass('disabled');
|
||||
// grab the current style
|
||||
currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
|
||||
currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
|
||||
currentStyle.strokePaint = elem.getAttribute('stroke');
|
||||
currentStyle.strokeOpacity = elem.getAttribute('stroke-opacity') || 1.0;
|
||||
currentStyle.strokeWidth = elem.getAttribute('stroke-width');
|
||||
currentStyle.strokeDashArray = elem.getAttribute('stroke-dasharray');
|
||||
currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap');
|
||||
currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin');
|
||||
currentStyle.opacity = elem.getAttribute('opacity') || 1.0;
|
||||
// disable eye-dropper tool
|
||||
} else {
|
||||
tool.addClass('disabled');
|
||||
}
|
||||
};
|
||||
|
||||
var tool = $('#tool_eyedropper');
|
||||
// enable-eye-dropper if one element is selected
|
||||
var elem = null;
|
||||
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
|
||||
elem = opts.elems[0];
|
||||
tool.removeClass('disabled');
|
||||
// grab the current style
|
||||
currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
|
||||
currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
|
||||
currentStyle.strokePaint = elem.getAttribute('stroke');
|
||||
currentStyle.strokeOpacity = elem.getAttribute('stroke-opacity') || 1.0;
|
||||
currentStyle.strokeWidth = elem.getAttribute('stroke-width');
|
||||
currentStyle.strokeDashArray = elem.getAttribute('stroke-dasharray');
|
||||
currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap');
|
||||
currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin');
|
||||
currentStyle.opacity = elem.getAttribute('opacity') || 1.0;
|
||||
// disable eye-dropper tool
|
||||
} else {
|
||||
tool.addClass('disabled');
|
||||
}
|
||||
_context.next = 3;
|
||||
return S.importLocale();
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
ChangeElementCommand = S.ChangeElementCommand, svgCanvas = svgEditor.canvas, addToHistory = function addToHistory(cmd) {
|
||||
svgCanvas.undoMgr.addCommandToHistory(cmd);
|
||||
}, currentStyle = {
|
||||
fillPaint: 'red', fillOpacity: 1.0,
|
||||
strokePaint: 'black', strokeOpacity: 1.0,
|
||||
strokeWidth: 5, strokeDashArray: null,
|
||||
opacity: 1.0,
|
||||
strokeLinecap: 'butt',
|
||||
strokeLinejoin: 'miter'
|
||||
};
|
||||
buttons = [{
|
||||
id: 'tool_eyedropper',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('eyedropper');
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
|
||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||
selectedChanged: getStyle,
|
||||
elementChanged: getStyle,
|
||||
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode === 'eyedropper') {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
|
||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||
var changes = {};
|
||||
|
||||
var change = function change(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) {
|
||||
change(target, 'fill', currentStyle.fillPaint);
|
||||
}
|
||||
if (currentStyle.fillOpacity) {
|
||||
change(target, 'fill-opacity', currentStyle.fillOpacity);
|
||||
}
|
||||
if (currentStyle.strokePaint) {
|
||||
change(target, 'stroke', currentStyle.strokePaint);
|
||||
}
|
||||
if (currentStyle.strokeOpacity) {
|
||||
change(target, 'stroke-opacity', currentStyle.strokeOpacity);
|
||||
}
|
||||
if (currentStyle.strokeWidth) {
|
||||
change(target, 'stroke-width', currentStyle.strokeWidth);
|
||||
}
|
||||
if (currentStyle.strokeDashArray) {
|
||||
change(target, 'stroke-dasharray', currentStyle.strokeDashArray);
|
||||
}
|
||||
if (currentStyle.opacity) {
|
||||
change(target, 'opacity', currentStyle.opacity);
|
||||
}
|
||||
if (currentStyle.strokeLinecap) {
|
||||
change(target, 'stroke-linecap', currentStyle.strokeLinecap);
|
||||
}
|
||||
if (currentStyle.strokeLinejoin) {
|
||||
change(target, 'stroke-linejoin', currentStyle.strokeLinejoin);
|
||||
}
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 9:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'eyedropper',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
|
||||
buttons: [{
|
||||
id: 'tool_eyedropper',
|
||||
type: 'mode',
|
||||
title: 'Eye Dropper Tool',
|
||||
key: 'I',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('eyedropper');
|
||||
}
|
||||
}
|
||||
}],
|
||||
|
||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||
selectedChanged: getStyle,
|
||||
elementChanged: getStyle,
|
||||
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode === 'eyedropper') {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
|
||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||
var changes = {};
|
||||
|
||||
var change = function change(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) {
|
||||
change(target, 'fill', currentStyle.fillPaint);
|
||||
}
|
||||
if (currentStyle.fillOpacity) {
|
||||
change(target, 'fill-opacity', currentStyle.fillOpacity);
|
||||
}
|
||||
if (currentStyle.strokePaint) {
|
||||
change(target, 'stroke', currentStyle.strokePaint);
|
||||
}
|
||||
if (currentStyle.strokeOpacity) {
|
||||
change(target, 'stroke-opacity', currentStyle.strokeOpacity);
|
||||
}
|
||||
if (currentStyle.strokeWidth) {
|
||||
change(target, 'stroke-width', currentStyle.strokeWidth);
|
||||
}
|
||||
if (currentStyle.strokeDashArray) {
|
||||
change(target, 'stroke-dasharray', currentStyle.strokeDashArray);
|
||||
}
|
||||
if (currentStyle.opacity) {
|
||||
change(target, 'opacity', currentStyle.opacity);
|
||||
}
|
||||
if (currentStyle.strokeLinecap) {
|
||||
change(target, 'stroke-linecap', currentStyle.strokeLinecap);
|
||||
}
|
||||
if (currentStyle.strokeLinejoin) {
|
||||
change(target, 'stroke-linejoin', currentStyle.strokeLinejoin);
|
||||
}
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extEyedropper;
|
||||
|
|
|
|||
|
|
@ -1,271 +1,314 @@
|
|||
var svgEditorExtension_foreignobject = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-foreignobject.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* Copyright(c) 2010 Jacques Distler
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* @copyright 2010 Jacques Distler, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
var extForeignobject = {
|
||||
name: 'foreignObject',
|
||||
init: function init(S) {
|
||||
var svgEditor = this;
|
||||
var text2xml = S.text2xml,
|
||||
NS = S.NS;
|
||||
name: 'foreignobject',
|
||||
init: function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(S) {
|
||||
var svgEditor, text2xml, NS, importLocale, $, svgCanvas, svgdoc, strings, properlySourceSizeTextArea, showPanel, toggleSourceButtons, selElems, started, newFO, editingforeign, setForeignString, showForeignEditor, setAttr, buttons, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
setAttr = function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
S.call('changed', selElems);
|
||||
};
|
||||
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
var
|
||||
// {svgcontent} = S,
|
||||
// addElem = S.addSvgElementFromJson,
|
||||
svgdoc = S.svgroot.parentNode.ownerDocument;
|
||||
showForeignEditor = function showForeignEditor() {
|
||||
var elt = selElems[0];
|
||||
if (!elt || editingforeign) {
|
||||
return;
|
||||
}
|
||||
editingforeign = true;
|
||||
toggleSourceButtons(true);
|
||||
elt.removeAttribute('fill');
|
||||
|
||||
var properlySourceSizeTextArea = function properlySourceSizeTextArea() {
|
||||
// TODO: remove magic numbers here and get values from CSS
|
||||
var height = $('#svg_source_container').height() - 80;
|
||||
$('#svg_source_textarea').css('height', height);
|
||||
};
|
||||
var str = S.svgToString(elt, 0);
|
||||
$('#svg_source_textarea').val(str);
|
||||
$('#svg_source_editor').fadeIn();
|
||||
properlySourceSizeTextArea();
|
||||
$('#svg_source_textarea').focus();
|
||||
};
|
||||
|
||||
function showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#foreignObject_panel').toggle(on);
|
||||
}
|
||||
|
||||
function toggleSourceButtons(on) {
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#foreign_save, #foreign_cancel').toggle(on);
|
||||
}
|
||||
|
||||
var selElems = void 0,
|
||||
started = void 0,
|
||||
newFO = void 0,
|
||||
editingforeign = false;
|
||||
|
||||
/**
|
||||
* This function sets the content of element elt to the input XML.
|
||||
* @param {String} xmlString - The XML text.
|
||||
* @param elt - the parent element to append to
|
||||
* @returns {Boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
function setForeignString(xmlString) {
|
||||
var elt = selElems[0];
|
||||
try {
|
||||
// convert string into XML document
|
||||
var newDoc = text2xml('<svg xmlns="' + NS.SVG + '" xmlns:xlink="' + NS.XLINK + '">' + xmlString + '</svg>');
|
||||
// run it through our sanitizer to remove anything we do not support
|
||||
S.sanitizeSvg(newDoc.documentElement);
|
||||
elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
|
||||
S.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function showForeignEditor() {
|
||||
var elt = selElems[0];
|
||||
if (!elt || editingforeign) {
|
||||
return;
|
||||
}
|
||||
editingforeign = true;
|
||||
toggleSourceButtons(true);
|
||||
elt.removeAttribute('fill');
|
||||
|
||||
var str = S.svgToString(elt, 0);
|
||||
$('#svg_source_textarea').val(str);
|
||||
$('#svg_source_editor').fadeIn();
|
||||
properlySourceSizeTextArea();
|
||||
$('#svg_source_textarea').focus();
|
||||
}
|
||||
|
||||
function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
S.call('changed', selElems);
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'foreignObject',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
|
||||
buttons: [{
|
||||
id: 'tool_foreign',
|
||||
type: 'mode',
|
||||
title: 'Foreign Object Tool',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('foreign');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
id: 'edit_foreign',
|
||||
type: 'context',
|
||||
panel: 'foreignObject_panel',
|
||||
title: 'Edit ForeignObject Content',
|
||||
events: {
|
||||
click: function click() {
|
||||
showForeignEditor();
|
||||
}
|
||||
}
|
||||
}],
|
||||
|
||||
context_tools: [{
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
title: "Change foreignObject's width",
|
||||
id: 'foreign_width',
|
||||
label: 'w',
|
||||
size: 3,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('width', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
title: "Change foreignObject's height",
|
||||
id: 'foreign_height',
|
||||
label: 'h',
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('height', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
title: "Change foreignObject's font size",
|
||||
id: 'foreign_font_size',
|
||||
label: 'font-size',
|
||||
size: 2,
|
||||
defval: 16,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('font-size', this.value);
|
||||
}
|
||||
}
|
||||
}],
|
||||
callback: function callback() {
|
||||
$('#foreignObject_panel').hide();
|
||||
|
||||
var endChanges = function endChanges() {
|
||||
$('#svg_source_editor').hide();
|
||||
editingforeign = false;
|
||||
$('#svg_source_textarea').blur();
|
||||
toggleSourceButtons(false);
|
||||
};
|
||||
|
||||
// TODO: Needs to be done after orig icon loads
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
/* const save = */$('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||
if (!editingforeign) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!setForeignString($('#svg_source_textarea').val())) {
|
||||
$.confirm('Errors found. Revert to original?', function (ok) {
|
||||
if (!ok) {
|
||||
setForeignString = function setForeignString(xmlString) {
|
||||
var elt = selElems[0];
|
||||
try {
|
||||
// convert string into XML document
|
||||
var newDoc = text2xml('<svg xmlns="' + NS.SVG + '" xmlns:xlink="' + NS.XLINK + '">' + xmlString + '</svg>');
|
||||
// run it through our sanitizer to remove anything we do not support
|
||||
S.sanitizeSvg(newDoc.documentElement);
|
||||
elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
|
||||
S.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return false;
|
||||
}
|
||||
endChanges();
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
toggleSourceButtons = function toggleSourceButtons(on) {
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#foreign_save, #foreign_cancel').toggle(on);
|
||||
};
|
||||
|
||||
showPanel = function showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#foreignObject_panel').toggle(on);
|
||||
};
|
||||
|
||||
svgEditor = this;
|
||||
text2xml = S.text2xml, NS = S.NS, importLocale = S.importLocale;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
svgdoc = S.svgroot.parentNode.ownerDocument;
|
||||
_context.next = 12;
|
||||
return importLocale();
|
||||
|
||||
case 12:
|
||||
strings = _context.sent;
|
||||
|
||||
properlySourceSizeTextArea = function properlySourceSizeTextArea() {
|
||||
// TODO: remove magic numbers here and get values from CSS
|
||||
var height = $('#svg_source_container').height() - 80;
|
||||
$('#svg_source_textarea').css('height', height);
|
||||
};
|
||||
|
||||
selElems = void 0, started = void 0, newFO = void 0, editingforeign = false;
|
||||
|
||||
/**
|
||||
* This function sets the content of element elt to the input XML.
|
||||
* @param {string} xmlString - The XML text
|
||||
* @param {Element} elt - the parent element to append to
|
||||
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_foreign',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('foreign');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
id: 'edit_foreign',
|
||||
type: 'context',
|
||||
panel: 'foreignObject_panel',
|
||||
events: {
|
||||
click: function click() {
|
||||
showForeignEditor();
|
||||
}
|
||||
}
|
||||
}];
|
||||
contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_width',
|
||||
size: 3,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('width', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_height',
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('height', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_font_size',
|
||||
size: 2,
|
||||
defval: 16,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('font-size', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#foreignObject_panel').hide();
|
||||
|
||||
var endChanges = function endChanges() {
|
||||
$('#svg_source_editor').hide();
|
||||
editingforeign = false;
|
||||
$('#svg_source_textarea').blur();
|
||||
toggleSourceButtons(false);
|
||||
};
|
||||
|
||||
// TODO: Needs to be done after orig icon loads
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
/* const save = */$('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||
if (!editingforeign) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!setForeignString($('#svg_source_textarea').val())) {
|
||||
$.confirm('Errors found. Revert to original?', function (ok) {
|
||||
if (!ok) {
|
||||
return false;
|
||||
}
|
||||
endChanges();
|
||||
});
|
||||
} else {
|
||||
endChanges();
|
||||
}
|
||||
// setSelectMode();
|
||||
});
|
||||
|
||||
/* const cancel = */$('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
endChanges();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
// const e = opts.event;
|
||||
|
||||
if (svgCanvas.getMode() === 'foreign') {
|
||||
started = true;
|
||||
newFO = S.addSVGElementFromJson({
|
||||
element: 'foreignObject',
|
||||
attr: {
|
||||
x: opts.start_x,
|
||||
y: opts.start_y,
|
||||
id: S.getNextId(),
|
||||
'font-size': 16, // cur_text.font_size,
|
||||
width: '48',
|
||||
height: '20',
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
});
|
||||
var m = svgdoc.createElementNS(NS.MATH, 'math');
|
||||
m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
|
||||
m.setAttribute('display', 'inline');
|
||||
var mi = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi.setAttribute('mathvariant', 'normal');
|
||||
mi.textContent = '\u03A6';
|
||||
var mo = svgdoc.createElementNS(NS.MATH, 'mo');
|
||||
mo.textContent = '\u222A';
|
||||
var mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi2.textContent = '\u2133';
|
||||
m.append(mi, mo, mi2);
|
||||
newFO.append(m);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
// const e = opts.event;
|
||||
if (svgCanvas.getMode() === 'foreign' && started) {
|
||||
var attrs = $(newFO).attr(['width', 'height']);
|
||||
var keep = attrs.width !== '0' || attrs.height !== '0';
|
||||
svgCanvas.addToSelection([newFO], true);
|
||||
|
||||
return {
|
||||
keep: keep,
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.tagName === 'foreignObject') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#foreign_font_size').val(elem.getAttribute('font-size'));
|
||||
$('#foreign_width').val(elem.getAttribute('width'));
|
||||
$('#foreign_height').val(elem.getAttribute('height'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
endChanges();
|
||||
}
|
||||
// setSelectMode();
|
||||
});
|
||||
|
||||
/* const cancel = */$('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
endChanges();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
// const e = opts.event;
|
||||
|
||||
if (svgCanvas.getMode() === 'foreign') {
|
||||
started = true;
|
||||
newFO = S.addSvgElementFromJson({
|
||||
element: 'foreignObject',
|
||||
attr: {
|
||||
x: opts.start_x,
|
||||
y: opts.start_y,
|
||||
id: S.getNextId(),
|
||||
'font-size': 16, // cur_text.font_size,
|
||||
width: '48',
|
||||
height: '20',
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
});
|
||||
var m = svgdoc.createElementNS(NS.MATH, 'math');
|
||||
m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
|
||||
m.setAttribute('display', 'inline');
|
||||
var mi = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi.setAttribute('mathvariant', 'normal');
|
||||
mi.textContent = '\u03A6';
|
||||
var mo = svgdoc.createElementNS(NS.MATH, 'mo');
|
||||
mo.textContent = '\u222A';
|
||||
var mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi2.textContent = '\u2133';
|
||||
m.append(mi, mo, mi2);
|
||||
newFO.append(m);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
// const e = opts.event;
|
||||
if (svgCanvas.getMode() === 'foreign' && started) {
|
||||
var attrs = $(newFO).attr(['width', 'height']);
|
||||
var keep = attrs.width !== '0' || attrs.height !== '0';
|
||||
svgCanvas.addToSelection([newFO], true);
|
||||
|
||||
return {
|
||||
keep: keep,
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.tagName === 'foreignObject') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#foreign_font_size').val(elem.getAttribute('font-size'));
|
||||
$('#foreign_width').val(elem.getAttribute('width'));
|
||||
$('#foreign_height').val(elem.getAttribute('height'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
case 18:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
};
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extForeignobject;
|
||||
|
|
|
|||
|
|
@ -1,172 +1,227 @@
|
|||
var svgEditorExtension_grid = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-grid.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* Copyright(c) 2010 Redou Mine
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* @copyright 2010 Redou Mine, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
var extGrid = {
|
||||
name: 'view_grid',
|
||||
init: function init(_ref) {
|
||||
var NS = _ref.NS,
|
||||
getTypeMap = _ref.getTypeMap;
|
||||
name: 'grid',
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var NS = _ref.NS,
|
||||
getTypeMap = _ref.getTypeMap,
|
||||
importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, $, svgCanvas, svgdoc, assignAttributes, hcanvas, canvBG, units, intervals, showGrid, canvasGrid, gridPattern, gridimg, gridBox, updateGrid, gridUpdate, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
gridUpdate = function gridUpdate() {
|
||||
if (showGrid) {
|
||||
updateGrid(svgCanvas.getZoom());
|
||||
}
|
||||
$('#canvasGrid').toggle(showGrid);
|
||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||
};
|
||||
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
var svgdoc = document.getElementById('svgcanvas').ownerDocument,
|
||||
assignAttributes = svgCanvas.assignAttributes,
|
||||
hcanvas = document.createElement('canvas'),
|
||||
canvBG = $('#canvasBackground'),
|
||||
units = getTypeMap(),
|
||||
intervals = [0.01, 0.1, 1, 10, 100, 1000];
|
||||
updateGrid = function updateGrid(zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
var uMulti = unit * zoom;
|
||||
// Calculate the main number interval
|
||||
var rawM = 100 / uMulti;
|
||||
var multi = 1;
|
||||
for (var i = 0; i < intervals.length; i++) {
|
||||
var num = intervals[i];
|
||||
multi = num;
|
||||
if (rawM <= num) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
var bigInt = multi * uMulti;
|
||||
|
||||
var showGrid = svgEditor.curConfig.showGrid || false;
|
||||
// Set the canvas size to the width of the container
|
||||
hcanvas.width = bigInt;
|
||||
hcanvas.height = bigInt;
|
||||
var ctx = hcanvas.getContext('2d');
|
||||
var curD = 0.5;
|
||||
var part = bigInt / 10;
|
||||
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.strokeStyle = svgEditor.curConfig.gridColor;
|
||||
for (var _i = 1; _i < 10; _i++) {
|
||||
var subD = Math.round(part * _i) + 0.5;
|
||||
// const lineNum = (i % 2)?12:10;
|
||||
var lineNum = 0;
|
||||
ctx.moveTo(subD, bigInt);
|
||||
ctx.lineTo(subD, lineNum);
|
||||
ctx.moveTo(bigInt, subD);
|
||||
ctx.lineTo(lineNum, subD);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.moveTo(curD, bigInt);
|
||||
ctx.lineTo(curD, 0);
|
||||
|
||||
var canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
||||
assignAttributes(canvasGrid, {
|
||||
id: 'canvasGrid',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
overflow: 'visible',
|
||||
display: 'none'
|
||||
});
|
||||
canvBG.append(canvasGrid);
|
||||
ctx.moveTo(bigInt, curD);
|
||||
ctx.lineTo(0, curD);
|
||||
ctx.stroke();
|
||||
|
||||
// grid-pattern
|
||||
var gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
|
||||
assignAttributes(gridPattern, {
|
||||
id: 'gridpattern',
|
||||
patternUnits: 'userSpaceOnUse',
|
||||
x: 0, // -(value.strokeWidth / 2), // position for strokewidth
|
||||
y: 0, // -(value.strokeWidth / 2), // position for strokewidth
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
var datauri = hcanvas.toDataURL('image/png');
|
||||
gridimg.setAttribute('width', bigInt);
|
||||
gridimg.setAttribute('height', bigInt);
|
||||
gridimg.parentNode.setAttribute('width', bigInt);
|
||||
gridimg.parentNode.setAttribute('height', bigInt);
|
||||
svgCanvas.setHref(gridimg, datauri);
|
||||
};
|
||||
|
||||
var gridimg = svgdoc.createElementNS(NS.SVG, 'image');
|
||||
assignAttributes(gridimg, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
gridPattern.append(gridimg);
|
||||
$('#svgroot defs').append(gridPattern);
|
||||
_context.next = 4;
|
||||
return importLocale();
|
||||
|
||||
// grid-box
|
||||
var gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
|
||||
assignAttributes(gridBox, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
'stroke-width': 0,
|
||||
stroke: 'none',
|
||||
fill: 'url(#gridpattern)',
|
||||
style: 'pointer-events: none; display:visible;'
|
||||
});
|
||||
$('#canvasGrid').append(gridBox);
|
||||
case 4:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
svgdoc = document.getElementById('svgcanvas').ownerDocument, assignAttributes = svgCanvas.assignAttributes, hcanvas = document.createElement('canvas'), canvBG = $('#canvasBackground'), units = getTypeMap(), intervals = [0.01, 0.1, 1, 10, 100, 1000];
|
||||
showGrid = svgEditor.curConfig.showGrid || false;
|
||||
|
||||
function updateGrid(zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
var uMulti = unit * zoom;
|
||||
// Calculate the main number interval
|
||||
var rawM = 100 / uMulti;
|
||||
var multi = 1;
|
||||
for (var i = 0; i < intervals.length; i++) {
|
||||
var num = intervals[i];
|
||||
multi = num;
|
||||
if (rawM <= num) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
var bigInt = multi * uMulti;
|
||||
|
||||
// Set the canvas size to the width of the container
|
||||
hcanvas.width = bigInt;
|
||||
hcanvas.height = bigInt;
|
||||
var ctx = hcanvas.getContext('2d');
|
||||
var curD = 0.5;
|
||||
var part = bigInt / 10;
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.strokeStyle = svgEditor.curConfig.gridColor;
|
||||
for (var _i = 1; _i < 10; _i++) {
|
||||
var subD = Math.round(part * _i) + 0.5;
|
||||
// const lineNum = (i % 2)?12:10;
|
||||
var lineNum = 0;
|
||||
ctx.moveTo(subD, bigInt);
|
||||
ctx.lineTo(subD, lineNum);
|
||||
ctx.moveTo(bigInt, subD);
|
||||
ctx.lineTo(lineNum, subD);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.moveTo(curD, bigInt);
|
||||
ctx.lineTo(curD, 0);
|
||||
canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
||||
|
||||
ctx.moveTo(bigInt, curD);
|
||||
ctx.lineTo(0, curD);
|
||||
ctx.stroke();
|
||||
assignAttributes(canvasGrid, {
|
||||
id: 'canvasGrid',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
overflow: 'visible',
|
||||
display: 'none'
|
||||
});
|
||||
canvBG.append(canvasGrid);
|
||||
|
||||
var datauri = hcanvas.toDataURL('image/png');
|
||||
gridimg.setAttribute('width', bigInt);
|
||||
gridimg.setAttribute('height', bigInt);
|
||||
gridimg.parentNode.setAttribute('width', bigInt);
|
||||
gridimg.parentNode.setAttribute('height', bigInt);
|
||||
svgCanvas.setHref(gridimg, datauri);
|
||||
}
|
||||
// grid-pattern
|
||||
gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
|
||||
|
||||
function gridUpdate() {
|
||||
if (showGrid) {
|
||||
updateGrid(svgCanvas.getZoom());
|
||||
}
|
||||
$('#canvasGrid').toggle(showGrid);
|
||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||
}
|
||||
return {
|
||||
name: 'view_grid',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
|
||||
assignAttributes(gridPattern, {
|
||||
id: 'gridpattern',
|
||||
patternUnits: 'userSpaceOnUse',
|
||||
x: 0, // -(value.strokeWidth / 2), // position for strokewidth
|
||||
y: 0, // -(value.strokeWidth / 2), // position for strokewidth
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
|
||||
zoomChanged: function zoomChanged(zoom) {
|
||||
if (showGrid) {
|
||||
updateGrid(zoom);
|
||||
}
|
||||
},
|
||||
callback: function callback() {
|
||||
if (showGrid) {
|
||||
gridUpdate();
|
||||
}
|
||||
},
|
||||
gridimg = svgdoc.createElementNS(NS.SVG, 'image');
|
||||
|
||||
buttons: [{
|
||||
id: 'view_grid',
|
||||
type: 'context',
|
||||
panel: 'editor_panel',
|
||||
title: 'Show/Hide Grid',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
||||
gridUpdate();
|
||||
assignAttributes(gridimg, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
gridPattern.append(gridimg);
|
||||
$('#svgroot defs').append(gridPattern);
|
||||
|
||||
// grid-box
|
||||
gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
|
||||
|
||||
assignAttributes(gridBox, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
'stroke-width': 0,
|
||||
stroke: 'none',
|
||||
fill: 'url(#gridpattern)',
|
||||
style: 'pointer-events: none; display:visible;'
|
||||
});
|
||||
$('#canvasGrid').append(gridBox);
|
||||
|
||||
buttons = [{
|
||||
id: 'view_grid',
|
||||
type: 'context',
|
||||
panel: 'editor_panel',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
||||
gridUpdate();
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
|
||||
|
||||
zoomChanged: function zoomChanged(zoom) {
|
||||
if (showGrid) {
|
||||
updateGrid(zoom);
|
||||
}
|
||||
},
|
||||
callback: function callback() {
|
||||
if (showGrid) {
|
||||
gridUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
});
|
||||
|
||||
case 25:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extGrid;
|
||||
|
|
|
|||
|
|
@ -1,87 +1,188 @@
|
|||
var svgEditorExtension_helloworld = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
var slicedToArray = function () {
|
||||
function sliceIterator(arr, i) {
|
||||
var _arr = [];
|
||||
var _n = true;
|
||||
var _d = false;
|
||||
var _e = undefined;
|
||||
|
||||
try {
|
||||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
||||
_arr.push(_s.value);
|
||||
|
||||
if (i && _arr.length === i) break;
|
||||
}
|
||||
} catch (err) {
|
||||
_d = true;
|
||||
_e = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_n && _i["return"]) _i["return"]();
|
||||
} finally {
|
||||
if (_d) throw _e;
|
||||
}
|
||||
}
|
||||
|
||||
return _arr;
|
||||
}
|
||||
|
||||
return function (arr, i) {
|
||||
if (Array.isArray(arr)) {
|
||||
return arr;
|
||||
} else if (Symbol.iterator in Object(arr)) {
|
||||
return sliceIterator(arr, i);
|
||||
} else {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-helloworld.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
This is a very basic SVG-Edit extension. It adds a "Hello World" button in
|
||||
the left panel. Clicking on the button, and then the canvas will show the
|
||||
user the point on the canvas that was clicked on.
|
||||
/**
|
||||
* This is a very basic SVG-Edit extension. It adds a "Hello World" button in
|
||||
* the left ("mode") panel. Clicking on the button, and then the canvas
|
||||
* will show the user the point on the canvas that was clicked on.
|
||||
*/
|
||||
|
||||
var extHelloworld = {
|
||||
name: 'Hello World',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
return {
|
||||
name: 'Hello World',
|
||||
// For more notes on how to make an icon file, see the source of
|
||||
// the helloworld-icon.xml
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',
|
||||
name: 'helloworld',
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, $, svgCanvas;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_context.next = 2;
|
||||
return importLocale();
|
||||
|
||||
// Multiple buttons can be added in this array
|
||||
buttons: [{
|
||||
// Must match the icon ID in helloworld-icon.xml
|
||||
id: 'hello_world',
|
||||
case 2:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
// For more notes on how to make an icon file, see the source of
|
||||
// the helloworld-icon.xml
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',
|
||||
|
||||
// This indicates that the button will be added to the "mode"
|
||||
// button panel on the left side
|
||||
type: 'mode',
|
||||
// Multiple buttons can be added in this array
|
||||
buttons: [{
|
||||
// Must match the icon ID in helloworld-icon.xml
|
||||
id: 'hello_world',
|
||||
|
||||
// Tooltip text
|
||||
title: "Say 'Hello World'",
|
||||
// This indicates that the button will be added to the "mode"
|
||||
// button panel on the left side
|
||||
type: 'mode',
|
||||
|
||||
// Events
|
||||
events: {
|
||||
click: function click() {
|
||||
// The action taken when the button is clicked on.
|
||||
// For "mode" buttons, any other button will
|
||||
// automatically be de-pressed.
|
||||
svgCanvas.setMode('hello_world');
|
||||
// Tooltip text
|
||||
title: strings.buttons[0].title,
|
||||
|
||||
// Events
|
||||
events: {
|
||||
click: function click() {
|
||||
// The action taken when the button is clicked on.
|
||||
// For "mode" buttons, any other button will
|
||||
// automatically be de-pressed.
|
||||
svgCanvas.setMode('hello_world');
|
||||
}
|
||||
}
|
||||
}],
|
||||
// This is triggered when the main mouse button is pressed down
|
||||
// on the editor canvas (not the tool panels)
|
||||
mouseDown: function mouseDown() {
|
||||
// Check the mode on mousedown
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
// The returned object must include "started" with
|
||||
// a value of true in order for mouseUp to be triggered
|
||||
return { started: true };
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// This is triggered from anywhere, but "started" must have been set
|
||||
// to true (see above). Note that "opts" is an object with event info
|
||||
mouseUp: function mouseUp(opts) {
|
||||
// Check the mode on mouseup
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
var zoom = svgCanvas.getZoom();
|
||||
|
||||
// Get the actual coordinate by dividing by the zoom value
|
||||
var x = opts.mouse_x / zoom;
|
||||
var y = opts.mouse_y / zoom;
|
||||
|
||||
// We do our own formatting
|
||||
var text = strings.text;
|
||||
|
||||
[['x', x], ['y', y]].forEach(function (_ref3) {
|
||||
var _ref4 = slicedToArray(_ref3, 2),
|
||||
prop = _ref4[0],
|
||||
val = _ref4[1];
|
||||
|
||||
text = text.replace('{' + prop + '}', val);
|
||||
});
|
||||
|
||||
// Show the text using the custom alert function
|
||||
$.alert(text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 7:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}],
|
||||
// This is triggered when the main mouse button is pressed down
|
||||
// on the editor canvas (not the tool panels)
|
||||
mouseDown: function mouseDown() {
|
||||
// Check the mode on mousedown
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
// The returned object must include "started" with
|
||||
// a value of true in order for mouseUp to be triggered
|
||||
return { started: true };
|
||||
}
|
||||
},
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
// This is triggered from anywhere, but "started" must have been set
|
||||
// to true (see above). Note that "opts" is an object with event info
|
||||
mouseUp: function mouseUp(opts) {
|
||||
// Check the mode on mouseup
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
var zoom = svgCanvas.getZoom();
|
||||
|
||||
// Get the actual coordinate by dividing by the zoom value
|
||||
var x = opts.mouse_x / zoom;
|
||||
var y = opts.mouse_y / zoom;
|
||||
|
||||
var text = 'Hello World!\n\nYou clicked here: ' + x + ', ' + y;
|
||||
|
||||
// Show the text using the custom alert function
|
||||
$.alert(text);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extHelloworld;
|
||||
|
|
|
|||
|
|
@ -30,600 +30,397 @@ var svgEditorExtension_imagelib = (function () {
|
|||
};
|
||||
};
|
||||
|
||||
var _extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// MIT License
|
||||
// From: https://github.com/uupaa/dynamic-import-polyfill/blob/master/importModule.js
|
||||
|
||||
function toAbsoluteURL(url) {
|
||||
var a = document.createElement('a');
|
||||
a.setAttribute('href', url); // <a href="hoge.html">
|
||||
return a.cloneNode(false).href; // -> "http://example.com/hoge.html"
|
||||
}
|
||||
|
||||
function addScriptAtts(script, atts) {
|
||||
['id', 'class', 'type'].forEach(function (prop) {
|
||||
if (prop in atts) {
|
||||
script[prop] = atts[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Additions by Brett
|
||||
var importSetGlobalDefault = function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url, config) {
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
return _context.abrupt('return', importSetGlobal(url, _extends({}, config, { returnDefault: true })));
|
||||
|
||||
case 1:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
return function importSetGlobalDefault(_x, _x2) {
|
||||
return _ref.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
var importSetGlobal = function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url, _ref2) {
|
||||
var global = _ref2.global,
|
||||
returnDefault = _ref2.returnDefault;
|
||||
var modularVersion;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
// Todo: Replace calls to this function with `import()` when supported
|
||||
modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
||||
|
||||
if (!modularVersion) {
|
||||
_context2.next = 3;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context2.abrupt('return', importModule(url, undefined, { returnDefault: returnDefault }));
|
||||
|
||||
case 3:
|
||||
_context2.next = 5;
|
||||
return importScript(url);
|
||||
|
||||
case 5:
|
||||
return _context2.abrupt('return', window[global]);
|
||||
|
||||
case 6:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this);
|
||||
}));
|
||||
|
||||
return function importSetGlobal(_x3, _x4) {
|
||||
return _ref3.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
// Addition by Brett
|
||||
function importScript(url) {
|
||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
if (Array.isArray(url)) {
|
||||
return Promise.all(url.map(function (u) {
|
||||
return importScript(u, atts);
|
||||
}));
|
||||
}
|
||||
return new Promise(function (resolve, reject) {
|
||||
var script = document.createElement('script');
|
||||
var destructor = function destructor() {
|
||||
script.onerror = null;
|
||||
script.onload = null;
|
||||
script.remove();
|
||||
script.src = '';
|
||||
};
|
||||
script.defer = 'defer';
|
||||
addScriptAtts(script, atts);
|
||||
script.onerror = function () {
|
||||
reject(new Error('Failed to import: ' + url));
|
||||
destructor();
|
||||
};
|
||||
script.onload = function () {
|
||||
resolve();
|
||||
destructor();
|
||||
};
|
||||
script.src = url;
|
||||
|
||||
document.head.append(script);
|
||||
});
|
||||
}
|
||||
|
||||
function importModule(url) {
|
||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
||||
_ref4$returnDefault = _ref4.returnDefault,
|
||||
returnDefault = _ref4$returnDefault === undefined ? false : _ref4$returnDefault;
|
||||
|
||||
if (Array.isArray(url)) {
|
||||
return Promise.all(url.map(function (u) {
|
||||
return importModule(u, atts);
|
||||
}));
|
||||
}
|
||||
return new Promise(function (resolve, reject) {
|
||||
var vector = '$importModule$' + Math.random().toString(32).slice(2);
|
||||
var script = document.createElement('script');
|
||||
var destructor = function destructor() {
|
||||
delete window[vector];
|
||||
script.onerror = null;
|
||||
script.onload = null;
|
||||
script.remove();
|
||||
URL.revokeObjectURL(script.src);
|
||||
script.src = '';
|
||||
};
|
||||
addScriptAtts(script, atts);
|
||||
script.defer = 'defer';
|
||||
script.type = 'module';
|
||||
script.onerror = function () {
|
||||
reject(new Error('Failed to import: ' + url));
|
||||
destructor();
|
||||
};
|
||||
script.onload = function () {
|
||||
resolve(window[vector]);
|
||||
destructor();
|
||||
};
|
||||
var absURL = toAbsoluteURL(url);
|
||||
var loader = 'import * as m from \'' + absURL.replace(/'/g, "\\'") + '\'; window.' + vector + ' = ' + (returnDefault ? 'm.default || ' : '') + 'm;'; // export Module
|
||||
var blob = new Blob([loader], { type: 'text/javascript' });
|
||||
script.src = URL.createObjectURL(blob);
|
||||
|
||||
document.head.append(script);
|
||||
});
|
||||
}
|
||||
|
||||
/* globals jQuery */
|
||||
|
||||
/**
|
||||
* ext-imagelib.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
var extImagelib = {
|
||||
name: 'imagelib',
|
||||
init: function init(_ref) {
|
||||
var decode64 = _ref.decode64;
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var decode64 = _ref.decode64,
|
||||
importLocale = _ref.importLocale;
|
||||
var imagelibStrings, svgEditor, $, uiStrings, svgCanvas, closeBrowser, importImage, pending, mode, multiArr, transferStopped, preview, submit, toggleMulti, showBrowser, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
showBrowser = function showBrowser() {
|
||||
var browser = $('#imgbrowse');
|
||||
if (!browser.length) {
|
||||
$('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>' + '</div></div>').insertAfter('#svg_docprops');
|
||||
browser = $('#imgbrowse');
|
||||
|
||||
var svgEditor = this;
|
||||
var imagelibStrings = void 0;
|
||||
var allLibs = imagelibStrings.select_lib;
|
||||
|
||||
var $ = jQuery;
|
||||
var uiStrings = svgEditor.uiStrings,
|
||||
svgCanvas = svgEditor.canvas;
|
||||
var libOpts = $('<ul id=imglib_opts>').appendTo(browser);
|
||||
var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
|
||||
|
||||
var header = $('<h1>').prependTo(browser).text(allLibs).css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%'
|
||||
});
|
||||
|
||||
var cancel = $('<button>' + uiStrings.common.cancel + '</button>').appendTo(browser).on('click touchend', function () {
|
||||
$('#imgbrowse_holder').hide();
|
||||
}).css({
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
right: -10
|
||||
});
|
||||
|
||||
var leftBlock = $('<span>').css({ position: 'absolute', top: 5, left: 10 }).appendTo(browser);
|
||||
|
||||
var back = $('<button hidden>' + imagelibStrings.show_list + '</button>').appendTo(leftBlock).on('click touchend', function () {
|
||||
frame.attr('src', 'about:blank').hide();
|
||||
libOpts.show();
|
||||
header.text(allLibs);
|
||||
back.hide();
|
||||
}).css({
|
||||
'margin-right': 5
|
||||
}).hide();
|
||||
|
||||
/* const type = */$('<select><option value=s>' + imagelibStrings.import_single + '</option><option value=m>' + imagelibStrings.import_multi + '</option><option value=o>' + imagelibStrings.open + '</option></select>').appendTo(leftBlock).change(function () {
|
||||
mode = $(this).val();
|
||||
switch (mode) {
|
||||
case 's':
|
||||
case 'o':
|
||||
toggleMulti(false);
|
||||
break;
|
||||
|
||||
case 'm':
|
||||
// Import multiple
|
||||
toggleMulti(true);
|
||||
break;
|
||||
}
|
||||
}).css({
|
||||
'margin-top': 10
|
||||
});
|
||||
|
||||
cancel.prepend($.getSvgIcon('cancel', true));
|
||||
back.prepend($.getSvgIcon('tool_imagelib', true));
|
||||
|
||||
var modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
||||
$.each(imagelibStrings.imgLibs, function (i, _ref3) {
|
||||
var name = _ref3.name,
|
||||
url = _ref3.url,
|
||||
description = _ref3.description;
|
||||
|
||||
$('<li>').appendTo(libOpts).text(name).on('click touchend', function () {
|
||||
frame.attr('src',
|
||||
// Todo: Adopt some standard formatting library like `fluent.js` instead
|
||||
url.replace('{path}', svgEditor.curConfig.extIconsPath).replace('{modularVersion}', modularVersion ? imagelibStrings.moduleEnding || '-es' : '')).show();
|
||||
header.text(name);
|
||||
libOpts.hide();
|
||||
back.show();
|
||||
}).append('<span>' + description + '</span>');
|
||||
});
|
||||
} else {
|
||||
$('#imgbrowse_holder').show();
|
||||
}
|
||||
};
|
||||
|
||||
toggleMulti = function toggleMulti(show) {
|
||||
$('#lib_framewrap, #imglib_opts').css({ right: show ? 200 : 10 });
|
||||
if (!preview) {
|
||||
preview = $('<div id=imglib_preview>').css({
|
||||
position: 'absolute',
|
||||
top: 45,
|
||||
right: 10,
|
||||
width: 180,
|
||||
bottom: 45,
|
||||
background: '#fff',
|
||||
overflow: 'auto'
|
||||
}).insertAfter('#lib_framewrap');
|
||||
|
||||
submit = $('<button disabled>Import selected</button>').appendTo('#imgbrowse').on('click touchend', function () {
|
||||
$.each(multiArr, function (i) {
|
||||
var type = this[0];
|
||||
var data = this[1];
|
||||
if (type === 'svg') {
|
||||
svgCanvas.importSvgString(data);
|
||||
} else {
|
||||
importImage(data);
|
||||
}
|
||||
svgCanvas.moveSelectedElements(i * 20, i * 20, false);
|
||||
});
|
||||
preview.empty();
|
||||
multiArr = [];
|
||||
$('#imgbrowse_holder').hide();
|
||||
}).css({
|
||||
position: 'absolute',
|
||||
bottom: 10,
|
||||
right: -10
|
||||
});
|
||||
}
|
||||
|
||||
preview.toggle(show);
|
||||
submit.toggle(show);
|
||||
};
|
||||
|
||||
importImage = function importImage(url) {
|
||||
var newImage = svgCanvas.addSVGElementFromJson({
|
||||
element: 'image',
|
||||
attr: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
id: svgCanvas.getNextId(),
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
});
|
||||
svgCanvas.clearSelection();
|
||||
svgCanvas.addToSelection([newImage]);
|
||||
svgCanvas.setImageURL(url);
|
||||
};
|
||||
|
||||
closeBrowser = function closeBrowser() {
|
||||
$('#imgbrowse_holder').hide();
|
||||
};
|
||||
|
||||
_context.next = 6;
|
||||
return importLocale();
|
||||
|
||||
case 6:
|
||||
imagelibStrings = _context.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
uiStrings = svgEditor.uiStrings, svgCanvas = svgEditor.canvas;
|
||||
pending = {};
|
||||
mode = 's';
|
||||
multiArr = [];
|
||||
transferStopped = false;
|
||||
preview = void 0, submit = void 0;
|
||||
|
||||
|
||||
function closeBrowser() {
|
||||
$('#imgbrowse_holder').hide();
|
||||
}
|
||||
window.addEventListener('message', function (evt) {
|
||||
// Receive `postMessage` data
|
||||
var response = evt.data;
|
||||
|
||||
function importImage(url) {
|
||||
var newImage = svgCanvas.addSvgElementFromJson({
|
||||
element: 'image',
|
||||
attr: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
id: svgCanvas.getNextId(),
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
});
|
||||
svgCanvas.clearSelection();
|
||||
svgCanvas.addToSelection([newImage]);
|
||||
svgCanvas.setImageURL(url);
|
||||
}
|
||||
if (!response || typeof response !== 'string') {
|
||||
// Do nothing
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// Todo: This block can be removed (and the above check changed to
|
||||
// insist on an object) if embedAPI moves away from a string to
|
||||
// an object (if IE9 support not needed)
|
||||
response = JSON.parse(response);
|
||||
if (response.namespace !== 'imagelib') {
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
var pending = {};
|
||||
var hasName = 'name' in response;
|
||||
var hasHref = 'href' in response;
|
||||
|
||||
var mode = 's';
|
||||
var multiArr = [];
|
||||
var transferStopped = false;
|
||||
var preview = void 0,
|
||||
submit = void 0;
|
||||
if (!hasName && transferStopped) {
|
||||
transferStopped = false;
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('message', function (evt) {
|
||||
// Receive `postMessage` data
|
||||
var response = evt.data;
|
||||
|
||||
if (!response || typeof response !== 'string') {
|
||||
// Do nothing
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// Todo: This block can be removed (and the above check changed to
|
||||
// insist on an object) if embedAPI moves away from a string to
|
||||
// an object (if IE9 support not needed)
|
||||
response = JSON.parse(response);
|
||||
if (response.namespace !== 'imagelib') {
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasName = 'name' in response;
|
||||
var hasHref = 'href' in response;
|
||||
|
||||
if (!hasName && transferStopped) {
|
||||
transferStopped = false;
|
||||
return;
|
||||
}
|
||||
|
||||
var id = void 0;
|
||||
if (hasHref) {
|
||||
id = response.href;
|
||||
response = response.data;
|
||||
}
|
||||
|
||||
// Hide possible transfer dialog box
|
||||
$('#dialog_box').hide();
|
||||
var entry = void 0,
|
||||
curMeta = void 0,
|
||||
svgStr = void 0,
|
||||
imgStr = void 0;
|
||||
var type = hasName ? 'meta' : response.charAt(0);
|
||||
switch (type) {
|
||||
case 'meta':
|
||||
{
|
||||
// Metadata
|
||||
transferStopped = false;
|
||||
curMeta = response;
|
||||
|
||||
pending[curMeta.id] = curMeta;
|
||||
|
||||
var name = curMeta.name || 'file';
|
||||
|
||||
var message = uiStrings.notification.retrieving.replace('%s', name);
|
||||
|
||||
if (mode !== 'm') {
|
||||
$.process_cancel(message, function () {
|
||||
transferStopped = true;
|
||||
// Should a message be sent back to the frame?
|
||||
var id = void 0;
|
||||
if (hasHref) {
|
||||
id = response.href;
|
||||
response = response.data;
|
||||
}
|
||||
|
||||
// Hide possible transfer dialog box
|
||||
$('#dialog_box').hide();
|
||||
});
|
||||
} else {
|
||||
entry = $('<div>' + message + '</div>').data('id', curMeta.id);
|
||||
preview.append(entry);
|
||||
curMeta.entry = entry;
|
||||
}
|
||||
var entry = void 0,
|
||||
curMeta = void 0,
|
||||
svgStr = void 0,
|
||||
imgStr = void 0;
|
||||
var type = hasName ? 'meta' : response.charAt(0);
|
||||
switch (type) {
|
||||
case 'meta':
|
||||
{
|
||||
// Metadata
|
||||
transferStopped = false;
|
||||
curMeta = response;
|
||||
|
||||
return;
|
||||
}
|
||||
case '<':
|
||||
svgStr = true;
|
||||
break;
|
||||
case 'd':
|
||||
{
|
||||
if (response.startsWith('data:image/svg+xml')) {
|
||||
var pre = 'data:image/svg+xml;base64,';
|
||||
var src = response.substring(pre.length);
|
||||
response = decode64(src);
|
||||
svgStr = true;
|
||||
break;
|
||||
} else if (response.startsWith('data:image/')) {
|
||||
imgStr = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Else fall through
|
||||
default:
|
||||
// TODO: See if there's a way to base64 encode the binary data stream
|
||||
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
|
||||
pending[curMeta.id] = curMeta;
|
||||
|
||||
// Assume it's raw image data
|
||||
// importImage(str);
|
||||
var name = curMeta.name || 'file';
|
||||
|
||||
// Don't give warning as postMessage may have been used by something else
|
||||
if (mode !== 'm') {
|
||||
closeBrowser();
|
||||
} else {
|
||||
pending[id].entry.remove();
|
||||
}
|
||||
// $.alert('Unexpected data was returned: ' + response, function() {
|
||||
// if (mode !== 'm') {
|
||||
// closeBrowser();
|
||||
// } else {
|
||||
// pending[id].entry.remove();
|
||||
// }
|
||||
// });
|
||||
return;
|
||||
}
|
||||
var message = uiStrings.notification.retrieving.replace('%s', name);
|
||||
|
||||
switch (mode) {
|
||||
case 's':
|
||||
// Import one
|
||||
if (svgStr) {
|
||||
svgCanvas.importSvgString(response);
|
||||
} else if (imgStr) {
|
||||
importImage(response);
|
||||
}
|
||||
closeBrowser();
|
||||
break;
|
||||
case 'm':
|
||||
// Import multiple
|
||||
multiArr.push([svgStr ? 'svg' : 'img', response]);
|
||||
curMeta = pending[id];
|
||||
var title = void 0;
|
||||
if (svgStr) {
|
||||
if (curMeta && curMeta.name) {
|
||||
title = curMeta.name;
|
||||
} else {
|
||||
// Try to find a title
|
||||
var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement;
|
||||
title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
|
||||
}
|
||||
if (curMeta) {
|
||||
preview.children().each(function () {
|
||||
if ($(this).data('id') === id) {
|
||||
if (curMeta.preview_url) {
|
||||
$(this).html('<img src="' + curMeta.preview_url + '">' + title);
|
||||
} else {
|
||||
$(this).text(title);
|
||||
}
|
||||
submit.removeAttr('disabled');
|
||||
if (mode !== 'm') {
|
||||
$.process_cancel(message, function () {
|
||||
transferStopped = true;
|
||||
// Should a message be sent back to the frame?
|
||||
|
||||
$('#dialog_box').hide();
|
||||
});
|
||||
} else {
|
||||
entry = $('<div>' + message + '</div>').data('id', curMeta.id);
|
||||
preview.append(entry);
|
||||
curMeta.entry = entry;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
case '<':
|
||||
svgStr = true;
|
||||
break;
|
||||
case 'd':
|
||||
{
|
||||
if (response.startsWith('data:image/svg+xml')) {
|
||||
var pre = 'data:image/svg+xml;base64,';
|
||||
var src = response.substring(pre.length);
|
||||
response = decode64(src);
|
||||
svgStr = true;
|
||||
break;
|
||||
} else if (response.startsWith('data:image/')) {
|
||||
imgStr = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Else fall through
|
||||
default:
|
||||
// TODO: See if there's a way to base64 encode the binary data stream
|
||||
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
|
||||
|
||||
// Assume it's raw image data
|
||||
// importImage(str);
|
||||
|
||||
// Don't give warning as postMessage may have been used by something else
|
||||
if (mode !== 'm') {
|
||||
closeBrowser();
|
||||
} else {
|
||||
pending[id].entry.remove();
|
||||
}
|
||||
// $.alert('Unexpected data was returned: ' + response, function() {
|
||||
// if (mode !== 'm') {
|
||||
// closeBrowser();
|
||||
// } else {
|
||||
// pending[id].entry.remove();
|
||||
// }
|
||||
// });
|
||||
return;
|
||||
}
|
||||
|
||||
switch (mode) {
|
||||
case 's':
|
||||
// Import one
|
||||
if (svgStr) {
|
||||
svgCanvas.importSvgString(response);
|
||||
} else if (imgStr) {
|
||||
importImage(response);
|
||||
}
|
||||
closeBrowser();
|
||||
break;
|
||||
case 'm':
|
||||
// Import multiple
|
||||
multiArr.push([svgStr ? 'svg' : 'img', response]);
|
||||
curMeta = pending[id];
|
||||
var title = void 0;
|
||||
if (svgStr) {
|
||||
if (curMeta && curMeta.name) {
|
||||
title = curMeta.name;
|
||||
} else {
|
||||
// Try to find a title
|
||||
var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement;
|
||||
title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
|
||||
}
|
||||
if (curMeta) {
|
||||
preview.children().each(function () {
|
||||
if ($(this).data('id') === id) {
|
||||
if (curMeta.preview_url) {
|
||||
$(this).html('<img src="' + curMeta.preview_url + '">' + title);
|
||||
} else {
|
||||
$(this).text(title);
|
||||
}
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
preview.append('<div>' + title + '</div>');
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
} else {
|
||||
if (curMeta && curMeta.preview_url) {
|
||||
title = curMeta.name || '';
|
||||
}
|
||||
if (curMeta && curMeta.preview_url) {
|
||||
entry = '<img src="' + curMeta.preview_url + '">' + title;
|
||||
} else {
|
||||
entry = '<img src="' + response + '">';
|
||||
}
|
||||
|
||||
if (curMeta) {
|
||||
preview.children().each(function () {
|
||||
if ($(this).data('id') === id) {
|
||||
$(this).html(entry);
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
preview.append($('<div>').append(entry));
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'o':
|
||||
// Open
|
||||
if (!svgStr) {
|
||||
break;
|
||||
}
|
||||
svgEditor.openPrep(function (ok) {
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
svgCanvas.clear();
|
||||
svgCanvas.setSvgString(response);
|
||||
// updateCanvas();
|
||||
});
|
||||
closeBrowser();
|
||||
break;
|
||||
}
|
||||
}, true);
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_imagelib',
|
||||
type: 'app_menu', // _flyout
|
||||
position: 4,
|
||||
events: {
|
||||
mouseup: showBrowser
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-imagelib.xml',
|
||||
buttons: imagelibStrings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('<style>').text('#imgbrowse_holder {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'width: 100%;' + 'height: 100%;' + 'background-color: rgba(0, 0, 0, .5);' + 'z-index: 5;' + '}' + '#imgbrowse {' + 'position: absolute;' + 'top: 25px;' + 'left: 25px;' + 'right: 25px;' + 'bottom: 25px;' + 'min-width: 300px;' + 'min-height: 200px;' + 'background: #B0B0B0;' + 'border: 1px outset #777;' + '}' + '#imgbrowse h1 {' + 'font-size: 20px;' + 'margin: .4em;' + 'text-align: center;' + '}' + '#lib_framewrap,' + '#imgbrowse > ul {' + 'position: absolute;' + 'top: 45px;' + 'left: 10px;' + 'right: 10px;' + 'bottom: 10px;' + 'background: white;' + 'margin: 0;' + 'padding: 0;' + '}' + '#imgbrowse > ul {' + 'overflow: auto;' + '}' + '#imgbrowse > div {' + 'border: 1px solid #666;' + '}' + '#imglib_preview > div {' + 'padding: 5px;' + 'font-size: 12px;' + '}' + '#imglib_preview img {' + 'display: block;' + 'margin: 0 auto;' + 'max-height: 100px;' + '}' + '#imgbrowse li {' + 'list-style: none;' + 'padding: .5em;' + 'background: #E8E8E8;' + 'border-bottom: 1px solid #B0B0B0;' + 'line-height: 1.2em;' + 'font-style: sans-serif;' + '}' + '#imgbrowse li > span {' + 'color: #666;' + 'font-size: 15px;' + 'display: block;' + '}' + '#imgbrowse li:hover {' + 'background: #FFC;' + 'cursor: pointer;' + '}' + '#imgbrowse iframe {' + 'width: 100%;' + 'height: 100%;' + 'border: 0;' + '}').appendTo('head');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
preview.append('<div>' + title + '</div>');
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
} else {
|
||||
if (curMeta && curMeta.preview_url) {
|
||||
title = curMeta.name || '';
|
||||
}
|
||||
if (curMeta && curMeta.preview_url) {
|
||||
entry = '<img src="' + curMeta.preview_url + '">' + title;
|
||||
} else {
|
||||
entry = '<img src="' + response + '">';
|
||||
}
|
||||
|
||||
if (curMeta) {
|
||||
preview.children().each(function () {
|
||||
if ($(this).data('id') === id) {
|
||||
$(this).html(entry);
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
preview.append($('<div>').append(entry));
|
||||
submit.removeAttr('disabled');
|
||||
}
|
||||
case 18:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
break;
|
||||
case 'o':
|
||||
// Open
|
||||
if (!svgStr) {
|
||||
break;
|
||||
}
|
||||
svgEditor.openPrep(function (ok) {
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
svgCanvas.clear();
|
||||
svgCanvas.setSvgString(response);
|
||||
// updateCanvas();
|
||||
});
|
||||
closeBrowser();
|
||||
break;
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function toggleMulti(show) {
|
||||
$('#lib_framewrap, #imglib_opts').css({ right: show ? 200 : 10 });
|
||||
if (!preview) {
|
||||
preview = $('<div id=imglib_preview>').css({
|
||||
position: 'absolute',
|
||||
top: 45,
|
||||
right: 10,
|
||||
width: 180,
|
||||
bottom: 45,
|
||||
background: '#fff',
|
||||
overflow: 'auto'
|
||||
}).insertAfter('#lib_framewrap');
|
||||
|
||||
submit = $('<button disabled>Import selected</button>').appendTo('#imgbrowse').on('click touchend', function () {
|
||||
$.each(multiArr, function (i) {
|
||||
var type = this[0];
|
||||
var data = this[1];
|
||||
if (type === 'svg') {
|
||||
svgCanvas.importSvgString(data);
|
||||
} else {
|
||||
importImage(data);
|
||||
}
|
||||
svgCanvas.moveSelectedElements(i * 20, i * 20, false);
|
||||
});
|
||||
preview.empty();
|
||||
multiArr = [];
|
||||
$('#imgbrowse_holder').hide();
|
||||
}).css({
|
||||
position: 'absolute',
|
||||
bottom: 10,
|
||||
right: -10
|
||||
});
|
||||
}
|
||||
|
||||
preview.toggle(show);
|
||||
submit.toggle(show);
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
function showBrowser() {
|
||||
var browser = $('#imgbrowse');
|
||||
if (!browser.length) {
|
||||
$('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>' + '</div></div>').insertAfter('#svg_docprops');
|
||||
browser = $('#imgbrowse');
|
||||
|
||||
var allLibs = imagelibStrings.select_lib;
|
||||
|
||||
var libOpts = $('<ul id=imglib_opts>').appendTo(browser);
|
||||
var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
|
||||
|
||||
var header = $('<h1>').prependTo(browser).text(allLibs).css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%'
|
||||
});
|
||||
|
||||
var cancel = $('<button>' + uiStrings.common.cancel + '</button>').appendTo(browser).on('click touchend', function () {
|
||||
$('#imgbrowse_holder').hide();
|
||||
}).css({
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
right: -10
|
||||
});
|
||||
|
||||
var leftBlock = $('<span>').css({ position: 'absolute', top: 5, left: 10 }).appendTo(browser);
|
||||
|
||||
var back = $('<button hidden>' + imagelibStrings.show_list + '</button>').appendTo(leftBlock).on('click touchend', function () {
|
||||
frame.attr('src', 'about:blank').hide();
|
||||
libOpts.show();
|
||||
header.text(allLibs);
|
||||
back.hide();
|
||||
}).css({
|
||||
'margin-right': 5
|
||||
}).hide();
|
||||
|
||||
/* const type = */$('<select><option value=s>' + imagelibStrings.import_single + '</option><option value=m>' + imagelibStrings.import_multi + '</option><option value=o>' + imagelibStrings.open + '</option></select>').appendTo(leftBlock).change(function () {
|
||||
mode = $(this).val();
|
||||
switch (mode) {
|
||||
case 's':
|
||||
case 'o':
|
||||
toggleMulti(false);
|
||||
break;
|
||||
|
||||
case 'm':
|
||||
// Import multiple
|
||||
toggleMulti(true);
|
||||
break;
|
||||
}
|
||||
}).css({
|
||||
'margin-top': 10
|
||||
});
|
||||
|
||||
cancel.prepend($.getSvgIcon('cancel', true));
|
||||
back.prepend($.getSvgIcon('tool_imagelib', true));
|
||||
|
||||
var modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
||||
$.each(imagelibStrings.imgLibs, function (i, _ref2) {
|
||||
var name = _ref2.name,
|
||||
url = _ref2.url,
|
||||
description = _ref2.description;
|
||||
|
||||
$('<li>').appendTo(libOpts).text(name).on('click touchend', function () {
|
||||
frame.attr('src', url({
|
||||
path: svgEditor.curConfig.extIconsPath,
|
||||
modularVersion: modularVersion
|
||||
})).show();
|
||||
header.text(name);
|
||||
libOpts.hide();
|
||||
back.show();
|
||||
}).append('<span>' + description + '</span>');
|
||||
});
|
||||
} else {
|
||||
$('#imgbrowse_holder').show();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-imagelib.xml',
|
||||
buttons: [{
|
||||
id: 'tool_imagelib',
|
||||
type: 'app_menu', // _flyout
|
||||
position: 4,
|
||||
title: 'Image library',
|
||||
events: {
|
||||
mouseup: showBrowser
|
||||
}
|
||||
}],
|
||||
langReady: function () {
|
||||
var _ref4 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref3) {
|
||||
var tryImport = function () {
|
||||
var _ref5 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(lang) {
|
||||
var url;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
url = svgEditor.curConfig.extPath + 'ext-locale/imagelib/' + lang + '.js';
|
||||
_context.next = 3;
|
||||
return importSetGlobalDefault(url, {
|
||||
global: 'svgEditorExtensionLocale_imagelib_' + lang
|
||||
});
|
||||
|
||||
case 3:
|
||||
imagelibStrings = _context.sent;
|
||||
|
||||
case 4:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
return function tryImport(_x2) {
|
||||
return _ref5.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
|
||||
var lang = _ref3.lang;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
_context2.prev = 0;
|
||||
_context2.next = 3;
|
||||
return tryImport(lang);
|
||||
|
||||
case 3:
|
||||
_context2.next = 9;
|
||||
break;
|
||||
|
||||
case 5:
|
||||
_context2.prev = 5;
|
||||
_context2.t0 = _context2['catch'](0);
|
||||
_context2.next = 9;
|
||||
return tryImport('en');
|
||||
|
||||
case 9:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this, [[0, 5]]);
|
||||
}));
|
||||
|
||||
function langReady(_x) {
|
||||
return _ref4.apply(this, arguments);
|
||||
}
|
||||
|
||||
return langReady;
|
||||
}(),
|
||||
callback: function callback() {
|
||||
$('<style>').text('#imgbrowse_holder {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'width: 100%;' + 'height: 100%;' + 'background-color: rgba(0, 0, 0, .5);' + 'z-index: 5;' + '}' + '#imgbrowse {' + 'position: absolute;' + 'top: 25px;' + 'left: 25px;' + 'right: 25px;' + 'bottom: 25px;' + 'min-width: 300px;' + 'min-height: 200px;' + 'background: #B0B0B0;' + 'border: 1px outset #777;' + '}' + '#imgbrowse h1 {' + 'font-size: 20px;' + 'margin: .4em;' + 'text-align: center;' + '}' + '#lib_framewrap,' + '#imgbrowse > ul {' + 'position: absolute;' + 'top: 45px;' + 'left: 10px;' + 'right: 10px;' + 'bottom: 10px;' + 'background: white;' + 'margin: 0;' + 'padding: 0;' + '}' + '#imgbrowse > ul {' + 'overflow: auto;' + '}' + '#imgbrowse > div {' + 'border: 1px solid #666;' + '}' + '#imglib_preview > div {' + 'padding: 5px;' + 'font-size: 12px;' + '}' + '#imglib_preview img {' + 'display: block;' + 'margin: 0 auto;' + 'max-height: 100px;' + '}' + '#imgbrowse li {' + 'list-style: none;' + 'padding: .5em;' + 'background: #E8E8E8;' + 'border-bottom: 1px solid #B0B0B0;' + 'line-height: 1.2em;' + 'font-style: sans-serif;' + '}' + '#imgbrowse li > span {' + 'color: #666;' + 'font-size: 15px;' + 'display: block;' + '}' + '#imgbrowse li:hover {' + 'background: #FFC;' + 'cursor: pointer;' + '}' + '#imgbrowse iframe {' + 'width: 100%;' + 'height: 100%;' + 'border: 0;' + '}').appendTo('head');
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extImagelib;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
var svgEditorExtensionLocale_arrows_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Arrows',
|
||||
langList: [{ id: 'arrow_none', textContent: 'No arrow' }],
|
||||
contextTools: [{
|
||||
title: 'Select arrow type',
|
||||
options: {
|
||||
none: 'No arrow',
|
||||
end: '---->',
|
||||
start: '<----',
|
||||
both: '<--->',
|
||||
mid: '-->--',
|
||||
mid_bk: '--<--'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
var svgEditorExtensionLocale_arrows_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
name: 'Arrows',
|
||||
langList: [{ id: 'arrow_none', textContent: 'Sans flèche' }],
|
||||
contextTools: [{
|
||||
title: 'Select arrow type',
|
||||
options: {
|
||||
none: 'No arrow',
|
||||
end: '---->',
|
||||
start: '<----',
|
||||
both: '<--->',
|
||||
mid: '-->--',
|
||||
mid_bk: '--<--'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
var svgEditorExtensionLocale_closepath_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'ClosePath',
|
||||
buttons: [{
|
||||
title: 'Open path'
|
||||
}, {
|
||||
title: 'Close path'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
var svgEditorExtensionLocale_connector_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Connector',
|
||||
langList: [{ id: 'mode_connect', title: 'Connect two objects' }],
|
||||
buttons: [{
|
||||
title: 'Connect two objects'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
var svgEditorExtensionLocale_connector_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
name: 'Connector',
|
||||
langList: [{ id: 'mode_connect', title: 'Connecter deux objets' }],
|
||||
buttons: [{
|
||||
title: 'Connect two objects'
|
||||
}]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
var svgEditorExtensionLocale_eyedropper_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'eyedropper',
|
||||
buttons: [{
|
||||
title: 'Eye Dropper Tool',
|
||||
key: 'I'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
var svgEditorExtensionLocale_foreignobject_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'foreignObject',
|
||||
buttons: [{
|
||||
title: 'Foreign Object Tool'
|
||||
}, {
|
||||
title: 'Edit ForeignObject Content'
|
||||
}],
|
||||
contextTools: [{
|
||||
title: "Change foreignObject's width",
|
||||
label: 'w'
|
||||
}, {
|
||||
title: "Change foreignObject's height",
|
||||
label: 'h'
|
||||
}, {
|
||||
title: "Change foreignObject's font size",
|
||||
label: 'font-size'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
var svgEditorExtensionLocale_grid_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'View Grid',
|
||||
buttons: [{
|
||||
title: 'Show/Hide Grid'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
var svgEditorExtensionLocale_helloworld_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Hello World',
|
||||
text: 'Hello World!\n\nYou clicked here: {x}, {y}',
|
||||
buttons: [{
|
||||
title: "Say 'Hello World'"
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -7,15 +7,12 @@ var svgEditorExtensionLocale_imagelib_en = (function () {
|
|||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
title: 'Image library'
|
||||
}],
|
||||
imgLibs: [{
|
||||
name: 'Demo library (local)',
|
||||
url: function url(_ref) {
|
||||
var path = _ref.path,
|
||||
modularVersion = _ref.modularVersion;
|
||||
|
||||
return path + 'imagelib/index' + (modularVersion ? '-es' : '') + '.html';
|
||||
},
|
||||
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
name: 'IAN Symbol Libraries',
|
||||
|
|
|
|||
|
|
@ -7,15 +7,12 @@ var svgEditorExtensionLocale_imagelib_fr = (function () {
|
|||
import_single: 'import_single',
|
||||
import_multi: 'import_multi',
|
||||
open: 'open',
|
||||
buttons: [{
|
||||
title: 'Image library'
|
||||
}],
|
||||
imgLibs: [{
|
||||
name: 'Demo library (local)',
|
||||
url: function url(_ref) {
|
||||
var path = _ref.path,
|
||||
modularVersion = _ref.modularVersion;
|
||||
|
||||
return path + 'imagelib/index' + (modularVersion ? '-es' : '') + '.html';
|
||||
},
|
||||
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
name: 'IAN Symbol Libraries',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
var svgEditorExtensionLocale_markers_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Markers',
|
||||
langList: [{ id: 'nomarker', title: 'No Marker' }, { id: 'leftarrow', title: 'Left Arrow' }, { id: 'rightarrow', title: 'Right Arrow' }, { id: 'textmarker', title: 'Text Marker' }, { id: 'forwardslash', title: 'Forward Slash' }, { id: 'reverseslash', title: 'Reverse Slash' }, { id: 'verticalslash', title: 'Vertical Slash' }, { id: 'box', title: 'Box' }, { id: 'star', title: 'Star' }, { id: 'xmark', title: 'X' }, { id: 'triangle', title: 'Triangle' }, { id: 'mcircle', title: 'Circle' }, { id: 'leftarrow_o', title: 'Open Left Arrow' }, { id: 'rightarrow_o', title: 'Open Right Arrow' }, { id: 'box_o', title: 'Open Box' }, { id: 'star_o', title: 'Open Star' }, { id: 'triangle_o', title: 'Open Triangle' }, { id: 'mcircle_o', title: 'Open Circle' }],
|
||||
contextTools: [{
|
||||
title: 'Start marker',
|
||||
label: 's'
|
||||
}, {
|
||||
title: 'Select start marker type'
|
||||
}, {
|
||||
title: 'Middle marker',
|
||||
label: 'm'
|
||||
}, {
|
||||
title: 'Select mid marker type'
|
||||
}, {
|
||||
title: 'End marker',
|
||||
label: 'e'
|
||||
}, {
|
||||
title: 'Select end marker type'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
var svgEditorExtensionLocale_mathjax_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'MathJax',
|
||||
buttons: [{
|
||||
title: 'Add Mathematics'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
var svgEditorExtensionLocale_panning_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Extension Panning',
|
||||
buttons: [{
|
||||
title: 'Panning'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
var svgEditorExtensionLocale_polygon_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'polygon',
|
||||
buttons: [{
|
||||
title: 'Polygon Tool'
|
||||
}],
|
||||
contextTools: [{
|
||||
title: 'Number of Sides',
|
||||
label: 'sides'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
var svgEditorExtensionLocale_server_moinsave_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
saved: 'Saved! Return to Item View!'
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
var svgEditorExtensionLocale_server_opensave_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
uploading: 'Uploading...'
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
var svgEditorExtensionLocale_shapes_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
loading: 'Loading...',
|
||||
categories: {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
},
|
||||
buttons: [{
|
||||
title: 'Shape library'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
var svgEditorExtensionLocale_shapes_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
loading: 'Loading...',
|
||||
categories: {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
},
|
||||
buttons: [{
|
||||
title: "Bibliothèque d'images"
|
||||
}]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
var svgEditorExtensionLocale_star_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'star',
|
||||
buttons: [{
|
||||
title: 'Star Tool'
|
||||
}],
|
||||
contextTools: [{
|
||||
title: 'Number of Sides',
|
||||
label: 'points'
|
||||
}, {
|
||||
title: 'Pointiness',
|
||||
label: 'Pointiness'
|
||||
}, {
|
||||
title: 'Twists the star',
|
||||
label: 'Radial Shift'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
var svgEditorExtensionLocale_webappfind_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'WebAppFind',
|
||||
buttons: [{
|
||||
title: 'Save Image back to Disk'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -47,6 +47,10 @@ var svgEditorExtension_mathjax = (function () {
|
|||
// MIT License
|
||||
// From: https://github.com/uupaa/dynamic-import-polyfill/blob/master/importModule.js
|
||||
|
||||
/**
|
||||
* @module importModule
|
||||
*/
|
||||
|
||||
function toAbsoluteURL(url) {
|
||||
var a = document.createElement('a');
|
||||
a.setAttribute('href', url); // <a href="hoge.html">
|
||||
|
|
@ -62,6 +66,17 @@ var svgEditorExtension_mathjax = (function () {
|
|||
}
|
||||
|
||||
// Additions by Brett
|
||||
/**
|
||||
* @typedef {PlainObject} module:importModule.ImportConfig
|
||||
* @property {string} global The variable name to set on `window` (when not using the modular version)
|
||||
* @property {boolean} [returnDefault=false]
|
||||
*/
|
||||
/**
|
||||
* @function module:importModule.importSetGlobalDefault
|
||||
* @param {string} url
|
||||
* @param {module:importModule.ImportConfig} config
|
||||
* @returns {*} The return depends on the export of the targeted module.
|
||||
*/
|
||||
var importSetGlobalDefault = function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url, config) {
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
|
|
@ -82,6 +97,12 @@ var svgEditorExtension_mathjax = (function () {
|
|||
return _ref.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
/**
|
||||
* @function module:importModule.importSetGlobal
|
||||
* @param {string} url
|
||||
* @param {module:importModule.ImportConfig} config
|
||||
* @returns {ArbitraryModule|*} The return depends on the export of the targeted module.
|
||||
*/
|
||||
var importSetGlobal = function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url, _ref2) {
|
||||
var global = _ref2.global,
|
||||
|
|
@ -200,204 +221,229 @@ var svgEditorExtension_mathjax = (function () {
|
|||
|
||||
var extMathjax = {
|
||||
name: 'mathjax',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, $, svgCanvas, mathjaxSrcSecure, uiStrings, math, locationX, locationY, mathjaxLoaded, saveMath, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
saveMath = function saveMath() {
|
||||
var code = $('#mathjax_code_textarea').val();
|
||||
// displaystyle to force MathJax NOT to use the inline style. Because it is
|
||||
// less fancy!
|
||||
MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']);
|
||||
|
||||
// Configuration of the MathJax extention.
|
||||
|
||||
// This will be added to the head tag before MathJax is loaded.
|
||||
/* mathjaxConfiguration = `<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
extensions: ['tex2jax.js'],
|
||||
jax: ['input/TeX', 'output/SVG'],
|
||||
showProcessingMessages: true,
|
||||
showMathMenu: false,
|
||||
showMathMenuMSIE: false,
|
||||
errorSettings: {
|
||||
message: ['[Math Processing Error]'],
|
||||
style: {color: '#CC0000', 'font-style': 'italic'}
|
||||
},
|
||||
elements: [],
|
||||
tex2jax: {
|
||||
ignoreClass: 'tex2jax_ignore2', processClass: 'tex2jax_process2',
|
||||
},
|
||||
TeX: {
|
||||
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
|
||||
},
|
||||
SVG: {
|
||||
}
|
||||
});
|
||||
</script>`, */
|
||||
// mathjaxSrc = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
|
||||
// Had been on https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js
|
||||
// Obtained Text-AMS-MML_SVG.js from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/config/TeX-AMS-MML_SVG.js
|
||||
var mathjaxSrcSecure = 'mathjax/MathJax.js?config=TeX-AMS-MML_SVG.js',
|
||||
uiStrings = svgEditor.uiStrings;
|
||||
|
||||
var math = void 0,
|
||||
locationX = void 0,
|
||||
locationY = void 0,
|
||||
mathjaxLoaded = false;
|
||||
|
||||
// TODO: Implement language support. Move these uiStrings to the locale files and the code to the langReady callback.
|
||||
$.extend(uiStrings, {
|
||||
mathjax: {
|
||||
embed_svg: 'Save as mathematics',
|
||||
embed_mathml: 'Save as figure',
|
||||
svg_save_warning: 'The math will be transformed into a figure is manipulatable like everything else. You will not be able to manipulate the TeX-code anymore. ',
|
||||
mathml_save_warning: 'Advised. The math will be saved as a figure.',
|
||||
title: 'Mathematics code editor'
|
||||
}
|
||||
});
|
||||
|
||||
function saveMath() {
|
||||
var code = $('#mathjax_code_textarea').val();
|
||||
// displaystyle to force MathJax NOT to use the inline style. Because it is
|
||||
// less fancy!
|
||||
MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']);
|
||||
|
||||
/*
|
||||
* The MathJax library doesn't want to bloat your webpage so it creates
|
||||
* every symbol (glymph) you need only once. These are saved in a <svg> on
|
||||
* the top of your html document, just under the body tag. Each glymph has
|
||||
* its unique id and is saved as a <path> in the <defs> tag of the <svg>
|
||||
*
|
||||
* Then when the symbols are needed in the rest of your html document they
|
||||
* are refferd to by a <use> tag.
|
||||
* Because of bug 1076 we can't just grab the defs tag on the top and add it
|
||||
* to your formula's <svg> and copy the lot. So we have to replace each
|
||||
* <use> tag by it's <path>.
|
||||
*/
|
||||
MathJax.Hub.queue.Push(function () {
|
||||
var mathjaxMath = $('.MathJax_SVG');
|
||||
var svg = $(mathjaxMath.html());
|
||||
svg.find('use').each(function () {
|
||||
// TODO: find a less pragmatic and more elegant solution to this.
|
||||
var id = $(this).attr('href') ? $(this).attr('href').slice(1) // Works in Chrome.
|
||||
: $(this).attr('xlink:href').slice(1); // Works in Firefox.
|
||||
var glymph = $('#' + id).clone().removeAttr('id');
|
||||
var x = $(this).attr('x');
|
||||
var y = $(this).attr('y');
|
||||
var transform = $(this).attr('transform');
|
||||
if (transform && (x || y)) {
|
||||
glymph.attr('transform', transform + ' translate(' + x + ',' + y + ')');
|
||||
} else if (transform) {
|
||||
glymph.attr('transform', transform);
|
||||
} else if (x || y) {
|
||||
glymph.attr('transform', 'translate(' + x + ',' + y + ')');
|
||||
}
|
||||
$(this).replaceWith(glymph);
|
||||
});
|
||||
// Remove the style tag because it interferes with SVG-Edit.
|
||||
svg.removeAttr('style');
|
||||
svg.attr('xmlns', 'http://www.w3.org/2000/svg');
|
||||
svgCanvas.importSvgString($('<div>').append(svg.clone()).html(), true);
|
||||
svgCanvas.ungroupSelectedElement();
|
||||
// TODO: To undo the adding of the Formula you now have to undo twice.
|
||||
// This should only be once!
|
||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'MathJax',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
|
||||
buttons: [{
|
||||
id: 'tool_mathjax',
|
||||
type: 'mode',
|
||||
title: 'Add Mathematics',
|
||||
events: {
|
||||
click: function click() {
|
||||
// Only load Mathjax when needed, we don't want to strain Svg-Edit any more.
|
||||
// From this point on it is very probable that it will be needed, so load it.
|
||||
if (mathjaxLoaded === false) {
|
||||
$('<div id="mathjax">' + '<!-- Here is where MathJax creates the math -->' + '<div id="mathjax_creator" class="tex2jax_process" style="display:none">' + '$${}$$' + '</div>' + '<div id="mathjax_overlay"></div>' + '<div id="mathjax_container">' + '<div id="tool_mathjax_back" class="toolbar_button">' + '<button id="tool_mathjax_save">OK</button>' + '<button id="tool_mathjax_cancel">Cancel</button>' + '</div>' + '<fieldset>' + '<legend id="mathjax_legend">Mathematics Editor</legend>' + '<label>' + '<span id="mathjax_explication">Please type your mathematics in ' + '<a href="https://en.wikipedia.org/wiki/Help:Displaying_a_formula" target="_blank">TeX</a> code.</span></label>' + '<textarea id="mathjax_code_textarea" spellcheck="false"></textarea>' + '</fieldset>' + '</div>' + '</div>').insertAfter('#svg_prefs').hide();
|
||||
|
||||
// Make the MathEditor draggable.
|
||||
$('#mathjax_container').draggable({
|
||||
cancel: 'button,fieldset',
|
||||
containment: 'window'
|
||||
});
|
||||
|
||||
// Add functionality and picture to cancel button.
|
||||
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true)).on('click touched', function () {
|
||||
$('#mathjax').hide();
|
||||
});
|
||||
|
||||
// Add functionality and picture to the save button.
|
||||
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true)).on('click touched', function () {
|
||||
saveMath();
|
||||
$('#mathjax').hide();
|
||||
});
|
||||
|
||||
// MathJax preprocessing has to ignore most of the page.
|
||||
$('body').addClass('tex2jax_ignore');
|
||||
|
||||
// Now get (and run) the MathJax Library.
|
||||
// Todo: insert script with modules once widely supported
|
||||
// and if MathJax (and its `TeX-AMS-MML_SVG.js` dependency) ends up
|
||||
// providing an ES6 module export: https://github.com/mathjax/MathJax/issues/1998
|
||||
/*
|
||||
const modularVersion = !('svgEditor' in window) ||
|
||||
!window.svgEditor ||
|
||||
window.svgEditor.modules !== false;
|
||||
// Add as second argument to `importScript`
|
||||
{
|
||||
type: modularVersion
|
||||
? 'module' // Make this the default when widely supported
|
||||
: 'text/javascript'
|
||||
}
|
||||
// If only using modules, just use this:
|
||||
const {default: MathJax} = await importModule( // or `import()` when widely supported
|
||||
svgEditor.curConfig.extIconsPath + mathjaxSrcSecure
|
||||
);
|
||||
*/
|
||||
importScript(svgEditor.curConfig.extIconsPath + mathjaxSrcSecure).then(function () {
|
||||
// When MathJax is loaded get the div where the math will be rendered.
|
||||
/*
|
||||
* The MathJax library doesn't want to bloat your webpage so it creates
|
||||
* every symbol (glymph) you need only once. These are saved in a `<svg>` on
|
||||
* the top of your html document, just under the body tag. Each glymph has
|
||||
* its unique id and is saved as a `<path>` in the `<defs>` tag of the `<svg>`
|
||||
*
|
||||
* Then when the symbols are needed in the rest of your html document they
|
||||
* are refferd to by a `<use>` tag.
|
||||
* Because of bug 1076 we can't just grab the defs tag on the top and add it
|
||||
* to your formula's `<svg>` and copy the lot. So we have to replace each
|
||||
* `<use>` tag by its `<path>`.
|
||||
*/
|
||||
MathJax.Hub.queue.Push(function () {
|
||||
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
|
||||
console.log(math);
|
||||
mathjaxLoaded = true;
|
||||
console.log('MathJax Loaded');
|
||||
var mathjaxMath = $('.MathJax_SVG');
|
||||
var svg = $(mathjaxMath.html());
|
||||
svg.find('use').each(function () {
|
||||
// TODO: find a less pragmatic and more elegant solution to this.
|
||||
var id = $(this).attr('href') ? $(this).attr('href').slice(1) // Works in Chrome.
|
||||
: $(this).attr('xlink:href').slice(1); // Works in Firefox.
|
||||
var glymph = $('#' + id).clone().removeAttr('id');
|
||||
var x = $(this).attr('x');
|
||||
var y = $(this).attr('y');
|
||||
var transform = $(this).attr('transform');
|
||||
if (transform && (x || y)) {
|
||||
glymph.attr('transform', transform + ' translate(' + x + ',' + y + ')');
|
||||
} else if (transform) {
|
||||
glymph.attr('transform', transform);
|
||||
} else if (x || y) {
|
||||
glymph.attr('transform', 'translate(' + x + ',' + y + ')');
|
||||
}
|
||||
$(this).replaceWith(glymph);
|
||||
});
|
||||
// Remove the style tag because it interferes with SVG-Edit.
|
||||
svg.removeAttr('style');
|
||||
svg.attr('xmlns', 'http://www.w3.org/2000/svg');
|
||||
svgCanvas.importSvgString($('<div>').append(svg.clone()).html(), true);
|
||||
svgCanvas.ungroupSelectedElement();
|
||||
// TODO: To undo the adding of the Formula you now have to undo twice.
|
||||
// This should only be once!
|
||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||
});
|
||||
}).catch(function () {
|
||||
console.log('Failed loadeing MathJax.');
|
||||
$.alert('Failed loading MathJax. You will not be able to change the mathematics.');
|
||||
};
|
||||
|
||||
_context.next = 3;
|
||||
return importLocale();
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
|
||||
// Configuration of the MathJax extention.
|
||||
|
||||
// This will be added to the head tag before MathJax is loaded.
|
||||
|
||||
/* mathjaxConfiguration = `<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
extensions: ['tex2jax.js'],
|
||||
jax: ['input/TeX', 'output/SVG'],
|
||||
showProcessingMessages: true,
|
||||
showMathMenu: false,
|
||||
showMathMenuMSIE: false,
|
||||
errorSettings: {
|
||||
message: ['[Math Processing Error]'],
|
||||
style: {color: '#CC0000', 'font-style': 'italic'}
|
||||
},
|
||||
elements: [],
|
||||
tex2jax: {
|
||||
ignoreClass: 'tex2jax_ignore2', processClass: 'tex2jax_process2',
|
||||
},
|
||||
TeX: {
|
||||
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
|
||||
},
|
||||
SVG: {
|
||||
}
|
||||
});
|
||||
}
|
||||
// Set the mode.
|
||||
svgCanvas.setMode('mathjax');
|
||||
</script>`, */
|
||||
// mathjaxSrc = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
|
||||
// Had been on https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js
|
||||
// Obtained Text-AMS-MML_SVG.js from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/config/TeX-AMS-MML_SVG.js
|
||||
mathjaxSrcSecure = 'mathjax/MathJax.min.js?config=TeX-AMS-MML_SVG.js', uiStrings = svgEditor.uiStrings;
|
||||
math = void 0, locationX = void 0, locationY = void 0, mathjaxLoaded = false;
|
||||
|
||||
// TODO: Implement language support. Move these uiStrings to the locale files and the code to the langReady callback.
|
||||
|
||||
$.extend(uiStrings, {
|
||||
mathjax: {
|
||||
embed_svg: 'Save as mathematics',
|
||||
embed_mathml: 'Save as figure',
|
||||
svg_save_warning: 'The math will be transformed into a figure is manipulatable like everything else. You will not be able to manipulate the TeX-code anymore. ',
|
||||
mathml_save_warning: 'Advised. The math will be saved as a figure.',
|
||||
title: 'Mathematics code editor'
|
||||
}
|
||||
});
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_mathjax',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
// Only load Mathjax when needed, we don't want to strain Svg-Edit any more.
|
||||
// From this point on it is very probable that it will be needed, so load it.
|
||||
if (mathjaxLoaded === false) {
|
||||
$('<div id="mathjax">' + '<!-- Here is where MathJax creates the math -->' + '<div id="mathjax_creator" class="tex2jax_process" style="display:none">' + '$${}$$' + '</div>' + '<div id="mathjax_overlay"></div>' + '<div id="mathjax_container">' + '<div id="tool_mathjax_back" class="toolbar_button">' + '<button id="tool_mathjax_save">OK</button>' + '<button id="tool_mathjax_cancel">Cancel</button>' + '</div>' + '<fieldset>' + '<legend id="mathjax_legend">Mathematics Editor</legend>' + '<label>' + '<span id="mathjax_explication">Please type your mathematics in ' + '<a href="https://en.wikipedia.org/wiki/Help:Displaying_a_formula" target="_blank">TeX</a> code.</span></label>' + '<textarea id="mathjax_code_textarea" spellcheck="false"></textarea>' + '</fieldset>' + '</div>' + '</div>').insertAfter('#svg_prefs').hide();
|
||||
|
||||
// Make the MathEditor draggable.
|
||||
$('#mathjax_container').draggable({
|
||||
cancel: 'button,fieldset',
|
||||
containment: 'window'
|
||||
});
|
||||
|
||||
// Add functionality and picture to cancel button.
|
||||
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true)).on('click touched', function () {
|
||||
$('#mathjax').hide();
|
||||
});
|
||||
|
||||
// Add functionality and picture to the save button.
|
||||
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true)).on('click touched', function () {
|
||||
saveMath();
|
||||
$('#mathjax').hide();
|
||||
});
|
||||
|
||||
// MathJax preprocessing has to ignore most of the page.
|
||||
$('body').addClass('tex2jax_ignore');
|
||||
|
||||
// Now get (and run) the MathJax Library.
|
||||
// Todo: insert script with modules once widely supported
|
||||
// and if MathJax (and its `TeX-AMS-MML_SVG.js` dependency) ends up
|
||||
// providing an ES6 module export: https://github.com/mathjax/MathJax/issues/1998
|
||||
/*
|
||||
const modularVersion = !('svgEditor' in window) ||
|
||||
!window.svgEditor ||
|
||||
window.svgEditor.modules !== false;
|
||||
// Add as second argument to `importScript`
|
||||
{
|
||||
type: modularVersion
|
||||
? 'module' // Make this the default when widely supported
|
||||
: 'text/javascript'
|
||||
}
|
||||
// If only using modules, just use this:
|
||||
const {default: MathJax} = await importModule( // or `import()` when widely supported
|
||||
svgEditor.curConfig.extIconsPath + mathjaxSrcSecure
|
||||
);
|
||||
*/
|
||||
importScript(svgEditor.curConfig.extIconsPath + mathjaxSrcSecure).then(function () {
|
||||
// When MathJax is loaded get the div where the math will be rendered.
|
||||
MathJax.Hub.queue.Push(function () {
|
||||
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
|
||||
console.log(math);
|
||||
mathjaxLoaded = true;
|
||||
console.log('MathJax Loaded');
|
||||
});
|
||||
}).catch(function () {
|
||||
console.log('Failed loadeing MathJax.');
|
||||
$.alert('Failed loading MathJax. You will not be able to change the mathematics.');
|
||||
});
|
||||
}
|
||||
// Set the mode.
|
||||
svgCanvas.setMode('mathjax');
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
|
||||
mouseDown: function mouseDown() {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
return { started: true };
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
// Get the coordinates from your mouse.
|
||||
var zoom = svgCanvas.getZoom();
|
||||
// Get the actual coordinate by dividing by the zoom value
|
||||
locationX = opts.mouse_x / zoom;
|
||||
locationY = opts.mouse_y / zoom;
|
||||
|
||||
$('#mathjax').show();
|
||||
return { started: false }; // Otherwise the last selected object dissapears.
|
||||
}
|
||||
},
|
||||
callback: function callback() {
|
||||
$('<style>').text('#mathjax fieldset{' + 'padding: 5px;' + 'margin: 5px;' + 'border: 1px solid #DDD;' + '}' + '#mathjax label{' + 'display: block;' + 'margin: .5em;' + '}' + '#mathjax legend {' + 'max-width:195px;' + '}' + '#mathjax_overlay {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'right: 0;' + 'bottom: 0;' + 'background-color: black;' + 'opacity: 0.6;' + 'z-index: 20000;' + '}' + '#mathjax_container {' + 'position: absolute;' + 'top: 50px;' + 'padding: 10px;' + 'background-color: #B0B0B0;' + 'border: 1px outset #777;' + 'opacity: 1.0;' + 'font-family: Verdana, Helvetica, sans-serif;' + 'font-size: .8em;' + 'z-index: 20001;' + '}' + '#tool_mathjax_back {' + 'margin-left: 1em;' + 'overflow: auto;' + '}' + '#mathjax_legend{' + 'font-weight: bold;' + 'font-size:1.1em;' + '}' + '#mathjax_code_textarea {\\n' + 'margin: 5px .7em;' + 'overflow: hidden;' + 'width: 416px;' + 'display: block;' + 'height: 100px;' + '}').appendTo('head');
|
||||
|
||||
// Add the MathJax configuration.
|
||||
// $(mathjaxConfiguration).appendTo('head');
|
||||
}
|
||||
});
|
||||
|
||||
case 12:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}],
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
mouseDown: function mouseDown() {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
return { started: true };
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
// Get the coordinates from your mouse.
|
||||
var zoom = svgCanvas.getZoom();
|
||||
// Get the actual coordinate by dividing by the zoom value
|
||||
locationX = opts.mouse_x / zoom;
|
||||
locationY = opts.mouse_y / zoom;
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
$('#mathjax').show();
|
||||
return { started: false }; // Otherwise the last selected object dissapears.
|
||||
}
|
||||
},
|
||||
callback: function callback() {
|
||||
$('<style>').text('#mathjax fieldset{' + 'padding: 5px;' + 'margin: 5px;' + 'border: 1px solid #DDD;' + '}' + '#mathjax label{' + 'display: block;' + 'margin: .5em;' + '}' + '#mathjax legend {' + 'max-width:195px;' + '}' + '#mathjax_overlay {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'right: 0;' + 'bottom: 0;' + 'background-color: black;' + 'opacity: 0.6;' + 'z-index: 20000;' + '}' + '#mathjax_container {' + 'position: absolute;' + 'top: 50px;' + 'padding: 10px;' + 'background-color: #B0B0B0;' + 'border: 1px outset #777;' + 'opacity: 1.0;' + 'font-family: Verdana, Helvetica, sans-serif;' + 'font-size: .8em;' + 'z-index: 20001;' + '}' + '#tool_mathjax_back {' + 'margin-left: 1em;' + 'overflow: auto;' + '}' + '#mathjax_legend{' + 'font-weight: bold;' + 'font-size:1.1em;' + '}' + '#mathjax_code_textarea {\\n' + 'margin: 5px .7em;' + 'overflow: hidden;' + 'width: 416px;' + 'display: block;' + 'height: 100px;' + '}').appendTo('head');
|
||||
|
||||
// Add the MathJax configuration.
|
||||
// $(mathjaxConfiguration).appendTo('head');
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extMathjax;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ var svgEditorExtension_overview_window = (function () {
|
|||
'use strict';
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-overview_window.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2013 James Sacksteder
|
||||
* @copyright 2013 James Sacksteder
|
||||
*
|
||||
*/
|
||||
var extOverview_window = {
|
||||
|
|
|
|||
|
|
@ -1,54 +1,109 @@
|
|||
var svgEditorExtension_panning = (function () {
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* ext-panning.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2013 Luis Aguirre
|
||||
* @copyright 2013 Luis Aguirre
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
This is a very basic SVG-Edit extension to let tablet/mobile devices pan without problem
|
||||
*/
|
||||
|
||||
var extPanning = {
|
||||
name: 'ext-panning',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
return {
|
||||
name: 'Extension Panning',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
|
||||
buttons: [{
|
||||
id: 'ext-panning',
|
||||
type: 'mode',
|
||||
title: 'Panning',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('ext-panning');
|
||||
name: 'panning',
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, svgCanvas, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_context.next = 2;
|
||||
return importLocale();
|
||||
|
||||
case 2:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
buttons = [{
|
||||
id: 'ext-panning',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('ext-panning');
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
mouseDown: function mouseDown() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(true);
|
||||
return { started: true };
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(false);
|
||||
return {
|
||||
keep: false,
|
||||
element: null
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 7:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}],
|
||||
mouseDown: function mouseDown() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(true);
|
||||
return { started: true };
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(false);
|
||||
return {
|
||||
keep: false,
|
||||
element: null
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extPanning;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var svgEditorExtension_php_savefile = (function () {
|
|||
|
||||
var extPhp_savefile = {
|
||||
name: 'php_savefile',
|
||||
callback: function callback() {
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
|
|
|
|||
|
|
@ -1,277 +1,328 @@
|
|||
var svgEditorExtension_polygon = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-polygon.js
|
||||
*
|
||||
*
|
||||
* Copyright(c) 2010 CloudCanvas, Inc.
|
||||
* All rights reserved
|
||||
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||
*
|
||||
*/
|
||||
var extPolygon = {
|
||||
name: 'polygon',
|
||||
init: function init(S) {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
var selElems = void 0,
|
||||
init: function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(S) {
|
||||
var svgEditor, $, svgCanvas, importLocale, editingitex, strings, selElems, started, newFO, showPanel, setAttr, cot, sec, buttons, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
sec = function sec(n) {
|
||||
return 1 / Math.cos(n);
|
||||
};
|
||||
|
||||
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||
// newFOG, newFOGParent, newDef, newImageName, newMaskID, modeChangeG,
|
||||
// edg = 0,
|
||||
// undoCommand = 'Not image';
|
||||
started = void 0,
|
||||
newFO = void 0;
|
||||
cot = function cot(n) {
|
||||
return 1 / Math.tan(n);
|
||||
};
|
||||
|
||||
// const ccZoom;
|
||||
// const wEl, hEl;
|
||||
// const wOffset, hOffset;
|
||||
// const ccRBG;
|
||||
// const ccOpacity;
|
||||
// const brushW, brushH;
|
||||
setAttr = function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
S.call('changed', selElems);
|
||||
};
|
||||
|
||||
// const ccDebug = document.getElementById('debugpanel');
|
||||
showPanel = function showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#polygon_panel').toggle(on);
|
||||
};
|
||||
|
||||
/* const properlySourceSizeTextArea = function(){
|
||||
// TODO: remove magic numbers here and get values from CSS
|
||||
const height = $('#svg_source_container').height() - 80;
|
||||
$('#svg_source_textarea').css('height', height);
|
||||
}; */
|
||||
function showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#polygon_panel').toggle(on);
|
||||
}
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
importLocale = S.importLocale, editingitex = false;
|
||||
_context.next = 10;
|
||||
return importLocale();
|
||||
|
||||
/*
|
||||
function toggleSourceButtons(on){
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#polygon_save, #polygon_cancel').toggle(on);
|
||||
}
|
||||
*/
|
||||
case 10:
|
||||
strings = _context.sent;
|
||||
selElems = void 0, started = void 0, newFO = void 0;
|
||||
|
||||
function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
S.call('changed', selElems);
|
||||
}
|
||||
// const ccZoom;
|
||||
// const wEl, hEl;
|
||||
// const wOffset, hOffset;
|
||||
// const ccRBG;
|
||||
// const ccOpacity;
|
||||
// const brushW, brushH;
|
||||
|
||||
function cot(n) {
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
// const ccDebug = document.getElementById('debugpanel');
|
||||
|
||||
function sec(n) {
|
||||
return 1 / Math.cos(n);
|
||||
}
|
||||
/* const properlySourceSizeTextArea = function(){
|
||||
// TODO: remove magic numbers here and get values from CSS
|
||||
const height = $('#svg_source_container').height() - 80;
|
||||
$('#svg_source_textarea').css('height', height);
|
||||
}; */
|
||||
|
||||
/**
|
||||
* Obtained from http://code.google.com/p/passenger-top/source/browse/instiki/public/svg-edit/editor/extensions/ext-itex.js?r=3
|
||||
* This function sets the content of of the currently-selected foreignObject element,
|
||||
* based on the itex contained in string.
|
||||
* @param {string} tex The itex text.
|
||||
* @returns This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
/*
|
||||
function setItexString(tex) {
|
||||
const mathns = 'http://www.w3.org/1998/Math/MathML',
|
||||
xmlnsns = 'http://www.w3.org/2000/xmlns/',
|
||||
ajaxEndpoint = '../../itex';
|
||||
const elt = selElems[0];
|
||||
try {
|
||||
const math = svgdoc.createElementNS(mathns, 'math');
|
||||
math.setAttributeNS(xmlnsns, 'xmlns', mathns);
|
||||
math.setAttribute('display', 'inline');
|
||||
const semantics = document.createElementNS(mathns, 'semantics');
|
||||
const annotation = document.createElementNS(mathns, 'annotation');
|
||||
annotation.setAttribute('encoding', 'application/x-tex');
|
||||
annotation.textContent = tex;
|
||||
const mrow = document.createElementNS(mathns, 'mrow');
|
||||
semantics.append(mrow, annotation);
|
||||
math.append(semantics);
|
||||
// make an AJAX request to the server, to get the MathML
|
||||
$.post(ajaxEndpoint, {tex, display: 'inline'}, function(data){
|
||||
const children = data.documentElement.childNodes;
|
||||
while (children.length > 0) {
|
||||
mrow.append(svgdoc.adoptNode(children[0], true));
|
||||
}
|
||||
S.sanitizeSvg(math);
|
||||
S.call('changed', [elt]);
|
||||
});
|
||||
elt.firstChild.replaceWith(math);
|
||||
S.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
*/
|
||||
return {
|
||||
name: 'polygon',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
|
||||
buttons: [{
|
||||
id: 'tool_polygon',
|
||||
type: 'mode',
|
||||
title: 'Polygon Tool',
|
||||
position: 11,
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('polygon');
|
||||
showPanel(true);
|
||||
|
||||
/*
|
||||
function toggleSourceButtons(on){
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#polygon_save, #polygon_cancel').toggle(on);
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Obtained from http://code.google.com/p/passenger-top/source/browse/instiki/public/svg-edit/editor/extensions/ext-itex.js?r=3
|
||||
* This function sets the content of of the currently-selected foreignObject element,
|
||||
* based on the itex contained in string.
|
||||
* @param {string} tex The itex text.
|
||||
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
/*
|
||||
function setItexString(tex) {
|
||||
const mathns = 'http://www.w3.org/1998/Math/MathML',
|
||||
xmlnsns = 'http://www.w3.org/2000/xmlns/',
|
||||
ajaxEndpoint = '../../itex';
|
||||
const elt = selElems[0];
|
||||
try {
|
||||
const math = svgdoc.createElementNS(mathns, 'math');
|
||||
math.setAttributeNS(xmlnsns, 'xmlns', mathns);
|
||||
math.setAttribute('display', 'inline');
|
||||
const semantics = document.createElementNS(mathns, 'semantics');
|
||||
const annotation = document.createElementNS(mathns, 'annotation');
|
||||
annotation.setAttribute('encoding', 'application/x-tex');
|
||||
annotation.textContent = tex;
|
||||
const mrow = document.createElementNS(mathns, 'mrow');
|
||||
semantics.append(mrow, annotation);
|
||||
math.append(semantics);
|
||||
// make an AJAX request to the server, to get the MathML
|
||||
$.post(ajaxEndpoint, {tex, display: 'inline'}, function(data){
|
||||
const children = data.documentElement.childNodes;
|
||||
while (children.length > 0) {
|
||||
mrow.append(svgdoc.adoptNode(children[0], true));
|
||||
}
|
||||
S.sanitizeSvg(math);
|
||||
S.call('changed', [elt]);
|
||||
});
|
||||
elt.firstChild.replaceWith(math);
|
||||
S.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
*/
|
||||
buttons = [{
|
||||
id: 'tool_polygon',
|
||||
type: 'mode',
|
||||
position: 11,
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('polygon');
|
||||
showPanel(true);
|
||||
}
|
||||
}
|
||||
}];
|
||||
contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'polygon_panel',
|
||||
id: 'polySides',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('sides', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
|
||||
callback: function callback() {
|
||||
$('#polygon_panel').hide();
|
||||
|
||||
// TODO: Needs to be done after orig icon loads
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
/* const save = */$('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||
if (!editingitex) {
|
||||
return;
|
||||
}
|
||||
// }
|
||||
// setSelectMode();
|
||||
});
|
||||
|
||||
/* const cancel = */$('#tool_source_cancel').clone().hide().attr('id', 'polygon_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
// const e = opts.event;
|
||||
var rgb = svgCanvas.getColor('fill');
|
||||
// const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
var sRgb = svgCanvas.getColor('stroke');
|
||||
// ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
var sWidth = svgCanvas.getStrokeWidth();
|
||||
|
||||
if (svgCanvas.getMode() === 'polygon') {
|
||||
started = true;
|
||||
|
||||
newFO = S.addSVGElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: S.getNextId(),
|
||||
shape: 'regularPoly',
|
||||
sides: document.getElementById('polySides').value,
|
||||
orient: 'x',
|
||||
edge: 0,
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
if (!started) {
|
||||
return;
|
||||
}
|
||||
if (svgCanvas.getMode() === 'polygon') {
|
||||
// const e = opts.event;
|
||||
var c = $(newFO).attr(['cx', 'cy', 'sides', 'orient', 'fill', 'strokecolor', 'strokeWidth']);
|
||||
var x = opts.mouse_x;
|
||||
var y = opts.mouse_y;
|
||||
var cx = c.cx,
|
||||
cy = c.cy,
|
||||
fill = c.fill,
|
||||
strokecolor = c.strokecolor,
|
||||
strokeWidth = c.strokeWidth,
|
||||
sides = c.sides,
|
||||
edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
|
||||
|
||||
newFO.setAttributeNS(null, 'edge', edg);
|
||||
|
||||
var inradius = edg / 2 * cot(Math.PI / sides);
|
||||
var circumradius = inradius * sec(Math.PI / sides);
|
||||
var points = '';
|
||||
for (var s = 0; sides >= s; s++) {
|
||||
var angle = 2.0 * Math.PI * s / sides;
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
|
||||
points += x + ',' + y + ' ';
|
||||
}
|
||||
|
||||
// const poly = newFO.createElementNS(NS.SVG, 'polygon');
|
||||
newFO.setAttributeNS(null, 'points', points);
|
||||
newFO.setAttributeNS(null, 'fill', fill);
|
||||
newFO.setAttributeNS(null, 'stroke', strokecolor);
|
||||
newFO.setAttributeNS(null, 'stroke-width', strokeWidth);
|
||||
// newFO.setAttributeNS(null, 'transform', 'rotate(-90)');
|
||||
// const shape = newFO.getAttributeNS(null, 'shape');
|
||||
// newFO.append(poly);
|
||||
// DrawPoly(cx, cy, sides, edg, orient);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() === 'polygon') {
|
||||
var attrs = $(newFO).attr('edge');
|
||||
var keep = attrs.edge !== '0';
|
||||
// svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep: keep,
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.getAttributeNS(null, 'shape') === 'regularPoly') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#polySides').val(elem.getAttribute('sides'));
|
||||
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
|
||||
case 15:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}],
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
context_tools: [{
|
||||
type: 'input',
|
||||
panel: 'polygon_panel',
|
||||
title: 'Number of Sides',
|
||||
id: 'polySides',
|
||||
label: 'sides',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('sides', this.value);
|
||||
}
|
||||
}
|
||||
}],
|
||||
function init(_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
}
|
||||
|
||||
callback: function callback() {
|
||||
$('#polygon_panel').hide();
|
||||
|
||||
// TODO: Needs to be done after orig icon loads
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
/* const save = */$('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||
{
|
||||
return;
|
||||
}
|
||||
// }
|
||||
// setSelectMode();
|
||||
});
|
||||
|
||||
/* const cancel = */$('#tool_source_cancel').clone().hide().attr('id', 'polygon_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
// const e = opts.event;
|
||||
var rgb = svgCanvas.getColor('fill');
|
||||
// const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
var sRgb = svgCanvas.getColor('stroke');
|
||||
// ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
var sWidth = svgCanvas.getStrokeWidth();
|
||||
|
||||
if (svgCanvas.getMode() === 'polygon') {
|
||||
started = true;
|
||||
|
||||
newFO = S.addSvgElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: S.getNextId(),
|
||||
shape: 'regularPoly',
|
||||
sides: document.getElementById('polySides').value,
|
||||
orient: 'x',
|
||||
edge: 0,
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
if (!started) {
|
||||
return;
|
||||
}
|
||||
if (svgCanvas.getMode() === 'polygon') {
|
||||
// const e = opts.event;
|
||||
var c = $(newFO).attr(['cx', 'cy', 'sides', 'orient', 'fill', 'strokecolor', 'strokeWidth']);
|
||||
var x = opts.mouse_x;
|
||||
var y = opts.mouse_y;
|
||||
var cx = c.cx,
|
||||
cy = c.cy,
|
||||
fill = c.fill,
|
||||
strokecolor = c.strokecolor,
|
||||
strokeWidth = c.strokeWidth,
|
||||
sides = c.sides,
|
||||
edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
|
||||
|
||||
newFO.setAttributeNS(null, 'edge', edg);
|
||||
|
||||
var inradius = edg / 2 * cot(Math.PI / sides);
|
||||
var circumradius = inradius * sec(Math.PI / sides);
|
||||
var points = '';
|
||||
for (var s = 0; sides >= s; s++) {
|
||||
var angle = 2.0 * Math.PI * s / sides;
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
|
||||
points += x + ',' + y + ' ';
|
||||
}
|
||||
|
||||
// const poly = newFO.createElementNS(NS.SVG, 'polygon');
|
||||
newFO.setAttributeNS(null, 'points', points);
|
||||
newFO.setAttributeNS(null, 'fill', fill);
|
||||
newFO.setAttributeNS(null, 'stroke', strokecolor);
|
||||
newFO.setAttributeNS(null, 'stroke-width', strokeWidth);
|
||||
// newFO.setAttributeNS(null, 'transform', 'rotate(-90)');
|
||||
// const shape = newFO.getAttributeNS(null, 'shape');
|
||||
// newFO.append(poly);
|
||||
// DrawPoly(cx, cy, sides, edg, orient);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() === 'polygon') {
|
||||
var attrs = $(newFO).attr('edge');
|
||||
var keep = attrs.edge !== '0';
|
||||
// svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep: keep,
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.getAttributeNS(null, 'shape') === 'regularPoly') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#polySides').val(elem.getAttribute('sides'));
|
||||
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extPolygon;
|
||||
|
|
|
|||
|
|
@ -151,6 +151,13 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* For parsing color values
|
||||
* @module RGBColor
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
var simpleColors = {
|
||||
aliceblue: 'f0f8ff',
|
||||
antiquewhite: 'faebd7',
|
||||
|
|
@ -320,12 +327,12 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
|
||||
/**
|
||||
* A class to parse color values
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @link https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
var RGBColor = function () {
|
||||
/**
|
||||
* @param {string} colorString
|
||||
*/
|
||||
function RGBColor(colorString) {
|
||||
classCallCheck(this, RGBColor);
|
||||
|
||||
|
|
@ -372,6 +379,9 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
}
|
||||
|
||||
// some getters
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
createClass(RGBColor, [{
|
||||
|
|
@ -379,6 +389,11 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
value: function toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'toHex',
|
||||
value: function toHex() {
|
||||
|
|
@ -397,7 +412,10 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
return '#' + r + g + b;
|
||||
}
|
||||
|
||||
// help
|
||||
/**
|
||||
* help
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'getHelpXML',
|
||||
|
|
@ -434,25 +452,391 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
return RGBColor;
|
||||
}();
|
||||
|
||||
/**
|
||||
* StackBlur - a fast almost Gaussian Blur For Canvas
|
||||
|
||||
In case you find this class useful - especially in commercial projects -
|
||||
I am not totally unhappy for a small donation to my PayPal account
|
||||
mario@quasimondo.de
|
||||
|
||||
Or support me on flattr:
|
||||
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
|
||||
|
||||
* @module StackBlur
|
||||
* @version 0.5
|
||||
* @author Mario Klingemann
|
||||
Contact: mario@quasimondo.com
|
||||
Website: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
|
||||
Twitter: @quasimondo
|
||||
|
||||
* @copyright (c) 2010 Mario Klingemann
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var mulTable = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
|
||||
|
||||
var shgTable = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];
|
||||
|
||||
/**
|
||||
* @param {string|HTMLCanvasElement} canvas
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @throws {Error}
|
||||
* @returns {ImageData} See {@link https://html.spec.whatwg.org/multipage/canvas.html#imagedata}
|
||||
*/
|
||||
function getImageDataFromCanvas(canvas, topX, topY, width, height) {
|
||||
if (typeof canvas === 'string') {
|
||||
canvas = document.getElementById(canvas);
|
||||
}
|
||||
if (!canvas || !('getContext' in canvas)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
try {
|
||||
return context.getImageData(topX, topY, width, height);
|
||||
} catch (e) {
|
||||
throw new Error('unable to access image data: ' + e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} canvas
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @param {Float} radius
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function processCanvasRGBA(canvas, topX, topY, width, height, radius) {
|
||||
if (isNaN(radius) || radius < 1) {
|
||||
return;
|
||||
}
|
||||
radius |= 0;
|
||||
|
||||
var imageData = getImageDataFromCanvas(canvas, topX, topY, width, height);
|
||||
|
||||
imageData = processImageDataRGBA(imageData, topX, topY, width, height, radius);
|
||||
|
||||
canvas.getContext('2d').putImageData(imageData, topX, topY);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ImageData} imageData
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @param {Float} radius
|
||||
* @returns {ImageData}
|
||||
*/
|
||||
function processImageDataRGBA(imageData, topX, topY, width, height, radius) {
|
||||
var pixels = imageData.data;
|
||||
|
||||
var x = void 0,
|
||||
y = void 0,
|
||||
i = void 0,
|
||||
p = void 0,
|
||||
yp = void 0,
|
||||
yi = void 0,
|
||||
yw = void 0,
|
||||
rSum = void 0,
|
||||
gSum = void 0,
|
||||
bSum = void 0,
|
||||
aSum = void 0,
|
||||
rOutSum = void 0,
|
||||
gOutSum = void 0,
|
||||
bOutSum = void 0,
|
||||
aOutSum = void 0,
|
||||
rInSum = void 0,
|
||||
gInSum = void 0,
|
||||
bInSum = void 0,
|
||||
aInSum = void 0,
|
||||
pr = void 0,
|
||||
pg = void 0,
|
||||
pb = void 0,
|
||||
pa = void 0,
|
||||
rbs = void 0;
|
||||
|
||||
var div = radius + radius + 1;
|
||||
// const w4 = width << 2;
|
||||
var widthMinus1 = width - 1;
|
||||
var heightMinus1 = height - 1;
|
||||
var radiusPlus1 = radius + 1;
|
||||
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
|
||||
|
||||
var stackStart = new BlurStack();
|
||||
var stack = stackStart;
|
||||
var stackEnd = void 0;
|
||||
for (i = 1; i < div; i++) {
|
||||
stack = stack.next = new BlurStack();
|
||||
if (i === radiusPlus1) {
|
||||
stackEnd = stack;
|
||||
}
|
||||
}
|
||||
stack.next = stackStart;
|
||||
var stackIn = null;
|
||||
var stackOut = null;
|
||||
|
||||
yw = yi = 0;
|
||||
|
||||
var mulSum = mulTable[radius];
|
||||
var shgSum = shgTable[radius];
|
||||
|
||||
for (y = 0; y < height; y++) {
|
||||
rInSum = gInSum = bInSum = aInSum = rSum = gSum = bSum = aSum = 0;
|
||||
|
||||
rOutSum = radiusPlus1 * (pr = pixels[yi]);
|
||||
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
|
||||
aOutSum = radiusPlus1 * (pa = pixels[yi + 3]);
|
||||
|
||||
rSum += sumFactor * pr;
|
||||
gSum += sumFactor * pg;
|
||||
bSum += sumFactor * pb;
|
||||
aSum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for (i = 0; i < radiusPlus1; i++) {
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
for (i = 1; i < radiusPlus1; i++) {
|
||||
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
|
||||
rSum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
|
||||
gSum += (stack.g = pg = pixels[p + 1]) * rbs;
|
||||
bSum += (stack.b = pb = pixels[p + 2]) * rbs;
|
||||
aSum += (stack.a = pa = pixels[p + 3]) * rbs;
|
||||
|
||||
rInSum += pr;
|
||||
gInSum += pg;
|
||||
bInSum += pb;
|
||||
aInSum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for (x = 0; x < width; x++) {
|
||||
pixels[yi + 3] = pa = aSum * mulSum >> shgSum;
|
||||
if (pa !== 0) {
|
||||
pa = 255 / pa;
|
||||
pixels[yi] = (rSum * mulSum >> shgSum) * pa;
|
||||
pixels[yi + 1] = (gSum * mulSum >> shgSum) * pa;
|
||||
pixels[yi + 2] = (bSum * mulSum >> shgSum) * pa;
|
||||
} else {
|
||||
pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
|
||||
}
|
||||
|
||||
rSum -= rOutSum;
|
||||
gSum -= gOutSum;
|
||||
bSum -= bOutSum;
|
||||
aSum -= aOutSum;
|
||||
|
||||
rOutSum -= stackIn.r;
|
||||
gOutSum -= stackIn.g;
|
||||
bOutSum -= stackIn.b;
|
||||
aOutSum -= stackIn.a;
|
||||
|
||||
p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;
|
||||
|
||||
rInSum += stackIn.r = pixels[p];
|
||||
gInSum += stackIn.g = pixels[p + 1];
|
||||
bInSum += stackIn.b = pixels[p + 2];
|
||||
aInSum += stackIn.a = pixels[p + 3];
|
||||
|
||||
rSum += rInSum;
|
||||
gSum += gInSum;
|
||||
bSum += bInSum;
|
||||
aSum += aInSum;
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
rOutSum += pr = stackOut.r;
|
||||
gOutSum += pg = stackOut.g;
|
||||
bOutSum += pb = stackOut.b;
|
||||
aOutSum += pa = stackOut.a;
|
||||
|
||||
rInSum -= pr;
|
||||
gInSum -= pg;
|
||||
bInSum -= pb;
|
||||
aInSum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += 4;
|
||||
}
|
||||
yw += width;
|
||||
}
|
||||
|
||||
for (x = 0; x < width; x++) {
|
||||
gInSum = bInSum = aInSum = rInSum = gSum = bSum = aSum = rSum = 0;
|
||||
|
||||
yi = x << 2;
|
||||
rOutSum = radiusPlus1 * (pr = pixels[yi]);
|
||||
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
|
||||
aOutSum = radiusPlus1 * (pa = pixels[yi + 3]);
|
||||
|
||||
rSum += sumFactor * pr;
|
||||
gSum += sumFactor * pg;
|
||||
bSum += sumFactor * pb;
|
||||
aSum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for (i = 0; i < radiusPlus1; i++) {
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
yp = width;
|
||||
|
||||
for (i = 1; i <= radius; i++) {
|
||||
yi = yp + x << 2;
|
||||
|
||||
rSum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
|
||||
gSum += (stack.g = pg = pixels[yi + 1]) * rbs;
|
||||
bSum += (stack.b = pb = pixels[yi + 2]) * rbs;
|
||||
aSum += (stack.a = pa = pixels[yi + 3]) * rbs;
|
||||
|
||||
rInSum += pr;
|
||||
gInSum += pg;
|
||||
bInSum += pb;
|
||||
aInSum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
|
||||
if (i < heightMinus1) {
|
||||
yp += width;
|
||||
}
|
||||
}
|
||||
|
||||
yi = x;
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for (y = 0; y < height; y++) {
|
||||
p = yi << 2;
|
||||
pixels[p + 3] = pa = aSum * mulSum >> shgSum;
|
||||
if (pa > 0) {
|
||||
pa = 255 / pa;
|
||||
pixels[p] = (rSum * mulSum >> shgSum) * pa;
|
||||
pixels[p + 1] = (gSum * mulSum >> shgSum) * pa;
|
||||
pixels[p + 2] = (bSum * mulSum >> shgSum) * pa;
|
||||
} else {
|
||||
pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
|
||||
}
|
||||
|
||||
rSum -= rOutSum;
|
||||
gSum -= gOutSum;
|
||||
bSum -= bOutSum;
|
||||
aSum -= aOutSum;
|
||||
|
||||
rOutSum -= stackIn.r;
|
||||
gOutSum -= stackIn.g;
|
||||
bOutSum -= stackIn.b;
|
||||
aOutSum -= stackIn.a;
|
||||
|
||||
p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;
|
||||
|
||||
rSum += rInSum += stackIn.r = pixels[p];
|
||||
gSum += gInSum += stackIn.g = pixels[p + 1];
|
||||
bSum += bInSum += stackIn.b = pixels[p + 2];
|
||||
aSum += aInSum += stackIn.a = pixels[p + 3];
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
rOutSum += pr = stackOut.r;
|
||||
gOutSum += pg = stackOut.g;
|
||||
bOutSum += pb = stackOut.b;
|
||||
aOutSum += pa = stackOut.a;
|
||||
|
||||
rInSum -= pr;
|
||||
gInSum -= pg;
|
||||
bInSum -= pb;
|
||||
aInSum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += width;
|
||||
}
|
||||
}
|
||||
return imageData;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
var BlurStack = function BlurStack() {
|
||||
classCallCheck(this, BlurStack);
|
||||
|
||||
this.r = 0;
|
||||
this.g = 0;
|
||||
this.b = 0;
|
||||
this.a = 0;
|
||||
this.next = null;
|
||||
};
|
||||
|
||||
/* eslint-disable new-cap */
|
||||
|
||||
var stackBlurCanvasRGBA = void 0;
|
||||
var canvasRGBA_ = processCanvasRGBA;
|
||||
|
||||
// canvg(target, s)
|
||||
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
|
||||
// target: canvas element or the id of a canvas element
|
||||
// s: svg string, url to svg file, or xml document
|
||||
// opts: optional hash of options
|
||||
// ignoreMouse: true => ignore mouse events
|
||||
// ignoreAnimation: true => ignore animations
|
||||
// ignoreDimensions: true => does not try to resize canvas
|
||||
// ignoreClear: true => does not clear canvas
|
||||
// offsetX: int => draws at a x offset
|
||||
// offsetY: int => draws at a y offset
|
||||
// scaleWidth: int => scales horizontally to width
|
||||
// scaleHeight: int => scales vertically to height
|
||||
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
|
||||
// returns all the function after the first render is completed with dom
|
||||
/**
|
||||
* @typedef {PlainObject} module:canvg.CanvgOptions
|
||||
* @property {boolean} opts.ignoreMouse true => ignore mouse events
|
||||
* @property {boolean} opts.ignoreAnimation true => ignore animations
|
||||
* @property {boolean} opts.ignoreDimensions true => does not try to resize canvas
|
||||
* @property {boolean} opts.ignoreClear true => does not clear canvas
|
||||
* @property {Integer} opts.offsetX int => draws at a x offset
|
||||
* @property {Integer} opts.offsetY int => draws at a y offset
|
||||
* @property {Integer} opts.scaleWidth int => scales horizontally to width
|
||||
* @property {Integer} opts.scaleHeight int => scales vertically to height
|
||||
* @property {module:canvg.ForceRedraw} opts.forceRedraw function => will call the function on every frame, if it returns true, will redraw
|
||||
* @property {boolean} opts.log Adds log function
|
||||
* @property {boolean} opts.useCORS Whether to set CORS `crossOrigin` for the image to `Anonymous`
|
||||
*/
|
||||
|
||||
/**
|
||||
* If called with no arguments, it will replace all `<svg>` elements on the page with `<canvas>` elements
|
||||
* @function module:canvg.canvg
|
||||
* @param {HTMLCanvasElement|string} target canvas element or the id of a canvas element
|
||||
* @param {string|XMLDocument} s: svg string, url to svg file, or xml document
|
||||
* @param {module:canvg.CanvgOptions} [opts] Optional hash of options
|
||||
* @returns {Promise} All the function after the first render is completed with dom
|
||||
*/
|
||||
var canvg = function canvg(target, s, opts) {
|
||||
// no parameters
|
||||
if (target == null && s == null && opts == null) {
|
||||
|
|
@ -494,6 +878,11 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
return svg.load(ctx, s);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {module:canvg.CanvgOptions} opts
|
||||
* @returns {object}
|
||||
* @todo Flesh out exactly what object is returned here (after updating to latest and reincluding our changes here and those of StackBlur)
|
||||
*/
|
||||
function build(opts) {
|
||||
var svg = { opts: opts };
|
||||
|
||||
|
|
@ -3632,16 +4021,17 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
createClass(_class46, [{
|
||||
key: 'apply',
|
||||
value: function apply(ctx, x, y, width, height) {
|
||||
if (typeof stackBlurCanvasRGBA === 'undefined') {
|
||||
if (typeof canvasRGBA_ === 'undefined') {
|
||||
svg.log('ERROR: `setStackBlurCanvasRGBA` must be run for blur to work');
|
||||
return;
|
||||
}
|
||||
|
||||
// Todo: This might not be a problem anymore with out `instanceof` fix
|
||||
// StackBlur requires canvas be on document
|
||||
ctx.canvas.id = svg.UniqueId();
|
||||
ctx.canvas.style.display = 'none';
|
||||
document.body.append(ctx.canvas);
|
||||
stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
||||
canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
||||
ctx.canvas.remove();
|
||||
}
|
||||
}]);
|
||||
|
|
@ -3990,71 +4380,97 @@ var svgEditorExtension_server_moinsave = (function () {
|
|||
/* globals jQuery */
|
||||
|
||||
var extServer_moinsave = {
|
||||
name: 'server_opensave',
|
||||
callback: function callback(_ref) {
|
||||
var encode64 = _ref.encode64;
|
||||
name: 'server_moinsave',
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref) {
|
||||
var encode64 = _ref.encode64,
|
||||
importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, $, svgCanvas, saveSvgAction;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
_context2.next = 2;
|
||||
return importLocale();
|
||||
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
var saveSvgAction = '/+modify';
|
||||
case 2:
|
||||
strings = _context2.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
saveSvgAction = '/+modify';
|
||||
|
||||
// Create upload target (hidden iframe)
|
||||
/* const target = */$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
|
||||
// Create upload target (hidden iframe)
|
||||
/* const target = */
|
||||
$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
|
||||
|
||||
svgEditor.setCustomHandlers({
|
||||
save: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(win, data) {
|
||||
var svg, qstr, name, svgData, c, datauri, pngData;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
svg = '<?xml version="1.0"?>\n' + data;
|
||||
qstr = $.param.querystring();
|
||||
name = qstr.substr(9).split('/+get/')[1];
|
||||
svgData = encode64(svg);
|
||||
svgEditor.setCustomHandlers({
|
||||
save: function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(win, data) {
|
||||
var svg, qstr, name, svgData, c, datauri, pngData;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
svg = '<?xml version="1.0"?>\n' + data;
|
||||
qstr = $.param.querystring();
|
||||
name = qstr.substr(9).split('/+get/')[1];
|
||||
svgData = encode64(svg);
|
||||
|
||||
if (!$('#export_canvas').length) {
|
||||
$('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
|
||||
if (!$('#export_canvas').length) {
|
||||
$('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
|
||||
}
|
||||
c = $('#export_canvas')[0];
|
||||
|
||||
c.width = svgCanvas.contentW;
|
||||
c.height = svgCanvas.contentH;
|
||||
_context.next = 10;
|
||||
return canvg(c, svg);
|
||||
|
||||
case 10:
|
||||
datauri = c.toDataURL('image/png');
|
||||
// const {uiStrings} = svgEditor;
|
||||
|
||||
pngData = encode64(datauri); // Brett: This encoding seems unnecessary
|
||||
/* const form = */
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveSvgAction + '/' + name,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="png_data" value="' + pngData + '">').append('<input type="hidden" name="filepath" value="' + svgData + '">').append('<input type="hidden" name="filename" value="' + 'drawing.svg">').append('<input type="hidden" name="contenttype" value="application/x-svgdraw">').appendTo('body').submit().remove();
|
||||
alert(strings.saved);
|
||||
top.window.location = '/' + name;
|
||||
|
||||
case 15:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function save(_x2, _x3) {
|
||||
return _ref3.apply(this, arguments);
|
||||
}
|
||||
c = $('#export_canvas')[0];
|
||||
|
||||
c.width = svgCanvas.contentW;
|
||||
c.height = svgCanvas.contentH;
|
||||
_context.next = 10;
|
||||
return canvg(c, svg);
|
||||
return save;
|
||||
}()
|
||||
});
|
||||
|
||||
case 10:
|
||||
datauri = c.toDataURL('image/png');
|
||||
// const {uiStrings} = svgEditor;
|
||||
|
||||
pngData = encode64(datauri); // Brett: This encoding seems unnecessary
|
||||
/* const form = */
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveSvgAction + '/' + name,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="png_data" value="' + pngData + '">').append('<input type="hidden" name="filepath" value="' + svgData + '">').append('<input type="hidden" name="filename" value="' + 'drawing.svg">').append('<input type="hidden" name="contenttype" value="application/x-svgdraw">').appendTo('body').submit().remove();
|
||||
alert('Saved! Return to Item View!');
|
||||
top.window.location = '/' + name;
|
||||
|
||||
case 15:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function save(_x, _x2) {
|
||||
return _ref2.apply(this, arguments);
|
||||
case 9:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this);
|
||||
}));
|
||||
|
||||
return save;
|
||||
}()
|
||||
});
|
||||
}
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extServer_moinsave;
|
||||
|
|
|
|||
|
|
@ -151,6 +151,13 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* For parsing color values
|
||||
* @module RGBColor
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
var simpleColors = {
|
||||
aliceblue: 'f0f8ff',
|
||||
antiquewhite: 'faebd7',
|
||||
|
|
@ -320,12 +327,12 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
|
||||
/**
|
||||
* A class to parse color values
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @link https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
var RGBColor = function () {
|
||||
/**
|
||||
* @param {string} colorString
|
||||
*/
|
||||
function RGBColor(colorString) {
|
||||
classCallCheck(this, RGBColor);
|
||||
|
||||
|
|
@ -372,6 +379,9 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
}
|
||||
|
||||
// some getters
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
createClass(RGBColor, [{
|
||||
|
|
@ -379,6 +389,11 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
value: function toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'toHex',
|
||||
value: function toHex() {
|
||||
|
|
@ -397,7 +412,10 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
return '#' + r + g + b;
|
||||
}
|
||||
|
||||
// help
|
||||
/**
|
||||
* help
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'getHelpXML',
|
||||
|
|
@ -434,25 +452,391 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
return RGBColor;
|
||||
}();
|
||||
|
||||
/**
|
||||
* StackBlur - a fast almost Gaussian Blur For Canvas
|
||||
|
||||
In case you find this class useful - especially in commercial projects -
|
||||
I am not totally unhappy for a small donation to my PayPal account
|
||||
mario@quasimondo.de
|
||||
|
||||
Or support me on flattr:
|
||||
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
|
||||
|
||||
* @module StackBlur
|
||||
* @version 0.5
|
||||
* @author Mario Klingemann
|
||||
Contact: mario@quasimondo.com
|
||||
Website: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
|
||||
Twitter: @quasimondo
|
||||
|
||||
* @copyright (c) 2010 Mario Klingemann
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var mulTable = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
|
||||
|
||||
var shgTable = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];
|
||||
|
||||
/**
|
||||
* @param {string|HTMLCanvasElement} canvas
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @throws {Error}
|
||||
* @returns {ImageData} See {@link https://html.spec.whatwg.org/multipage/canvas.html#imagedata}
|
||||
*/
|
||||
function getImageDataFromCanvas(canvas, topX, topY, width, height) {
|
||||
if (typeof canvas === 'string') {
|
||||
canvas = document.getElementById(canvas);
|
||||
}
|
||||
if (!canvas || !('getContext' in canvas)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
try {
|
||||
return context.getImageData(topX, topY, width, height);
|
||||
} catch (e) {
|
||||
throw new Error('unable to access image data: ' + e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} canvas
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @param {Float} radius
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function processCanvasRGBA(canvas, topX, topY, width, height, radius) {
|
||||
if (isNaN(radius) || radius < 1) {
|
||||
return;
|
||||
}
|
||||
radius |= 0;
|
||||
|
||||
var imageData = getImageDataFromCanvas(canvas, topX, topY, width, height);
|
||||
|
||||
imageData = processImageDataRGBA(imageData, topX, topY, width, height, radius);
|
||||
|
||||
canvas.getContext('2d').putImageData(imageData, topX, topY);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ImageData} imageData
|
||||
* @param {Integer} topX
|
||||
* @param {Integer} topY
|
||||
* @param {Integer} width
|
||||
* @param {Integer} height
|
||||
* @param {Float} radius
|
||||
* @returns {ImageData}
|
||||
*/
|
||||
function processImageDataRGBA(imageData, topX, topY, width, height, radius) {
|
||||
var pixels = imageData.data;
|
||||
|
||||
var x = void 0,
|
||||
y = void 0,
|
||||
i = void 0,
|
||||
p = void 0,
|
||||
yp = void 0,
|
||||
yi = void 0,
|
||||
yw = void 0,
|
||||
rSum = void 0,
|
||||
gSum = void 0,
|
||||
bSum = void 0,
|
||||
aSum = void 0,
|
||||
rOutSum = void 0,
|
||||
gOutSum = void 0,
|
||||
bOutSum = void 0,
|
||||
aOutSum = void 0,
|
||||
rInSum = void 0,
|
||||
gInSum = void 0,
|
||||
bInSum = void 0,
|
||||
aInSum = void 0,
|
||||
pr = void 0,
|
||||
pg = void 0,
|
||||
pb = void 0,
|
||||
pa = void 0,
|
||||
rbs = void 0;
|
||||
|
||||
var div = radius + radius + 1;
|
||||
// const w4 = width << 2;
|
||||
var widthMinus1 = width - 1;
|
||||
var heightMinus1 = height - 1;
|
||||
var radiusPlus1 = radius + 1;
|
||||
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
|
||||
|
||||
var stackStart = new BlurStack();
|
||||
var stack = stackStart;
|
||||
var stackEnd = void 0;
|
||||
for (i = 1; i < div; i++) {
|
||||
stack = stack.next = new BlurStack();
|
||||
if (i === radiusPlus1) {
|
||||
stackEnd = stack;
|
||||
}
|
||||
}
|
||||
stack.next = stackStart;
|
||||
var stackIn = null;
|
||||
var stackOut = null;
|
||||
|
||||
yw = yi = 0;
|
||||
|
||||
var mulSum = mulTable[radius];
|
||||
var shgSum = shgTable[radius];
|
||||
|
||||
for (y = 0; y < height; y++) {
|
||||
rInSum = gInSum = bInSum = aInSum = rSum = gSum = bSum = aSum = 0;
|
||||
|
||||
rOutSum = radiusPlus1 * (pr = pixels[yi]);
|
||||
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
|
||||
aOutSum = radiusPlus1 * (pa = pixels[yi + 3]);
|
||||
|
||||
rSum += sumFactor * pr;
|
||||
gSum += sumFactor * pg;
|
||||
bSum += sumFactor * pb;
|
||||
aSum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for (i = 0; i < radiusPlus1; i++) {
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
for (i = 1; i < radiusPlus1; i++) {
|
||||
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
|
||||
rSum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
|
||||
gSum += (stack.g = pg = pixels[p + 1]) * rbs;
|
||||
bSum += (stack.b = pb = pixels[p + 2]) * rbs;
|
||||
aSum += (stack.a = pa = pixels[p + 3]) * rbs;
|
||||
|
||||
rInSum += pr;
|
||||
gInSum += pg;
|
||||
bInSum += pb;
|
||||
aInSum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for (x = 0; x < width; x++) {
|
||||
pixels[yi + 3] = pa = aSum * mulSum >> shgSum;
|
||||
if (pa !== 0) {
|
||||
pa = 255 / pa;
|
||||
pixels[yi] = (rSum * mulSum >> shgSum) * pa;
|
||||
pixels[yi + 1] = (gSum * mulSum >> shgSum) * pa;
|
||||
pixels[yi + 2] = (bSum * mulSum >> shgSum) * pa;
|
||||
} else {
|
||||
pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
|
||||
}
|
||||
|
||||
rSum -= rOutSum;
|
||||
gSum -= gOutSum;
|
||||
bSum -= bOutSum;
|
||||
aSum -= aOutSum;
|
||||
|
||||
rOutSum -= stackIn.r;
|
||||
gOutSum -= stackIn.g;
|
||||
bOutSum -= stackIn.b;
|
||||
aOutSum -= stackIn.a;
|
||||
|
||||
p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;
|
||||
|
||||
rInSum += stackIn.r = pixels[p];
|
||||
gInSum += stackIn.g = pixels[p + 1];
|
||||
bInSum += stackIn.b = pixels[p + 2];
|
||||
aInSum += stackIn.a = pixels[p + 3];
|
||||
|
||||
rSum += rInSum;
|
||||
gSum += gInSum;
|
||||
bSum += bInSum;
|
||||
aSum += aInSum;
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
rOutSum += pr = stackOut.r;
|
||||
gOutSum += pg = stackOut.g;
|
||||
bOutSum += pb = stackOut.b;
|
||||
aOutSum += pa = stackOut.a;
|
||||
|
||||
rInSum -= pr;
|
||||
gInSum -= pg;
|
||||
bInSum -= pb;
|
||||
aInSum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += 4;
|
||||
}
|
||||
yw += width;
|
||||
}
|
||||
|
||||
for (x = 0; x < width; x++) {
|
||||
gInSum = bInSum = aInSum = rInSum = gSum = bSum = aSum = rSum = 0;
|
||||
|
||||
yi = x << 2;
|
||||
rOutSum = radiusPlus1 * (pr = pixels[yi]);
|
||||
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
|
||||
aOutSum = radiusPlus1 * (pa = pixels[yi + 3]);
|
||||
|
||||
rSum += sumFactor * pr;
|
||||
gSum += sumFactor * pg;
|
||||
bSum += sumFactor * pb;
|
||||
aSum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for (i = 0; i < radiusPlus1; i++) {
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
yp = width;
|
||||
|
||||
for (i = 1; i <= radius; i++) {
|
||||
yi = yp + x << 2;
|
||||
|
||||
rSum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
|
||||
gSum += (stack.g = pg = pixels[yi + 1]) * rbs;
|
||||
bSum += (stack.b = pb = pixels[yi + 2]) * rbs;
|
||||
aSum += (stack.a = pa = pixels[yi + 3]) * rbs;
|
||||
|
||||
rInSum += pr;
|
||||
gInSum += pg;
|
||||
bInSum += pb;
|
||||
aInSum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
|
||||
if (i < heightMinus1) {
|
||||
yp += width;
|
||||
}
|
||||
}
|
||||
|
||||
yi = x;
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for (y = 0; y < height; y++) {
|
||||
p = yi << 2;
|
||||
pixels[p + 3] = pa = aSum * mulSum >> shgSum;
|
||||
if (pa > 0) {
|
||||
pa = 255 / pa;
|
||||
pixels[p] = (rSum * mulSum >> shgSum) * pa;
|
||||
pixels[p + 1] = (gSum * mulSum >> shgSum) * pa;
|
||||
pixels[p + 2] = (bSum * mulSum >> shgSum) * pa;
|
||||
} else {
|
||||
pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
|
||||
}
|
||||
|
||||
rSum -= rOutSum;
|
||||
gSum -= gOutSum;
|
||||
bSum -= bOutSum;
|
||||
aSum -= aOutSum;
|
||||
|
||||
rOutSum -= stackIn.r;
|
||||
gOutSum -= stackIn.g;
|
||||
bOutSum -= stackIn.b;
|
||||
aOutSum -= stackIn.a;
|
||||
|
||||
p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;
|
||||
|
||||
rSum += rInSum += stackIn.r = pixels[p];
|
||||
gSum += gInSum += stackIn.g = pixels[p + 1];
|
||||
bSum += bInSum += stackIn.b = pixels[p + 2];
|
||||
aSum += aInSum += stackIn.a = pixels[p + 3];
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
rOutSum += pr = stackOut.r;
|
||||
gOutSum += pg = stackOut.g;
|
||||
bOutSum += pb = stackOut.b;
|
||||
aOutSum += pa = stackOut.a;
|
||||
|
||||
rInSum -= pr;
|
||||
gInSum -= pg;
|
||||
bInSum -= pb;
|
||||
aInSum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += width;
|
||||
}
|
||||
}
|
||||
return imageData;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
var BlurStack = function BlurStack() {
|
||||
classCallCheck(this, BlurStack);
|
||||
|
||||
this.r = 0;
|
||||
this.g = 0;
|
||||
this.b = 0;
|
||||
this.a = 0;
|
||||
this.next = null;
|
||||
};
|
||||
|
||||
/* eslint-disable new-cap */
|
||||
|
||||
var stackBlurCanvasRGBA = void 0;
|
||||
var canvasRGBA_ = processCanvasRGBA;
|
||||
|
||||
// canvg(target, s)
|
||||
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
|
||||
// target: canvas element or the id of a canvas element
|
||||
// s: svg string, url to svg file, or xml document
|
||||
// opts: optional hash of options
|
||||
// ignoreMouse: true => ignore mouse events
|
||||
// ignoreAnimation: true => ignore animations
|
||||
// ignoreDimensions: true => does not try to resize canvas
|
||||
// ignoreClear: true => does not clear canvas
|
||||
// offsetX: int => draws at a x offset
|
||||
// offsetY: int => draws at a y offset
|
||||
// scaleWidth: int => scales horizontally to width
|
||||
// scaleHeight: int => scales vertically to height
|
||||
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
|
||||
// returns all the function after the first render is completed with dom
|
||||
/**
|
||||
* @typedef {PlainObject} module:canvg.CanvgOptions
|
||||
* @property {boolean} opts.ignoreMouse true => ignore mouse events
|
||||
* @property {boolean} opts.ignoreAnimation true => ignore animations
|
||||
* @property {boolean} opts.ignoreDimensions true => does not try to resize canvas
|
||||
* @property {boolean} opts.ignoreClear true => does not clear canvas
|
||||
* @property {Integer} opts.offsetX int => draws at a x offset
|
||||
* @property {Integer} opts.offsetY int => draws at a y offset
|
||||
* @property {Integer} opts.scaleWidth int => scales horizontally to width
|
||||
* @property {Integer} opts.scaleHeight int => scales vertically to height
|
||||
* @property {module:canvg.ForceRedraw} opts.forceRedraw function => will call the function on every frame, if it returns true, will redraw
|
||||
* @property {boolean} opts.log Adds log function
|
||||
* @property {boolean} opts.useCORS Whether to set CORS `crossOrigin` for the image to `Anonymous`
|
||||
*/
|
||||
|
||||
/**
|
||||
* If called with no arguments, it will replace all `<svg>` elements on the page with `<canvas>` elements
|
||||
* @function module:canvg.canvg
|
||||
* @param {HTMLCanvasElement|string} target canvas element or the id of a canvas element
|
||||
* @param {string|XMLDocument} s: svg string, url to svg file, or xml document
|
||||
* @param {module:canvg.CanvgOptions} [opts] Optional hash of options
|
||||
* @returns {Promise} All the function after the first render is completed with dom
|
||||
*/
|
||||
var canvg = function canvg(target, s, opts) {
|
||||
// no parameters
|
||||
if (target == null && s == null && opts == null) {
|
||||
|
|
@ -494,6 +878,11 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
return svg.load(ctx, s);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {module:canvg.CanvgOptions} opts
|
||||
* @returns {object}
|
||||
* @todo Flesh out exactly what object is returned here (after updating to latest and reincluding our changes here and those of StackBlur)
|
||||
*/
|
||||
function build(opts) {
|
||||
var svg = { opts: opts };
|
||||
|
||||
|
|
@ -3632,16 +4021,17 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
createClass(_class46, [{
|
||||
key: 'apply',
|
||||
value: function apply(ctx, x, y, width, height) {
|
||||
if (typeof stackBlurCanvasRGBA === 'undefined') {
|
||||
if (typeof canvasRGBA_ === 'undefined') {
|
||||
svg.log('ERROR: `setStackBlurCanvasRGBA` must be run for blur to work');
|
||||
return;
|
||||
}
|
||||
|
||||
// Todo: This might not be a problem anymore with out `instanceof` fix
|
||||
// StackBlur requires canvas be on document
|
||||
ctx.canvas.id = svg.UniqueId();
|
||||
ctx.canvas.style.display = 'none';
|
||||
document.body.append(ctx.canvas);
|
||||
stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
||||
canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
||||
ctx.canvas.remove();
|
||||
}
|
||||
}]);
|
||||
|
|
@ -3991,243 +4381,281 @@ var svgEditorExtension_server_opensave = (function () {
|
|||
|
||||
var extServer_opensave = {
|
||||
name: 'server_opensave',
|
||||
callback: function callback(_ref) {
|
||||
var decode64 = _ref.decode64,
|
||||
encode64 = _ref.encode64;
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref) {
|
||||
var decode64 = _ref.decode64,
|
||||
encode64 = _ref.encode64,
|
||||
importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, $, svgCanvas, getFileNameFromTitle, xhtmlEscape, clientDownloadSupport, saveSvgAction, saveImgAction, cancelled, openSvgAction, importSvgAction, importImgAction, openSvgForm, importSvgForm, importImgForm, rebuildInput;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
rebuildInput = function rebuildInput(form) {
|
||||
form.empty();
|
||||
var inp = $('<input type="file" name="svg_file">').appendTo(form);
|
||||
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
function getFileNameFromTitle() {
|
||||
var title = svgCanvas.getDocumentTitle();
|
||||
// We convert (to underscore) only those disallowed Win7 file name characters
|
||||
return title.trim().replace(/[/\\:*?"<>|]/g, '_');
|
||||
}
|
||||
function xhtmlEscape(str) {
|
||||
return str.replace(/&(?!amp;)/g, '&').replace(/"/g, '"').replace(/</g, '<'); // < is actually disallowed above anyways
|
||||
}
|
||||
function clientDownloadSupport(filename, suffix, uri) {
|
||||
var support = $('<a>')[0].download === '';
|
||||
var a = void 0;
|
||||
if (support) {
|
||||
a = $('<a>hidden</a>').attr({
|
||||
download: (filename || 'image') + suffix,
|
||||
href: uri
|
||||
}).css('display', 'none').appendTo('body');
|
||||
a[0].click();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
var saveSvgAction = svgEditor.curConfig.extPath + 'filesave.php',
|
||||
saveImgAction = svgEditor.curConfig.extPath + 'filesave.php';
|
||||
// Create upload target (hidden iframe)
|
||||
function submit() {
|
||||
// This submits the form, which returns the file data using svgEditor.processFile()
|
||||
form.submit();
|
||||
|
||||
var cancelled = false;
|
||||
rebuildInput(form);
|
||||
$.process_cancel(strings.uploading, function () {
|
||||
cancelled = true;
|
||||
$('#dialog_box').hide();
|
||||
});
|
||||
}
|
||||
|
||||
$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
|
||||
svgEditor.setCustomHandlers({
|
||||
save: function save(win, data) {
|
||||
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||
// Firefox doesn't seem to know it is UTF-8 (no matter whether we use or skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
|
||||
filename = getFileNameFromTitle();
|
||||
if (form[0] === openSvgForm[0]) {
|
||||
inp.change(function () {
|
||||
// This takes care of the "are you sure" dialog box
|
||||
svgEditor.openPrep(function (ok) {
|
||||
if (!ok) {
|
||||
rebuildInput(form);
|
||||
return;
|
||||
}
|
||||
submit();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
inp.change(function () {
|
||||
// This submits the form, which returns the file data using svgEditor.processFile()
|
||||
submit();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + encode64(svg))) {
|
||||
return;
|
||||
}
|
||||
clientDownloadSupport = function clientDownloadSupport(filename, suffix, uri) {
|
||||
var support = $('<a>')[0].download === '';
|
||||
var a = void 0;
|
||||
if (support) {
|
||||
a = $('<a>hidden</a>').attr({
|
||||
download: (filename || 'image') + suffix,
|
||||
href: uri
|
||||
}).css('display', 'none').appendTo('body');
|
||||
a[0].click();
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveSvgAction,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="output_svg" value="' + xhtmlEscape(svg) + '">').append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">').appendTo('body').submit().remove();
|
||||
},
|
||||
exportPDF: function exportPDF(win, data) {
|
||||
var filename = getFileNameFromTitle(),
|
||||
datauri = data.dataurlstring;
|
||||
if (clientDownloadSupport(filename, '.pdf', datauri)) {
|
||||
return;
|
||||
}
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveImgAction,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="output_img" value="' + datauri + '">').append('<input type="hidden" name="mime" value="application/pdf">').append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">').appendTo('body').submit().remove();
|
||||
},
|
||||
xhtmlEscape = function xhtmlEscape(str) {
|
||||
return str.replace(/&(?!amp;)/g, '&').replace(/"/g, '"').replace(/</g, '<'); // < is actually disallowed above anyways
|
||||
};
|
||||
|
||||
// Todo: Integrate this extension with a new built-in exportWindowType, "download"
|
||||
exportImage: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(win, data) {
|
||||
var issues, mimeType, quality, c, datauri, pre, note, filename, suffix;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
issues = data.issues, mimeType = data.mimeType, quality = data.quality;
|
||||
getFileNameFromTitle = function getFileNameFromTitle() {
|
||||
var title = svgCanvas.getDocumentTitle();
|
||||
// We convert (to underscore) only those disallowed Win7 file name characters
|
||||
return title.trim().replace(/[/\\:*?"<>|]/g, '_');
|
||||
};
|
||||
|
||||
_context2.next = 6;
|
||||
return importLocale();
|
||||
|
||||
case 6:
|
||||
strings = _context2.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
saveSvgAction = svgEditor.curConfig.extPath + 'filesave.php', saveImgAction = svgEditor.curConfig.extPath + 'filesave.php';
|
||||
// Create upload target (hidden iframe)
|
||||
|
||||
cancelled = false;
|
||||
|
||||
|
||||
if (!$('#export_canvas').length) {
|
||||
$('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
|
||||
}
|
||||
c = $('#export_canvas')[0];
|
||||
|
||||
|
||||
c.width = svgCanvas.contentW;
|
||||
c.height = svgCanvas.contentH;
|
||||
_context.next = 7;
|
||||
return canvg(c, data.svg);
|
||||
|
||||
case 7:
|
||||
datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType);
|
||||
// {uiStrings} = svgEditor;
|
||||
|
||||
// Check if there are issues
|
||||
|
||||
pre = void 0, note = '';
|
||||
|
||||
if (issues.length) {
|
||||
pre = '\n \u2022 ';
|
||||
note += '\n\n' + pre + issues.join(pre);
|
||||
}
|
||||
|
||||
if (note.length) {
|
||||
alert(note);
|
||||
}
|
||||
|
||||
$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
|
||||
svgEditor.setCustomHandlers({
|
||||
save: function save(win, data) {
|
||||
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||
// Firefox doesn't seem to know it is UTF-8 (no matter whether we use or skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
|
||||
filename = getFileNameFromTitle();
|
||||
suffix = '.' + data.type.toLowerCase();
|
||||
|
||||
if (!clientDownloadSupport(filename, suffix, datauri)) {
|
||||
_context.next = 15;
|
||||
break;
|
||||
if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + encode64(svg))) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _context.abrupt('return');
|
||||
|
||||
case 15:
|
||||
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveSvgAction,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="output_svg" value="' + xhtmlEscape(svg) + '">').append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">').appendTo('body').submit().remove();
|
||||
},
|
||||
exportPDF: function exportPDF(win, data) {
|
||||
var filename = getFileNameFromTitle(),
|
||||
datauri = data.output;
|
||||
if (clientDownloadSupport(filename, '.pdf', datauri)) {
|
||||
return;
|
||||
}
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveImgAction,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="output_img" value="' + datauri + '">').append('<input type="hidden" name="mime" value="' + mimeType + '">').append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">').appendTo('body').submit().remove();
|
||||
}).append('<input type="hidden" name="output_img" value="' + datauri + '">').append('<input type="hidden" name="mime" value="application/pdf">').append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">').appendTo('body').submit().remove();
|
||||
},
|
||||
|
||||
case 16:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
// Todo: Integrate this extension with a new built-in exportWindowType, "download"
|
||||
exportImage: function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(win, data) {
|
||||
var issues, mimeType, quality, c, datauri, pre, note, filename, suffix;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
issues = data.issues, mimeType = data.mimeType, quality = data.quality;
|
||||
|
||||
|
||||
if (!$('#export_canvas').length) {
|
||||
$('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
|
||||
}
|
||||
c = $('#export_canvas')[0];
|
||||
|
||||
|
||||
c.width = svgCanvas.contentW;
|
||||
c.height = svgCanvas.contentH;
|
||||
_context.next = 7;
|
||||
return canvg(c, data.svg);
|
||||
|
||||
case 7:
|
||||
datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType);
|
||||
// {uiStrings} = svgEditor;
|
||||
|
||||
// Check if there are issues
|
||||
|
||||
pre = void 0, note = '';
|
||||
|
||||
if (issues.length) {
|
||||
pre = '\n \u2022 ';
|
||||
note += '\n\n' + pre + issues.join(pre);
|
||||
}
|
||||
|
||||
if (note.length) {
|
||||
alert(note);
|
||||
}
|
||||
|
||||
filename = getFileNameFromTitle();
|
||||
suffix = '.' + data.type.toLowerCase();
|
||||
|
||||
if (!clientDownloadSupport(filename, suffix, datauri)) {
|
||||
_context.next = 15;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context.abrupt('return');
|
||||
|
||||
case 15:
|
||||
|
||||
$('<form>').attr({
|
||||
method: 'post',
|
||||
action: saveImgAction,
|
||||
target: 'output_frame'
|
||||
}).append('<input type="hidden" name="output_img" value="' + datauri + '">').append('<input type="hidden" name="mime" value="' + mimeType + '">').append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">').appendTo('body').submit().remove();
|
||||
|
||||
case 16:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function exportImage(_x2, _x3) {
|
||||
return _ref3.apply(this, arguments);
|
||||
}
|
||||
|
||||
return exportImage;
|
||||
}()
|
||||
});
|
||||
|
||||
// Do nothing if client support is found
|
||||
|
||||
if (!window.FileReader) {
|
||||
_context2.next = 16;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function exportImage(_x, _x2) {
|
||||
return _ref2.apply(this, arguments);
|
||||
return _context2.abrupt('return');
|
||||
|
||||
case 16:
|
||||
|
||||
// Change these to appropriate script file
|
||||
openSvgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=load_svg';
|
||||
importSvgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=import_svg';
|
||||
importImgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=import_img';
|
||||
|
||||
// Set up function for PHP uploader to use
|
||||
|
||||
svgEditor.processFile = function (str64, type) {
|
||||
var xmlstr = void 0;
|
||||
if (cancelled) {
|
||||
cancelled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
$('#dialog_box').hide();
|
||||
|
||||
if (type !== 'import_img') {
|
||||
xmlstr = decode64(str64);
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'load_svg':
|
||||
svgCanvas.clear();
|
||||
svgCanvas.setSvgString(xmlstr);
|
||||
svgEditor.updateCanvas();
|
||||
break;
|
||||
case 'import_svg':
|
||||
svgCanvas.importSvgString(xmlstr);
|
||||
svgEditor.updateCanvas();
|
||||
break;
|
||||
case 'import_img':
|
||||
svgCanvas.setGoodImage(str64);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Create upload form
|
||||
openSvgForm = $('<form>');
|
||||
|
||||
openSvgForm.attr({
|
||||
enctype: 'multipart/form-data',
|
||||
method: 'post',
|
||||
action: openSvgAction,
|
||||
target: 'output_frame'
|
||||
});
|
||||
|
||||
// Create import form
|
||||
importSvgForm = openSvgForm.clone().attr('action', importSvgAction);
|
||||
|
||||
// Create image form
|
||||
|
||||
importImgForm = openSvgForm.clone().attr('action', importImgAction);
|
||||
|
||||
// It appears necessary to rebuild this input every time a file is
|
||||
// selected so the same file can be picked and the change event can fire.
|
||||
|
||||
// Create the input elements
|
||||
rebuildInput(openSvgForm);
|
||||
rebuildInput(importSvgForm);
|
||||
rebuildInput(importImgForm);
|
||||
|
||||
// Add forms to buttons
|
||||
$('#tool_open').show().prepend(openSvgForm);
|
||||
$('#tool_import').show().prepend(importSvgForm);
|
||||
$('#tool_image').prepend(importImgForm);
|
||||
|
||||
case 30:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this);
|
||||
}));
|
||||
|
||||
return exportImage;
|
||||
}()
|
||||
});
|
||||
|
||||
// Do nothing if client support is found
|
||||
if (window.FileReader) {
|
||||
return;
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
// Change these to appropriate script file
|
||||
var openSvgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=load_svg';
|
||||
var importSvgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=import_svg';
|
||||
var importImgAction = svgEditor.curConfig.extPath + 'fileopen.php?type=import_img';
|
||||
|
||||
// Set up function for PHP uploader to use
|
||||
svgEditor.processFile = function (str64, type) {
|
||||
var xmlstr = void 0;
|
||||
if (cancelled) {
|
||||
cancelled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
$('#dialog_box').hide();
|
||||
|
||||
if (type !== 'import_img') {
|
||||
xmlstr = decode64(str64);
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'load_svg':
|
||||
svgCanvas.clear();
|
||||
svgCanvas.setSvgString(xmlstr);
|
||||
svgEditor.updateCanvas();
|
||||
break;
|
||||
case 'import_svg':
|
||||
svgCanvas.importSvgString(xmlstr);
|
||||
svgEditor.updateCanvas();
|
||||
break;
|
||||
case 'import_img':
|
||||
svgCanvas.setGoodImage(str64);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Create upload form
|
||||
var openSvgForm = $('<form>');
|
||||
openSvgForm.attr({
|
||||
enctype: 'multipart/form-data',
|
||||
method: 'post',
|
||||
action: openSvgAction,
|
||||
target: 'output_frame'
|
||||
});
|
||||
|
||||
// Create import form
|
||||
var importSvgForm = openSvgForm.clone().attr('action', importSvgAction);
|
||||
|
||||
// Create image form
|
||||
var importImgForm = openSvgForm.clone().attr('action', importImgAction);
|
||||
|
||||
// It appears necessary to rebuild this input every time a file is
|
||||
// selected so the same file can be picked and the change event can fire.
|
||||
function rebuildInput(form) {
|
||||
form.empty();
|
||||
var inp = $('<input type="file" name="svg_file">').appendTo(form);
|
||||
|
||||
function submit() {
|
||||
// This submits the form, which returns the file data using svgEditor.processFile()
|
||||
form.submit();
|
||||
|
||||
rebuildInput(form);
|
||||
$.process_cancel('Uploading...', function () {
|
||||
cancelled = true;
|
||||
$('#dialog_box').hide();
|
||||
});
|
||||
}
|
||||
|
||||
if (form[0] === openSvgForm[0]) {
|
||||
inp.change(function () {
|
||||
// This takes care of the "are you sure" dialog box
|
||||
svgEditor.openPrep(function (ok) {
|
||||
if (!ok) {
|
||||
rebuildInput(form);
|
||||
return;
|
||||
}
|
||||
submit();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
inp.change(function () {
|
||||
// This submits the form, which returns the file data using svgEditor.processFile()
|
||||
submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Create the input elements
|
||||
rebuildInput(openSvgForm);
|
||||
rebuildInput(importSvgForm);
|
||||
rebuildInput(importImgForm);
|
||||
|
||||
// Add forms to buttons
|
||||
$('#tool_open').show().prepend(openSvgForm);
|
||||
$('#tool_import').show().prepend(importSvgForm);
|
||||
$('#tool_image').prepend(importImgForm);
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extServer_opensave;
|
||||
|
|
|
|||
|
|
@ -1,352 +1,386 @@
|
|||
var svgEditorExtension_shapes = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-shapes.js
|
||||
*
|
||||
* Licensed under the MIT License
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright(c) 2010 Christian Tzurcanu
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
var extShapes = {
|
||||
name: 'shapes',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var canv = svgEditor.canvas;
|
||||
var svgroot = canv.getRootElem();
|
||||
var lastBBox = {};
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, $, canv, svgroot, lastBBox, categories, library, modeId, startClientPos, currentD, curShapeId, curShape, startX, startY, curLib, loadIcons, makeButtons, loadLibrary, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
loadLibrary = function loadLibrary(catId) {
|
||||
var lib = library[catId];
|
||||
|
||||
// This populates the category list
|
||||
var categories = {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
};
|
||||
if (!lib) {
|
||||
$('#shape_buttons').html(strings.loading);
|
||||
$.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
|
||||
curLib = library[catId] = {
|
||||
data: result.data,
|
||||
size: result.size,
|
||||
fill: result.fill
|
||||
};
|
||||
makeButtons(catId, result);
|
||||
loadIcons();
|
||||
});
|
||||
return;
|
||||
}
|
||||
curLib = lib;
|
||||
if (!lib.buttons.length) {
|
||||
makeButtons(catId, lib);
|
||||
}
|
||||
loadIcons();
|
||||
};
|
||||
|
||||
var library = {
|
||||
basic: {
|
||||
data: {
|
||||
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
|
||||
frame: 'm0,0l300,0l0,300l-300,0zm35,-265l0,230l230,0l0,-230z',
|
||||
donut: 'm1,150l0,0c0,-82.29042 66.70958,-149 149,-149l0,0c39.51724,0 77.41599,15.69816 105.35889,43.64108c27.94293,27.94293 43.64111,65.84165 43.64111,105.35892l0,0c0,82.29041 -66.70958,149 -149,149l0,0c-82.29041,0 -149,-66.70959 -149,-149zm74.5,0l0,0c0,41.1452 33.35481,74.5 74.5,74.5c41.14522,0 74.5,-33.3548 74.5,-74.5c0,-41.1452 -33.3548,-74.5 -74.5,-74.5l0,0c-41.14519,0 -74.5,33.35481 -74.5,74.5z',
|
||||
triangle: 'm1,280.375l149,-260.75l149,260.75z',
|
||||
right_triangle: 'm1,299l0,-298l298,298z',
|
||||
diamond: 'm1,150l149,-149l149,149l-149,149l-149,-149z',
|
||||
pentagon: 'm1.00035,116.97758l148.99963,-108.4053l148.99998,108.4053l-56.91267,175.4042l-184.1741,0l-56.91284,-175.4042z',
|
||||
hexagon: 'm1,149.99944l63.85715,-127.71428l170.28572,0l63.85713,127.71428l-63.85713,127.71428l-170.28572,0l-63.85715,-127.71428z',
|
||||
septagon1: 'm0.99917,191.06511l29.51249,-127.7108l119.48833,-56.83673l119.48836,56.83673l29.51303,127.7108l-82.69087,102.41679l-132.62103,0l-82.69031,-102.41679z',
|
||||
heptagon: 'm1,88.28171l87.28172,-87.28171l123.43653,0l87.28172,87.28171l0,123.43654l-87.28172,87.28172l-123.43653,0l-87.28172,-87.28172l0,-123.43654z',
|
||||
decagon: 'm1,150.00093l28.45646,-88.40318l74.49956,-54.63682l92.08794,0l74.50002,54.63682l28.45599,88.40318l-28.45599,88.40318l-74.50002,54.63681l-92.08794,0l-74.49956,-54.63681l-28.45646,-88.40318z',
|
||||
dodecagon: 'm1,110.07421l39.92579,-69.14842l69.14842,-39.92579l79.85159,0l69.14842,39.92579l39.92578,69.14842l0,79.85159l-39.92578,69.14842l-69.14842,39.92578l-79.85159,0l-69.14842,-39.92578l-39.92579,-69.14842l0,-79.85159z',
|
||||
star_points_5: 'm1,116.58409l113.82668,0l35.17332,-108.13487l35.17334,108.13487l113.82666,0l-92.08755,66.83026l35.17514,108.13487l-92.08759,-66.83208l-92.08757,66.83208l35.17515,-108.13487l-92.08758,-66.83026z',
|
||||
trapezoid: 'm1,299l55.875,-298l186.25001,0l55.87498,298z',
|
||||
arrow_up: 'm1.49805,149.64304l148.50121,-148.00241l148.50121,148.00241l-74.25061,0l0,148.71457l-148.5012,0l0,-148.71457z',
|
||||
vertical_scrool: 'm37.375,261.625l0,-242.9375l0,0c0,-10.32083 8.36669,-18.6875 18.6875,-18.6875l224.25,0c10.32083,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36667,18.6875 -18.6875,18.6875l-18.6875,0l0,242.9375c0,10.32083 -8.36668,18.6875 -18.6875,18.6875l-224.25,0l0,0c-10.32083,0 -18.6875,-8.36667 -18.6875,-18.6875c0,-10.32083 8.36667,-18.6875 18.6875,-18.6875zm37.375,-261.625l0,0c10.32081,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36669,18.6875 -18.6875,18.6875c-5.1604,0 -9.34375,-4.18335 -9.34375,-9.34375c0,-5.16041 4.18335,-9.34375 9.34375,-9.34375l18.6875,0m186.875,18.6875l-205.5625,0m-37.375,224.25l0,0c5.1604,0 9.34375,4.18335 9.34375,9.34375c0,5.1604 -4.18335,9.34375 -9.34375,9.34375l18.6875,0m-18.6875,18.6875l0,0c10.32081,0 18.6875,-8.36667 18.6875,-18.6875l0,-18.6875',
|
||||
smiley: 'm68.49886,214.78838q81.06408,55.67332 161.93891,0m-144.36983,-109.9558c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57948,6.97517 15.57948,15.57949c0,8.60431 -6.97517,15.57947 -15.57948,15.57947c-8.60431,0 -15.57948,-6.97516 -15.57948,-15.57947m95.83109,0c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57947,6.97517 15.57947,15.57949c0,8.60431 -6.97516,15.57947 -15.57947,15.57947c-8.60429,0 -15.57948,-6.97516 -15.57948,-15.57947m-181.89903,44.73038l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296zm0,0l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296z',
|
||||
left_braket: 'm174.24565,298.5c-13.39009,0 -24.24489,-1.80908 -24.24489,-4.04065l0,-140.4187c0,-2.23158 -10.85481,-4.04065 -24.2449,-4.04065l0,0c13.39009,0 24.2449,-1.80907 24.2449,-4.04065l0,-140.4187l0,0c0,-2.23159 10.8548,-4.04066 24.24489,-4.04066',
|
||||
uml_actor: 'm40.5,100l219,0m-108.99991,94.00006l107,105m-107.00009,-106.00006l-100,106m99.5,-231l0,125m33.24219,-158.75781c0,18.35916 -14.88303,33.24219 -33.24219,33.24219c-18.35916,0 -33.2422,-14.88303 -33.2422,-33.24219c0.00002,-18.35915 14.88304,-33.24219 33.2422,-33.24219c18.35916,0 33.24219,14.88304 33.24219,33.24219z',
|
||||
dialog_balloon_1: 'm0.99786,35.96579l0,0c0,-19.31077 15.28761,-34.96524 34.14583,-34.96524l15.52084,0l0,0l74.50001,0l139.68748,0c9.05606,0 17.74118,3.68382 24.14478,10.24108c6.40356,6.55726 10.00107,15.45081 10.00107,24.72416l0,87.41311l0,0l0,52.44785l0,0c0,19.31078 -15.2876,34.96524 -34.14584,34.96524l-139.68748,0l-97.32507,88.90848l22.82506,-88.90848l-15.52084,0c-18.85822,0 -34.14583,-15.65446 -34.14583,-34.96524l0,0l0,-52.44785l0,0z',
|
||||
cloud: 'm182.05086,34.31005c-0.64743,0.02048 -1.27309,0.07504 -1.92319,0.13979c-10.40161,1.03605 -19.58215,7.63722 -24.24597,17.4734l-2.47269,7.44367c0.53346,-2.57959 1.35258,-5.08134 2.47269,-7.44367c-8.31731,-8.61741 -19.99149,-12.59487 -31.52664,-10.72866c-11.53516,1.8662 -21.55294,9.3505 -27.02773,20.19925c-15.45544,-9.51897 -34.72095,-8.94245 -49.62526,1.50272c-14.90431,10.44516 -22.84828,28.93916 -20.43393,47.59753l1.57977,7.58346c-0.71388,-2.48442 -1.24701,-5.01186 -1.57977,-7.58346l-0.2404,0.69894c-12.95573,1.4119 -23.58103,11.46413 -26.34088,24.91708c-2.75985,13.45294 2.9789,27.25658 14.21789,34.21291l17.54914,4.26352c-6.1277,0.50439 -12.24542,-0.9808 -17.54914,-4.26352c-8.66903,9.71078 -10.6639,24.08736 -4.94535,35.96027c5.71854,11.87289 17.93128,18.70935 30.53069,17.15887l7.65843,-2.02692c-2.46413,1.0314 -5.02329,1.70264 -7.65843,2.02692c7.15259,13.16728 19.01251,22.77237 32.93468,26.5945c13.92217,3.82214 28.70987,1.56322 41.03957,-6.25546c10.05858,15.86252 27.91113,24.19412 45.81322,21.38742c17.90208,-2.8067 32.66954,-16.26563 37.91438,-34.52742l1.82016,-10.20447c-0.27254,3.46677 -0.86394,6.87508 -1.82016,10.20447c12.31329,8.07489 27.80199,8.52994 40.52443,1.18819c12.72244,-7.34175 20.6609,-21.34155 20.77736,-36.58929l-4.56108,-22.7823l-17.96776,-15.41455c13.89359,8.70317 22.6528,21.96329 22.52884,38.19685c16.5202,0.17313 30.55292,-13.98268 36.84976,-30.22897c6.29684,-16.24631 3.91486,-34.76801 -6.2504,-48.68089c4.21637,-10.35873 3.96622,-22.14172 -0.68683,-32.29084c-4.65308,-10.14912 -13.23602,-17.69244 -23.55914,-20.65356c-2.31018,-13.45141 -11.83276,-24.27162 -24.41768,-27.81765c-12.58492,-3.54603 -25.98557,0.82654 -34.41142,11.25287l-5.11707,8.63186c1.30753,-3.12148 3.01521,-6.03101 5.11707,-8.63186c-5.93959,-8.19432 -15.2556,-12.8181 -24.96718,-12.51096z',
|
||||
cylinder: 'm299.0007,83.77844c0,18.28676 -66.70958,33.11111 -149.00002,33.11111m149.00002,-33.11111l0,0c0,18.28676 -66.70958,33.11111 -149.00002,33.11111c-82.29041,0 -148.99997,-14.82432 -148.99997,-33.11111m0,0l0,0c0,-18.28674 66.70956,-33.1111 148.99997,-33.1111c82.29044,0 149.00002,14.82436 149.00002,33.1111l0,132.44449c0,18.28674 -66.70958,33.11105 -149.00002,33.11105c-82.29041,0 -148.99997,-14.82431 -148.99997,-33.11105z',
|
||||
arrow_u_turn: 'm1.00059,299.00055l0,-167.62497l0,0c0,-72.00411 58.37087,-130.37499 130.375,-130.37499l0,0l0,0c34.57759,0 67.73898,13.7359 92.18906,38.18595c24.45006,24.45005 38.18593,57.61144 38.18593,92.18904l0,18.625l37.24997,0l-74.49995,74.50002l-74.50002,-74.50002l37.25,0l0,-18.625c0,-30.8589 -25.0161,-55.87498 -55.87498,-55.87498l0,0l0,0c-30.85892,0 -55.875,25.01608 -55.875,55.87498l0,167.62497z',
|
||||
arrow_left_up: 'm0.99865,224.5l74.50004,-74.5l0,37.25l111.74991,0l0,-111.75l-37.25,0l74.5,-74.5l74.5,74.5l-37.25,0l0,186.25l-186.24989,0l0,37.25l-74.50005,-74.5z',
|
||||
maximize: 'm1.00037,150.34581l55.30305,-55.30267l0,27.65093l22.17356,0l0,-44.21833l44.21825,0l0,-22.17357l-27.65095,0l55.30267,-55.30292l55.3035,55.30292l-27.65175,0l0,22.17357l44.21835,0l0,44.21833l22.17357,0l0,-27.65093l55.30345,55.30267l-55.30345,55.3035l0,-27.65175l-22.17357,0l0,44.21834l-44.21835,0l0,22.17355l27.65175,0l-55.3035,55.30348l-55.30267,-55.30348l27.65095,0l0,-22.17355l-44.21825,0l0,-44.21834l-22.17356,0l0,27.65175l-55.30305,-55.3035z',
|
||||
cross: 'm0.99844,99.71339l98.71494,0l0,-98.71495l101.26279,0l0,98.71495l98.71495,0l0,101.2628l-98.71495,0l0,98.71494l-101.26279,0l0,-98.71494l-98.71494,0z',
|
||||
plaque: 'm-0.00197,49.94376l0,0c27.5829,0 49.94327,-22.36036 49.94327,-49.94327l199.76709,0l0,0c0,27.5829 22.36037,49.94327 49.94325,49.94327l0,199.7671l0,0c-27.58289,0 -49.94325,22.36034 -49.94325,49.94325l-199.76709,0c0,-27.58292 -22.36037,-49.94325 -49.94327,-49.94325z',
|
||||
page: 'm249.3298,298.99744l9.9335,-39.73413l39.73413,-9.93355l-49.66763,49.66768l-248.33237,0l0,-298.00001l298.00001,0l0,248.33234'
|
||||
makeButtons = function makeButtons(cat, shapes) {
|
||||
var size = curLib.size || 300;
|
||||
var fill = curLib.fill || false;
|
||||
var off = size * 0.05;
|
||||
var vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
|
||||
var stroke = fill ? 0 : size / 30;
|
||||
var shapeIcon = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="' + vb + '">' + '<path fill="' + (fill ? '#333' : 'none') + '" stroke="#000" stroke-width="' + stroke + '" /></svg></svg>', 'text/xml');
|
||||
|
||||
},
|
||||
buttons: []
|
||||
}
|
||||
};
|
||||
var width = 24;
|
||||
var height = 24;
|
||||
shapeIcon.documentElement.setAttribute('width', width);
|
||||
shapeIcon.documentElement.setAttribute('height', height);
|
||||
var svgElem = $(document.importNode(shapeIcon.documentElement, true));
|
||||
|
||||
var modeId = 'shapelib';
|
||||
var startClientPos = {};
|
||||
|
||||
var currentD = void 0,
|
||||
curShapeId = void 0,
|
||||
curShape = void 0,
|
||||
startX = void 0,
|
||||
startY = void 0;
|
||||
var curLib = library.basic;
|
||||
|
||||
function loadIcons() {
|
||||
$('#shape_buttons').empty().append(curLib.buttons);
|
||||
}
|
||||
|
||||
function makeButtons(cat, shapes) {
|
||||
var size = curLib.size || 300;
|
||||
var fill = curLib.fill || false;
|
||||
var off = size * 0.05;
|
||||
var vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
|
||||
var stroke = fill ? 0 : size / 30;
|
||||
var shapeIcon = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="' + vb + '"><path fill="' + (fill ? '#333' : 'none') + '" stroke="#000" stroke-width="' + stroke + '" /></svg></svg>', 'text/xml');
|
||||
|
||||
var width = 24;
|
||||
var height = 24;
|
||||
shapeIcon.documentElement.setAttribute('width', width);
|
||||
shapeIcon.documentElement.setAttribute('height', height);
|
||||
var svgElem = $(document.importNode(shapeIcon.documentElement, true));
|
||||
|
||||
var data = shapes.data;
|
||||
var data = shapes.data;
|
||||
|
||||
|
||||
curLib.buttons = [];
|
||||
for (var id in data) {
|
||||
var pathD = data[id];
|
||||
var icon = svgElem.clone();
|
||||
icon.find('path').attr('d', pathD);
|
||||
curLib.buttons = [];
|
||||
for (var id in data) {
|
||||
var pathD = data[id];
|
||||
var icon = svgElem.clone();
|
||||
icon.find('path').attr('d', pathD);
|
||||
|
||||
var iconBtn = icon.wrap('<div class="tool_button">').parent().attr({
|
||||
id: modeId + '_' + id,
|
||||
title: id
|
||||
});
|
||||
// Store for later use
|
||||
curLib.buttons.push(iconBtn[0]);
|
||||
}
|
||||
}
|
||||
var iconBtn = icon.wrap('<div class="tool_button">').parent().attr({
|
||||
id: modeId + '_' + id,
|
||||
title: id
|
||||
});
|
||||
// Store for later use
|
||||
curLib.buttons.push(iconBtn[0]);
|
||||
}
|
||||
};
|
||||
|
||||
function loadLibrary(catId) {
|
||||
var lib = library[catId];
|
||||
loadIcons = function loadIcons() {
|
||||
$('#shape_buttons').empty().append(curLib.buttons);
|
||||
};
|
||||
|
||||
if (!lib) {
|
||||
$('#shape_buttons').html('Loading...');
|
||||
$.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
|
||||
curLib = library[catId] = {
|
||||
data: result.data,
|
||||
size: result.size,
|
||||
fill: result.fill
|
||||
};
|
||||
makeButtons(catId, result);
|
||||
loadIcons();
|
||||
});
|
||||
return;
|
||||
}
|
||||
curLib = lib;
|
||||
if (!lib.buttons.length) {
|
||||
makeButtons(catId, lib);
|
||||
}
|
||||
loadIcons();
|
||||
}
|
||||
_context.next = 5;
|
||||
return importLocale();
|
||||
|
||||
return {
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
|
||||
buttons: [{
|
||||
id: 'tool_shapelib',
|
||||
type: 'mode_flyout', // _flyout
|
||||
position: 6,
|
||||
title: 'Shape library',
|
||||
events: {
|
||||
click: function click() {
|
||||
canv.setMode(modeId);
|
||||
case 5:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
canv = svgEditor.canvas;
|
||||
svgroot = canv.getRootElem();
|
||||
lastBBox = {};
|
||||
|
||||
// This populates the category list
|
||||
|
||||
categories = strings.categories;
|
||||
library = {
|
||||
basic: {
|
||||
data: {
|
||||
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
|
||||
frame: 'm0,0l300,0l0,300l-300,0zm35,-265l0,230l230,0l0,-230z',
|
||||
donut: 'm1,150l0,0c0,-82.29042 66.70958,-149 149,-149l0,0c39.51724,0 77.41599,15.69816 105.35889,43.64108c27.94293,27.94293 43.64111,65.84165 43.64111,105.35892l0,0c0,82.29041 -66.70958,149 -149,149l0,0c-82.29041,0 -149,-66.70959 -149,-149zm74.5,0l0,0c0,41.1452 33.35481,74.5 74.5,74.5c41.14522,0 74.5,-33.3548 74.5,-74.5c0,-41.1452 -33.3548,-74.5 -74.5,-74.5l0,0c-41.14519,0 -74.5,33.35481 -74.5,74.5z',
|
||||
triangle: 'm1,280.375l149,-260.75l149,260.75z',
|
||||
right_triangle: 'm1,299l0,-298l298,298z',
|
||||
diamond: 'm1,150l149,-149l149,149l-149,149l-149,-149z',
|
||||
pentagon: 'm1.00035,116.97758l148.99963,-108.4053l148.99998,108.4053l-56.91267,175.4042l-184.1741,0l-56.91284,-175.4042z',
|
||||
hexagon: 'm1,149.99944l63.85715,-127.71428l170.28572,0l63.85713,127.71428l-63.85713,127.71428l-170.28572,0l-63.85715,-127.71428z',
|
||||
septagon1: 'm0.99917,191.06511l29.51249,-127.7108l119.48833,-56.83673l119.48836,56.83673l29.51303,127.7108l-82.69087,102.41679l-132.62103,0l-82.69031,-102.41679z',
|
||||
heptagon: 'm1,88.28171l87.28172,-87.28171l123.43653,0l87.28172,87.28171l0,123.43654l-87.28172,87.28172l-123.43653,0l-87.28172,-87.28172l0,-123.43654z',
|
||||
decagon: 'm1,150.00093l28.45646,-88.40318l74.49956,-54.63682l92.08794,0l74.50002,54.63682l28.45599,88.40318l-28.45599,88.40318l-74.50002,54.63681l-92.08794,0l-74.49956,-54.63681l-28.45646,-88.40318z',
|
||||
dodecagon: 'm1,110.07421l39.92579,-69.14842l69.14842,-39.92579l79.85159,0l69.14842,39.92579l39.92578,69.14842l0,79.85159l-39.92578,69.14842l-69.14842,39.92578l-79.85159,0l-69.14842,-39.92578l-39.92579,-69.14842l0,-79.85159z',
|
||||
star_points_5: 'm1,116.58409l113.82668,0l35.17332,-108.13487l35.17334,108.13487l113.82666,0l-92.08755,66.83026l35.17514,108.13487l-92.08759,-66.83208l-92.08757,66.83208l35.17515,-108.13487l-92.08758,-66.83026z',
|
||||
trapezoid: 'm1,299l55.875,-298l186.25001,0l55.87498,298z',
|
||||
arrow_up: 'm1.49805,149.64304l148.50121,-148.00241l148.50121,148.00241l-74.25061,0l0,148.71457l-148.5012,0l0,-148.71457z',
|
||||
vertical_scrool: 'm37.375,261.625l0,-242.9375l0,0c0,-10.32083 8.36669,-18.6875 18.6875,-18.6875l224.25,0c10.32083,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36667,18.6875 -18.6875,18.6875l-18.6875,0l0,242.9375c0,10.32083 -8.36668,18.6875 -18.6875,18.6875l-224.25,0l0,0c-10.32083,0 -18.6875,-8.36667 -18.6875,-18.6875c0,-10.32083 8.36667,-18.6875 18.6875,-18.6875zm37.375,-261.625l0,0c10.32081,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36669,18.6875 -18.6875,18.6875c-5.1604,0 -9.34375,-4.18335 -9.34375,-9.34375c0,-5.16041 4.18335,-9.34375 9.34375,-9.34375l18.6875,0m186.875,18.6875l-205.5625,0m-37.375,224.25l0,0c5.1604,0 9.34375,4.18335 9.34375,9.34375c0,5.1604 -4.18335,9.34375 -9.34375,9.34375l18.6875,0m-18.6875,18.6875l0,0c10.32081,0 18.6875,-8.36667 18.6875,-18.6875l0,-18.6875',
|
||||
smiley: 'm68.49886,214.78838q81.06408,55.67332 161.93891,0m-144.36983,-109.9558c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57948,6.97517 15.57948,15.57949c0,8.60431 -6.97517,15.57947 -15.57948,15.57947c-8.60431,0 -15.57948,-6.97516 -15.57948,-15.57947m95.83109,0c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57947,6.97517 15.57947,15.57949c0,8.60431 -6.97516,15.57947 -15.57947,15.57947c-8.60429,0 -15.57948,-6.97516 -15.57948,-15.57947m-181.89903,44.73038l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296zm0,0l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296z',
|
||||
left_braket: 'm174.24565,298.5c-13.39009,0 -24.24489,-1.80908 -24.24489,-4.04065l0,-140.4187c0,-2.23158 -10.85481,-4.04065 -24.2449,-4.04065l0,0c13.39009,0 24.2449,-1.80907 24.2449,-4.04065l0,-140.4187l0,0c0,-2.23159 10.8548,-4.04066 24.24489,-4.04066',
|
||||
uml_actor: 'm40.5,100l219,0m-108.99991,94.00006l107,105m-107.00009,-106.00006l-100,106m99.5,-231l0,125m33.24219,-158.75781c0,18.35916 -14.88303,33.24219 -33.24219,33.24219c-18.35916,0 -33.2422,-14.88303 -33.2422,-33.24219c0.00002,-18.35915 14.88304,-33.24219 33.2422,-33.24219c18.35916,0 33.24219,14.88304 33.24219,33.24219z',
|
||||
dialog_balloon_1: 'm0.99786,35.96579l0,0c0,-19.31077 15.28761,-34.96524 34.14583,-34.96524l15.52084,0l0,0l74.50001,0l139.68748,0c9.05606,0 17.74118,3.68382 24.14478,10.24108c6.40356,6.55726 10.00107,15.45081 10.00107,24.72416l0,87.41311l0,0l0,52.44785l0,0c0,19.31078 -15.2876,34.96524 -34.14584,34.96524l-139.68748,0l-97.32507,88.90848l22.82506,-88.90848l-15.52084,0c-18.85822,0 -34.14583,-15.65446 -34.14583,-34.96524l0,0l0,-52.44785l0,0z',
|
||||
cloud: 'm182.05086,34.31005c-0.64743,0.02048 -1.27309,0.07504 -1.92319,0.13979c-10.40161,1.03605 -19.58215,7.63722 -24.24597,17.4734l-2.47269,7.44367c0.53346,-2.57959 1.35258,-5.08134 2.47269,-7.44367c-8.31731,-8.61741 -19.99149,-12.59487 -31.52664,-10.72866c-11.53516,1.8662 -21.55294,9.3505 -27.02773,20.19925c-15.45544,-9.51897 -34.72095,-8.94245 -49.62526,1.50272c-14.90431,10.44516 -22.84828,28.93916 -20.43393,47.59753l1.57977,7.58346c-0.71388,-2.48442 -1.24701,-5.01186 -1.57977,-7.58346l-0.2404,0.69894c-12.95573,1.4119 -23.58103,11.46413 -26.34088,24.91708c-2.75985,13.45294 2.9789,27.25658 14.21789,34.21291l17.54914,4.26352c-6.1277,0.50439 -12.24542,-0.9808 -17.54914,-4.26352c-8.66903,9.71078 -10.6639,24.08736 -4.94535,35.96027c5.71854,11.87289 17.93128,18.70935 30.53069,17.15887l7.65843,-2.02692c-2.46413,1.0314 -5.02329,1.70264 -7.65843,2.02692c7.15259,13.16728 19.01251,22.77237 32.93468,26.5945c13.92217,3.82214 28.70987,1.56322 41.03957,-6.25546c10.05858,15.86252 27.91113,24.19412 45.81322,21.38742c17.90208,-2.8067 32.66954,-16.26563 37.91438,-34.52742l1.82016,-10.20447c-0.27254,3.46677 -0.86394,6.87508 -1.82016,10.20447c12.31329,8.07489 27.80199,8.52994 40.52443,1.18819c12.72244,-7.34175 20.6609,-21.34155 20.77736,-36.58929l-4.56108,-22.7823l-17.96776,-15.41455c13.89359,8.70317 22.6528,21.96329 22.52884,38.19685c16.5202,0.17313 30.55292,-13.98268 36.84976,-30.22897c6.29684,-16.24631 3.91486,-34.76801 -6.2504,-48.68089c4.21637,-10.35873 3.96622,-22.14172 -0.68683,-32.29084c-4.65308,-10.14912 -13.23602,-17.69244 -23.55914,-20.65356c-2.31018,-13.45141 -11.83276,-24.27162 -24.41768,-27.81765c-12.58492,-3.54603 -25.98557,0.82654 -34.41142,11.25287l-5.11707,8.63186c1.30753,-3.12148 3.01521,-6.03101 5.11707,-8.63186c-5.93959,-8.19432 -15.2556,-12.8181 -24.96718,-12.51096z',
|
||||
cylinder: 'm299.0007,83.77844c0,18.28676 -66.70958,33.11111 -149.00002,33.11111m149.00002,-33.11111l0,0c0,18.28676 -66.70958,33.11111 -149.00002,33.11111c-82.29041,0 -148.99997,-14.82432 -148.99997,-33.11111m0,0l0,0c0,-18.28674 66.70956,-33.1111 148.99997,-33.1111c82.29044,0 149.00002,14.82436 149.00002,33.1111l0,132.44449c0,18.28674 -66.70958,33.11105 -149.00002,33.11105c-82.29041,0 -148.99997,-14.82431 -148.99997,-33.11105z',
|
||||
arrow_u_turn: 'm1.00059,299.00055l0,-167.62497l0,0c0,-72.00411 58.37087,-130.37499 130.375,-130.37499l0,0l0,0c34.57759,0 67.73898,13.7359 92.18906,38.18595c24.45006,24.45005 38.18593,57.61144 38.18593,92.18904l0,18.625l37.24997,0l-74.49995,74.50002l-74.50002,-74.50002l37.25,0l0,-18.625c0,-30.8589 -25.0161,-55.87498 -55.87498,-55.87498l0,0l0,0c-30.85892,0 -55.875,25.01608 -55.875,55.87498l0,167.62497z',
|
||||
arrow_left_up: 'm0.99865,224.5l74.50004,-74.5l0,37.25l111.74991,0l0,-111.75l-37.25,0l74.5,-74.5l74.5,74.5l-37.25,0l0,186.25l-186.24989,0l0,37.25l-74.50005,-74.5z',
|
||||
maximize: 'm1.00037,150.34581l55.30305,-55.30267l0,27.65093l22.17356,0l0,-44.21833l44.21825,0l0,-22.17357l-27.65095,0l55.30267,-55.30292l55.3035,55.30292l-27.65175,0l0,22.17357l44.21835,0l0,44.21833l22.17357,0l0,-27.65093l55.30345,55.30267l-55.30345,55.3035l0,-27.65175l-22.17357,0l0,44.21834l-44.21835,0l0,22.17355l27.65175,0l-55.3035,55.30348l-55.30267,-55.30348l27.65095,0l0,-22.17355l-44.21825,0l0,-44.21834l-22.17356,0l0,27.65175l-55.30305,-55.3035z',
|
||||
cross: 'm0.99844,99.71339l98.71494,0l0,-98.71495l101.26279,0l0,98.71495l98.71495,0l0,101.2628l-98.71495,0l0,98.71494l-101.26279,0l0,-98.71494l-98.71494,0z',
|
||||
plaque: 'm-0.00197,49.94376l0,0c27.5829,0 49.94327,-22.36036 49.94327,-49.94327l199.76709,0l0,0c0,27.5829 22.36037,49.94327 49.94325,49.94327l0,199.7671l0,0c-27.58289,0 -49.94325,22.36034 -49.94325,49.94325l-199.76709,0c0,-27.58292 -22.36037,-49.94325 -49.94327,-49.94325z',
|
||||
page: 'm249.3298,298.99744l9.9335,-39.73413l39.73413,-9.93355l-49.66763,49.66768l-248.33237,0l0,-298.00001l298.00001,0l0,248.33234'
|
||||
|
||||
},
|
||||
buttons: []
|
||||
}
|
||||
};
|
||||
modeId = 'shapelib';
|
||||
startClientPos = {};
|
||||
currentD = void 0, curShapeId = void 0, curShape = void 0, startX = void 0, startY = void 0;
|
||||
curLib = library.basic;
|
||||
buttons = [{
|
||||
id: 'tool_shapelib',
|
||||
type: 'mode_flyout', // _flyout
|
||||
position: 6,
|
||||
events: {
|
||||
click: function click() {
|
||||
canv.setMode(modeId);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('<style>').text('#shape_buttons {' + 'overflow: auto;' + 'width: 180px;' + 'max-height: 300px;' + 'display: table-cell;' + 'vertical-align: middle;' + '}' + '#shape_cats {' + 'min-width: 110px;' + 'display: table-cell;' + 'vertical-align: middle;' + 'height: 300px;' + '}' + '#shape_cats > div {' + 'line-height: 1em;' + 'padding: .5em;' + 'border:1px solid #B0B0B0;' + 'background: #E8E8E8;' + 'margin-bottom: -1px;' + '}' + '#shape_cats div:hover {' + 'background: #FFFFCC;' + '}' + '#shape_cats div.current {' + 'font-weight: bold;' + '}').appendTo('head');
|
||||
|
||||
var btnDiv = $('<div id="shape_buttons">');
|
||||
$('#tools_shapelib > *').wrapAll(btnDiv);
|
||||
|
||||
var shower = $('#tools_shapelib_show');
|
||||
|
||||
loadLibrary('basic');
|
||||
|
||||
// Do mouseup on parent element rather than each button
|
||||
$('#shape_buttons').mouseup(function (evt) {
|
||||
var btn = $(evt.target).closest('div.tool_button');
|
||||
|
||||
if (!btn.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var copy = btn.children().clone();
|
||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
||||
.mouseup();
|
||||
canv.setMode(modeId);
|
||||
|
||||
curShapeId = btn[0].id.substr((modeId + '_').length);
|
||||
currentD = curLib.data[curShapeId];
|
||||
|
||||
$('.tools_flyout').fadeOut();
|
||||
});
|
||||
|
||||
var shapeCats = $('<div id="shape_cats">');
|
||||
|
||||
var catStr = '';
|
||||
$.each(categories, function (id, label) {
|
||||
catStr += '<div data-cat=' + id + '>' + label + '</div>';
|
||||
});
|
||||
|
||||
shapeCats.html(catStr).children().bind('mouseup', function () {
|
||||
var catlink = $(this);
|
||||
catlink.siblings().removeClass('current');
|
||||
catlink.addClass('current');
|
||||
|
||||
loadLibrary(catlink.attr('data-cat'));
|
||||
// Get stuff
|
||||
return false;
|
||||
});
|
||||
|
||||
shapeCats.children().eq(0).addClass('current');
|
||||
|
||||
$('#tools_shapelib').append(shapeCats);
|
||||
|
||||
shower.mouseup(function () {
|
||||
canv.setMode(currentD ? modeId : 'select');
|
||||
});
|
||||
$('#tool_shapelib').remove();
|
||||
|
||||
var h = $('#tools_shapelib').height();
|
||||
$('#tools_shapelib').css({
|
||||
'margin-top': -(h / 2 - 15),
|
||||
'margin-left': 3
|
||||
});
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var mode = canv.getMode();
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
startX = opts.start_x;
|
||||
var x = startX;
|
||||
startY = opts.start_y;
|
||||
var y = startY;
|
||||
var curStyle = canv.getStyle();
|
||||
|
||||
startClientPos.x = opts.event.clientX;
|
||||
startClientPos.y = opts.event.clientY;
|
||||
|
||||
curShape = canv.addSVGElementFromJson({
|
||||
element: 'path',
|
||||
curStyles: true,
|
||||
attr: {
|
||||
d: currentD,
|
||||
id: canv.getNextId(),
|
||||
opacity: curStyle.opacity / 2,
|
||||
style: 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
|
||||
// Make sure shape uses absolute values
|
||||
if (/[a-z]/.test(currentD)) {
|
||||
currentD = curLib.data[curShapeId] = canv.pathActions.convertPath(curShape);
|
||||
curShape.setAttribute('d', currentD);
|
||||
canv.pathActions.fixEnd(curShape);
|
||||
}
|
||||
curShape.setAttribute('transform', 'translate(' + x + ',' + y + ') scale(0.005) translate(' + -x + ',' + -y + ')');
|
||||
|
||||
canv.recalculateDimensions(curShape);
|
||||
|
||||
/* const tlist = */canv.getTransformList(curShape);
|
||||
|
||||
lastBBox = curShape.getBBox();
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
var mode = canv.getMode();
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var zoom = canv.getZoom();
|
||||
var evt = opts.event;
|
||||
|
||||
var x = opts.mouse_x / zoom;
|
||||
var y = opts.mouse_y / zoom;
|
||||
|
||||
var tlist = canv.getTransformList(curShape),
|
||||
box = curShape.getBBox(),
|
||||
left = box.x,
|
||||
top = box.y;
|
||||
// {width, height} = box,
|
||||
// const dx = (x - startX), dy = (y - startY);
|
||||
|
||||
var newbox = {
|
||||
x: Math.min(startX, x),
|
||||
y: Math.min(startY, y),
|
||||
width: Math.abs(x - startX),
|
||||
height: Math.abs(y - startY)
|
||||
};
|
||||
|
||||
/*
|
||||
// This is currently serving no purpose, so commenting out
|
||||
let sy = height ? (height + dy) / height : 1,
|
||||
sx = width ? (width + dx) / width : 1;
|
||||
*/
|
||||
|
||||
var sx = newbox.width / lastBBox.width || 1;
|
||||
var sy = newbox.height / lastBBox.height || 1;
|
||||
|
||||
// Not perfect, but mostly works...
|
||||
var tx = 0;
|
||||
if (x < startX) {
|
||||
tx = lastBBox.width;
|
||||
}
|
||||
var ty = 0;
|
||||
if (y < startY) {
|
||||
ty = lastBBox.height;
|
||||
}
|
||||
|
||||
// update the transform list with translate,scale,translate
|
||||
var translateOrigin = svgroot.createSVGTransform(),
|
||||
scale = svgroot.createSVGTransform(),
|
||||
translateBack = svgroot.createSVGTransform();
|
||||
|
||||
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
||||
if (!evt.shiftKey) {
|
||||
var max = Math.min(Math.abs(sx), Math.abs(sy));
|
||||
|
||||
sx = max * (sx < 0 ? -1 : 1);
|
||||
sy = max * (sy < 0 ? -1 : 1);
|
||||
}
|
||||
scale.setScale(sx, sy);
|
||||
|
||||
translateBack.setTranslate(left + tx, top + ty);
|
||||
tlist.appendItem(translateBack);
|
||||
tlist.appendItem(scale);
|
||||
tlist.appendItem(translateOrigin);
|
||||
|
||||
canv.recalculateDimensions(curShape);
|
||||
|
||||
lastBBox = curShape.getBBox();
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
var mode = canv.getMode();
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
||||
|
||||
return {
|
||||
keep: keepObject,
|
||||
element: curShape,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
case 19:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}],
|
||||
callback: function callback() {
|
||||
$('<style>').text('#shape_buttons {' + 'overflow: auto;' + 'width: 180px;' + 'max-height: 300px;' + 'display: table-cell;' + 'vertical-align: middle;' + '}' + '#shape_cats {' + 'min-width: 110px;' + 'display: table-cell;' + 'vertical-align: middle;' + 'height: 300px;' + '}' + '#shape_cats > div {' + 'line-height: 1em;' + 'padding: .5em;' + 'border:1px solid #B0B0B0;' + 'background: #E8E8E8;' + 'margin-bottom: -1px;' + '}' + '#shape_cats div:hover {' + 'background: #FFFFCC;' + '}' + '#shape_cats div.current {' + 'font-weight: bold;' + '}').appendTo('head');
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
var btnDiv = $('<div id="shape_buttons">');
|
||||
$('#tools_shapelib > *').wrapAll(btnDiv);
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
var shower = $('#tools_shapelib_show');
|
||||
|
||||
loadLibrary('basic');
|
||||
|
||||
// Do mouseup on parent element rather than each button
|
||||
$('#shape_buttons').mouseup(function (evt) {
|
||||
var btn = $(evt.target).closest('div.tool_button');
|
||||
|
||||
if (!btn.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var copy = btn.children().clone();
|
||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
||||
.mouseup();
|
||||
canv.setMode(modeId);
|
||||
|
||||
curShapeId = btn[0].id.substr((modeId + '_').length);
|
||||
currentD = curLib.data[curShapeId];
|
||||
|
||||
$('.tools_flyout').fadeOut();
|
||||
});
|
||||
|
||||
var shapeCats = $('<div id="shape_cats">');
|
||||
|
||||
var catStr = '';
|
||||
$.each(categories, function (id, label) {
|
||||
catStr += '<div data-cat=' + id + '>' + label + '</div>';
|
||||
});
|
||||
|
||||
shapeCats.html(catStr).children().bind('mouseup', function () {
|
||||
var catlink = $(this);
|
||||
catlink.siblings().removeClass('current');
|
||||
catlink.addClass('current');
|
||||
|
||||
loadLibrary(catlink.attr('data-cat'));
|
||||
// Get stuff
|
||||
return false;
|
||||
});
|
||||
|
||||
shapeCats.children().eq(0).addClass('current');
|
||||
|
||||
$('#tools_shapelib').append(shapeCats);
|
||||
|
||||
shower.mouseup(function () {
|
||||
canv.setMode(currentD ? modeId : 'select');
|
||||
});
|
||||
$('#tool_shapelib').remove();
|
||||
|
||||
var h = $('#tools_shapelib').height();
|
||||
$('#tools_shapelib').css({
|
||||
'margin-top': -(h / 2 - 15),
|
||||
'margin-left': 3
|
||||
});
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var mode = canv.getMode();
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
startX = opts.start_x;
|
||||
var x = startX;
|
||||
startY = opts.start_y;
|
||||
var y = startY;
|
||||
var curStyle = canv.getStyle();
|
||||
|
||||
startClientPos.x = opts.event.clientX;
|
||||
startClientPos.y = opts.event.clientY;
|
||||
|
||||
curShape = canv.addSvgElementFromJson({
|
||||
element: 'path',
|
||||
curStyles: true,
|
||||
attr: {
|
||||
d: currentD,
|
||||
id: canv.getNextId(),
|
||||
opacity: curStyle.opacity / 2,
|
||||
style: 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
|
||||
// Make sure shape uses absolute values
|
||||
if (/[a-z]/.test(currentD)) {
|
||||
currentD = curLib.data[curShapeId] = canv.pathActions.convertPath(curShape);
|
||||
curShape.setAttribute('d', currentD);
|
||||
canv.pathActions.fixEnd(curShape);
|
||||
}
|
||||
curShape.setAttribute('transform', 'translate(' + x + ',' + y + ') scale(0.005) translate(' + -x + ',' + -y + ')');
|
||||
|
||||
canv.recalculateDimensions(curShape);
|
||||
|
||||
/* const tlist = */canv.getTransformList(curShape);
|
||||
|
||||
lastBBox = curShape.getBBox();
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
var mode = canv.getMode();
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var zoom = canv.getZoom();
|
||||
var evt = opts.event;
|
||||
|
||||
var x = opts.mouse_x / zoom;
|
||||
var y = opts.mouse_y / zoom;
|
||||
|
||||
var tlist = canv.getTransformList(curShape),
|
||||
box = curShape.getBBox(),
|
||||
left = box.x,
|
||||
top = box.y;
|
||||
// {width, height} = box,
|
||||
// const dx = (x - startX), dy = (y - startY);
|
||||
|
||||
var newbox = {
|
||||
x: Math.min(startX, x),
|
||||
y: Math.min(startY, y),
|
||||
width: Math.abs(x - startX),
|
||||
height: Math.abs(y - startY)
|
||||
};
|
||||
|
||||
/*
|
||||
// This is currently serving no purpose, so commenting out
|
||||
let sy = height ? (height + dy) / height : 1,
|
||||
sx = width ? (width + dx) / width : 1;
|
||||
*/
|
||||
|
||||
var sx = newbox.width / lastBBox.width || 1;
|
||||
var sy = newbox.height / lastBBox.height || 1;
|
||||
|
||||
// Not perfect, but mostly works...
|
||||
var tx = 0;
|
||||
if (x < startX) {
|
||||
tx = lastBBox.width;
|
||||
}
|
||||
var ty = 0;
|
||||
if (y < startY) {
|
||||
ty = lastBBox.height;
|
||||
}
|
||||
|
||||
// update the transform list with translate,scale,translate
|
||||
var translateOrigin = svgroot.createSVGTransform(),
|
||||
scale = svgroot.createSVGTransform(),
|
||||
translateBack = svgroot.createSVGTransform();
|
||||
|
||||
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
||||
if (!evt.shiftKey) {
|
||||
var max = Math.min(Math.abs(sx), Math.abs(sy));
|
||||
|
||||
sx = max * (sx < 0 ? -1 : 1);
|
||||
sy = max * (sy < 0 ? -1 : 1);
|
||||
}
|
||||
scale.setScale(sx, sy);
|
||||
|
||||
translateBack.setTranslate(left + tx, top + ty);
|
||||
tlist.appendItem(translateBack);
|
||||
tlist.appendItem(scale);
|
||||
tlist.appendItem(translateOrigin);
|
||||
|
||||
canv.recalculateDimensions(curShape);
|
||||
|
||||
lastBBox = curShape.getBBox();
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
var mode = canv.getMode();
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
||||
|
||||
return {
|
||||
keep: keepObject,
|
||||
element: curShape,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extShapes;
|
||||
|
|
|
|||
|
|
@ -1,249 +1,290 @@
|
|||
var svgEditorExtension_star = (function () {
|
||||
'use strict';
|
||||
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/* globals jQuery */
|
||||
/*
|
||||
/**
|
||||
* ext-star.js
|
||||
*
|
||||
*
|
||||
* Copyright(c) 2010 CloudCanvas, Inc.
|
||||
* All rights reserved
|
||||
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||
*
|
||||
*/
|
||||
var extStar = {
|
||||
name: 'star',
|
||||
init: function init(S) {
|
||||
var svgEditor = this;
|
||||
var $ = jQuery;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
init: function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(S) {
|
||||
var svgEditor, $, svgCanvas, importLocale, selElems, started, newFO, strings, showPanel, setAttr, buttons, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
setAttr = function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
S.call('changed', selElems);
|
||||
};
|
||||
|
||||
var // {svgcontent} = S,
|
||||
selElems = void 0,
|
||||
showPanel = function showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#star_panel').toggle(on);
|
||||
};
|
||||
|
||||
// editingitex = false,
|
||||
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||
started = void 0,
|
||||
newFO = void 0;
|
||||
// edg = 0,
|
||||
// newFOG, newFOGParent, newDef, newImageName, newMaskID,
|
||||
// undoCommand = 'Not image',
|
||||
// modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
|
||||
svgEditor = this;
|
||||
$ = jQuery;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
importLocale = S.importLocale; // {svgcontent},
|
||||
|
||||
function showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#star_panel').toggle(on);
|
||||
}
|
||||
selElems = void 0, started = void 0, newFO = void 0;
|
||||
// edg = 0,
|
||||
// newFOG, newFOGParent, newDef, newImageName, newMaskID,
|
||||
// undoCommand = 'Not image',
|
||||
// modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
|
||||
|
||||
/*
|
||||
function toggleSourceButtons(on){
|
||||
$('#star_save, #star_cancel').toggle(on);
|
||||
}
|
||||
*/
|
||||
_context.next = 9;
|
||||
return importLocale();
|
||||
|
||||
function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
S.call('changed', selElems);
|
||||
}
|
||||
case 9:
|
||||
strings = _context.sent;
|
||||
|
||||
/*
|
||||
function cot(n){
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
function sec(n){
|
||||
return 1 / Math.cos(n);
|
||||
}
|
||||
*/
|
||||
|
||||
return {
|
||||
name: 'star',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
|
||||
buttons: [{
|
||||
id: 'tool_star',
|
||||
type: 'mode',
|
||||
title: 'Star Tool',
|
||||
position: 12,
|
||||
events: {
|
||||
click: function click() {
|
||||
showPanel(true);
|
||||
svgCanvas.setMode('star');
|
||||
}
|
||||
}
|
||||
}],
|
||||
|
||||
context_tools: [{
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
title: 'Number of Sides',
|
||||
id: 'starNumPoints',
|
||||
label: 'points',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('point', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
title: 'Pointiness',
|
||||
id: 'starRadiusMulitplier',
|
||||
label: 'Pointiness',
|
||||
size: 3,
|
||||
defval: 2.5
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
title: 'Twists the star',
|
||||
id: 'radialShift',
|
||||
label: 'Radial Shift',
|
||||
size: 3,
|
||||
defval: 0,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('radialshift', this.value);
|
||||
}
|
||||
}
|
||||
}],
|
||||
callback: function callback() {
|
||||
$('#star_panel').hide();
|
||||
// const endChanges = function(){};
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var rgb = svgCanvas.getColor('fill');
|
||||
// const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
var sRgb = svgCanvas.getColor('stroke');
|
||||
// const ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
var sWidth = svgCanvas.getStrokeWidth();
|
||||
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
started = true;
|
||||
|
||||
newFO = S.addSvgElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: S.getNextId(),
|
||||
shape: 'star',
|
||||
point: document.getElementById('starNumPoints').value,
|
||||
r: 0,
|
||||
radialshift: document.getElementById('radialShift').value,
|
||||
r2: 0,
|
||||
orient: 'point',
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
if (!started) {
|
||||
return;
|
||||
}
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
var c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
|
||||
|
||||
var x = opts.mouse_x;
|
||||
var y = opts.mouse_y;
|
||||
var cx = c.cx,
|
||||
cy = c.cy,
|
||||
fill = c.fill,
|
||||
strokecolor = c.strokecolor,
|
||||
strokeWidth = c.strokeWidth,
|
||||
radialshift = c.radialshift,
|
||||
point = c.point,
|
||||
orient = c.orient,
|
||||
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
|
||||
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
|
||||
|
||||
newFO.setAttributeNS(null, 'r', circumradius);
|
||||
newFO.setAttributeNS(null, 'r2', inradius);
|
||||
|
||||
var polyPoints = '';
|
||||
for (var s = 0; point >= s; s++) {
|
||||
var angle = 2.0 * Math.PI * (s / point);
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
|
||||
if (inradius != null) {
|
||||
angle = 2.0 * Math.PI * (s / point) + Math.PI / point;
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
/*
|
||||
function cot(n){
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
angle += radialshift;
|
||||
function sec(n){
|
||||
return 1 / Math.cos(n);
|
||||
}
|
||||
*/
|
||||
buttons = [{
|
||||
id: 'tool_star',
|
||||
type: 'mode',
|
||||
position: 12,
|
||||
events: {
|
||||
click: function click() {
|
||||
showPanel(true);
|
||||
svgCanvas.setMode('star');
|
||||
}
|
||||
}
|
||||
}];
|
||||
contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'starNumPoints',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('point', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'starRadiusMulitplier',
|
||||
size: 3,
|
||||
defval: 2.5
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'radialShift',
|
||||
size: 3,
|
||||
defval: 0,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('radialshift', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#star_panel').hide();
|
||||
// const endChanges = function(){};
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var rgb = svgCanvas.getColor('fill');
|
||||
// const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
var sRgb = svgCanvas.getColor('stroke');
|
||||
// const ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
var sWidth = svgCanvas.getStrokeWidth();
|
||||
|
||||
x = inradius * Math.cos(angle) + cx;
|
||||
y = inradius * Math.sin(angle) + cy;
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
started = true;
|
||||
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
}
|
||||
}
|
||||
newFO.setAttributeNS(null, 'points', polyPoints);
|
||||
newFO.setAttributeNS(null, 'fill', fill);
|
||||
newFO.setAttributeNS(null, 'stroke', strokecolor);
|
||||
newFO.setAttributeNS(null, 'stroke-width', strokeWidth);
|
||||
/* const shape = */newFO.getAttributeNS(null, 'shape');
|
||||
newFO = S.addSVGElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: S.getNextId(),
|
||||
shape: 'star',
|
||||
point: document.getElementById('starNumPoints').value,
|
||||
r: 0,
|
||||
radialshift: document.getElementById('radialShift').value,
|
||||
r2: 0,
|
||||
orient: 'point',
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
if (!started) {
|
||||
return;
|
||||
}
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
var c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp() {
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
var attrs = $(newFO).attr(['r']);
|
||||
// svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep: attrs.r !== '0',
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
var x = opts.mouse_x;
|
||||
var y = opts.mouse_y;
|
||||
var cx = c.cx,
|
||||
cy = c.cy,
|
||||
fill = c.fill,
|
||||
strokecolor = c.strokecolor,
|
||||
strokeWidth = c.strokeWidth,
|
||||
radialshift = c.radialshift,
|
||||
point = c.point,
|
||||
orient = c.orient,
|
||||
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
|
||||
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
|
||||
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.getAttributeNS(null, 'shape') === 'star') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
// $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
|
||||
$('#starNumPoints').val(elem.getAttribute('point'));
|
||||
$('#radialShift').val(elem.getAttribute('radialshift'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
newFO.setAttributeNS(null, 'r', circumradius);
|
||||
newFO.setAttributeNS(null, 'r2', inradius);
|
||||
|
||||
var polyPoints = '';
|
||||
for (var s = 0; point >= s; s++) {
|
||||
var angle = 2.0 * Math.PI * (s / point);
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
|
||||
if (inradius != null) {
|
||||
angle = 2.0 * Math.PI * (s / point) + Math.PI / point;
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
angle += radialshift;
|
||||
|
||||
x = inradius * Math.cos(angle) + cx;
|
||||
y = inradius * Math.sin(angle) + cy;
|
||||
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
}
|
||||
}
|
||||
newFO.setAttributeNS(null, 'points', polyPoints);
|
||||
newFO.setAttributeNS(null, 'fill', fill);
|
||||
newFO.setAttributeNS(null, 'stroke', strokecolor);
|
||||
newFO.setAttributeNS(null, 'stroke-width', strokeWidth);
|
||||
/* const shape = */newFO.getAttributeNS(null, 'shape');
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mouseUp: function mouseUp() {
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
var attrs = $(newFO).attr(['r']);
|
||||
// svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep: attrs.r !== '0',
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var i = selElems.length;
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
if (elem && elem.getAttributeNS(null, 'shape') === 'star') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
// $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
|
||||
$('#starNumPoints').val(elem.getAttribute('point'));
|
||||
$('#radialShift').val(elem.getAttribute('radialshift'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
|
||||
case 13:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
};
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extStar;
|
||||
|
|
|
|||
|
|
@ -30,174 +30,29 @@ var svgEditorExtension_storage = (function () {
|
|||
};
|
||||
};
|
||||
|
||||
var _extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// MIT License
|
||||
// From: https://github.com/uupaa/dynamic-import-polyfill/blob/master/importModule.js
|
||||
|
||||
function toAbsoluteURL(url) {
|
||||
var a = document.createElement('a');
|
||||
a.setAttribute('href', url); // <a href="hoge.html">
|
||||
return a.cloneNode(false).href; // -> "http://example.com/hoge.html"
|
||||
}
|
||||
|
||||
function addScriptAtts(script, atts) {
|
||||
['id', 'class', 'type'].forEach(function (prop) {
|
||||
if (prop in atts) {
|
||||
script[prop] = atts[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Additions by Brett
|
||||
var importSetGlobalDefault = function () {
|
||||
var _ref = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url, config) {
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
return _context.abrupt('return', importSetGlobal(url, _extends({}, config, { returnDefault: true })));
|
||||
|
||||
case 1:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
return function importSetGlobalDefault(_x, _x2) {
|
||||
return _ref.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
var importSetGlobal = function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url, _ref2) {
|
||||
var global = _ref2.global,
|
||||
returnDefault = _ref2.returnDefault;
|
||||
var modularVersion;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
// Todo: Replace calls to this function with `import()` when supported
|
||||
modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
||||
|
||||
if (!modularVersion) {
|
||||
_context2.next = 3;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context2.abrupt('return', importModule(url, undefined, { returnDefault: returnDefault }));
|
||||
|
||||
case 3:
|
||||
_context2.next = 5;
|
||||
return importScript(url);
|
||||
|
||||
case 5:
|
||||
return _context2.abrupt('return', window[global]);
|
||||
|
||||
case 6:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this);
|
||||
}));
|
||||
|
||||
return function importSetGlobal(_x3, _x4) {
|
||||
return _ref3.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
// Addition by Brett
|
||||
function importScript(url) {
|
||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
if (Array.isArray(url)) {
|
||||
return Promise.all(url.map(function (u) {
|
||||
return importScript(u, atts);
|
||||
}));
|
||||
}
|
||||
return new Promise(function (resolve, reject) {
|
||||
var script = document.createElement('script');
|
||||
var destructor = function destructor() {
|
||||
script.onerror = null;
|
||||
script.onload = null;
|
||||
script.remove();
|
||||
script.src = '';
|
||||
};
|
||||
script.defer = 'defer';
|
||||
addScriptAtts(script, atts);
|
||||
script.onerror = function () {
|
||||
reject(new Error('Failed to import: ' + url));
|
||||
destructor();
|
||||
};
|
||||
script.onload = function () {
|
||||
resolve();
|
||||
destructor();
|
||||
};
|
||||
script.src = url;
|
||||
|
||||
document.head.append(script);
|
||||
});
|
||||
}
|
||||
|
||||
function importModule(url) {
|
||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
||||
_ref4$returnDefault = _ref4.returnDefault,
|
||||
returnDefault = _ref4$returnDefault === undefined ? false : _ref4$returnDefault;
|
||||
|
||||
if (Array.isArray(url)) {
|
||||
return Promise.all(url.map(function (u) {
|
||||
return importModule(u, atts);
|
||||
}));
|
||||
}
|
||||
return new Promise(function (resolve, reject) {
|
||||
var vector = '$importModule$' + Math.random().toString(32).slice(2);
|
||||
var script = document.createElement('script');
|
||||
var destructor = function destructor() {
|
||||
delete window[vector];
|
||||
script.onerror = null;
|
||||
script.onload = null;
|
||||
script.remove();
|
||||
URL.revokeObjectURL(script.src);
|
||||
script.src = '';
|
||||
};
|
||||
addScriptAtts(script, atts);
|
||||
script.defer = 'defer';
|
||||
script.type = 'module';
|
||||
script.onerror = function () {
|
||||
reject(new Error('Failed to import: ' + url));
|
||||
destructor();
|
||||
};
|
||||
script.onload = function () {
|
||||
resolve(window[vector]);
|
||||
destructor();
|
||||
};
|
||||
var absURL = toAbsoluteURL(url);
|
||||
var loader = 'import * as m from \'' + absURL.replace(/'/g, "\\'") + '\'; window.' + vector + ' = ' + (returnDefault ? 'm.default || ' : '') + 'm;'; // export Module
|
||||
var blob = new Blob([loader], { type: 'text/javascript' });
|
||||
script.src = URL.createObjectURL(blob);
|
||||
|
||||
document.head.append(script);
|
||||
});
|
||||
}
|
||||
|
||||
/* globals jQuery */
|
||||
|
||||
/**
|
||||
* ext-storage.js
|
||||
*
|
||||
* This extension allows automatic saving of the SVG canvas contents upon
|
||||
* page unload (which can later be automatically retrieved upon future
|
||||
* editor loads).
|
||||
*
|
||||
* The functionality was originally part of the SVG Editor, but moved to a
|
||||
* separate extension to make the setting behavior optional, and adapted
|
||||
* to inform the user of its setting of local data.
|
||||
* Dependencies:
|
||||
*
|
||||
* 1. jQuery BBQ (for deparam)
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Brett Zamir
|
||||
* @todo Revisit on whether to use $.pref over directly setting curConfig in all
|
||||
* extensions for a more public API (not only for extPath and imagePath,
|
||||
* but other currently used config in the extensions)
|
||||
* @todo We might provide control of storage settings through the UI besides the
|
||||
* initial (or URL-forced) dialog. *
|
||||
*/
|
||||
var extStorage = {
|
||||
name: 'storage',
|
||||
init: function init() {
|
||||
|
|
@ -312,74 +167,34 @@ var svgEditorExtension_storage = (function () {
|
|||
return {
|
||||
name: 'storage',
|
||||
langReady: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref) {
|
||||
var tryImport = function () {
|
||||
var _ref3 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(lang) {
|
||||
var url;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
url = svgEditor.curConfig.extPath + 'ext-locale/storage/' + lang + '.js';
|
||||
_context.next = 3;
|
||||
return importSetGlobalDefault(url, {
|
||||
global: 'svgEditorExtensionLocale_storage_' + lang
|
||||
});
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
|
||||
case 3:
|
||||
confirmSetStorage = _context.sent;
|
||||
var _$$deparam$querystrin, storagePrompt, confirmSetStorage, message, storagePrefsAndContent, storagePrefsOnly, storagePrefs, storageNoPrefsOrContent, storageNoPrefs, rememberLabel, rememberTooltip, options, oldContainerWidth, oldContainerMarginLeft, oldContentHeight, oldContainerHeight;
|
||||
|
||||
case 4:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
return function tryImport(_x2) {
|
||||
return _ref3.apply(this, arguments);
|
||||
};
|
||||
}();
|
||||
|
||||
var lang = _ref.lang;
|
||||
|
||||
var _$$deparam$querystrin, storagePrompt, confirmSetStorage, _confirmSetStorage, message, storagePrefsAndContent, storagePrefsOnly, storagePrefs, storageNoPrefsOrContent, storageNoPrefs, rememberLabel, rememberTooltip, options, oldContainerWidth, oldContainerMarginLeft, oldContentHeight, oldContainerHeight;
|
||||
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_$$deparam$querystrin = $.deparam.querystring(true), storagePrompt = _$$deparam$querystrin.storagePrompt;
|
||||
confirmSetStorage = void 0;
|
||||
_context2.prev = 2;
|
||||
_context2.next = 5;
|
||||
return tryImport(lang);
|
||||
_context.next = 3;
|
||||
return importLocale();
|
||||
|
||||
case 5:
|
||||
_context2.next = 11;
|
||||
break;
|
||||
|
||||
case 7:
|
||||
_context2.prev = 7;
|
||||
_context2.t0 = _context2['catch'](2);
|
||||
_context2.next = 11;
|
||||
return tryImport('en');
|
||||
|
||||
case 11:
|
||||
_confirmSetStorage = confirmSetStorage, message = _confirmSetStorage.message, storagePrefsAndContent = _confirmSetStorage.storagePrefsAndContent, storagePrefsOnly = _confirmSetStorage.storagePrefsOnly, storagePrefs = _confirmSetStorage.storagePrefs, storageNoPrefsOrContent = _confirmSetStorage.storageNoPrefsOrContent, storageNoPrefs = _confirmSetStorage.storageNoPrefs, rememberLabel = _confirmSetStorage.rememberLabel, rememberTooltip = _confirmSetStorage.rememberTooltip;
|
||||
case 3:
|
||||
confirmSetStorage = _context.sent;
|
||||
message = confirmSetStorage.message, storagePrefsAndContent = confirmSetStorage.storagePrefsAndContent, storagePrefsOnly = confirmSetStorage.storagePrefsOnly, storagePrefs = confirmSetStorage.storagePrefs, storageNoPrefsOrContent = confirmSetStorage.storageNoPrefsOrContent, storageNoPrefs = confirmSetStorage.storageNoPrefs, rememberLabel = confirmSetStorage.rememberLabel, rememberTooltip = confirmSetStorage.rememberTooltip;
|
||||
|
||||
// No need to run this one-time dialog again just because the user
|
||||
// changes the language
|
||||
|
||||
if (!loaded) {
|
||||
_context2.next = 14;
|
||||
_context.next = 7;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context2.abrupt('return');
|
||||
return _context.abrupt('return');
|
||||
|
||||
case 14:
|
||||
case 7:
|
||||
loaded = true;
|
||||
|
||||
// Note that the following can load even if "noStorageOnLoad" is
|
||||
|
|
@ -476,12 +291,12 @@ var svgEditorExtension_storage = (function () {
|
|||
setupBeforeUnloadListener();
|
||||
}
|
||||
|
||||
case 16:
|
||||
case 9:
|
||||
case 'end':
|
||||
return _context2.stop();
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2, this, [[2, 7]]);
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function langReady(_x) {
|
||||
|
|
|
|||
|
|
@ -1,72 +1,128 @@
|
|||
var svgEditorExtension_webappfind = (function () {
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
Depends on Firefox add-on and executables from https://github.com/brettz9/webappfind
|
||||
var asyncToGenerator = function (fn) {
|
||||
return function () {
|
||||
var gen = fn.apply(this, arguments);
|
||||
return new Promise(function (resolve, reject) {
|
||||
function step(key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
Todos:
|
||||
1. See WebAppFind Readme for SVG-related todos
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
return Promise.resolve(value).then(function (value) {
|
||||
step("next", value);
|
||||
}, function (err) {
|
||||
step("throw", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return step("next");
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Depends on Firefox add-on and executables from {@link https://github.com/brettz9/webappfind}
|
||||
* @author Brett Zamir
|
||||
* @license MIT
|
||||
* @todo See WebAppFind Readme for SVG-related todos
|
||||
*/
|
||||
|
||||
var extWebappfind = {
|
||||
name: 'WebAppFind',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
// Todo: Update to new API once released
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.origin !== window.location.origin || // PRIVACY AND SECURITY! (for viewing and saving, respectively)
|
||||
!Array.isArray(e.data) || excludedMessages.includes(e.data[0]) // Validate format and avoid our post below
|
||||
) {
|
||||
return;
|
||||
}
|
||||
var messageType = e.data[0];
|
||||
var svgString = void 0;
|
||||
switch (messageType) {
|
||||
case 'webapp-view':
|
||||
// Populate the contents
|
||||
pathID = e.data[1];
|
||||
name: 'webappfind',
|
||||
init: function () {
|
||||
var _ref2 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
|
||||
var importLocale = _ref.importLocale;
|
||||
var strings, svgEditor, saveMessage, readMessage, excludedMessages, pathID, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
_context.next = 2;
|
||||
return importLocale();
|
||||
|
||||
svgString = e.data[2];
|
||||
svgEditor.loadFromString(svgString);
|
||||
case 2:
|
||||
strings = _context.sent;
|
||||
svgEditor = this;
|
||||
// Todo: Update to new API once released
|
||||
|
||||
/* if ($('#tool_save_file')) {
|
||||
$('#tool_save_file').disabled = false;
|
||||
} */
|
||||
break;
|
||||
case 'webapp-save-end':
|
||||
alert('save complete for pathID ' + e.data[1] + '!');
|
||||
break;
|
||||
default:
|
||||
throw new Error('Unexpected mode');
|
||||
}
|
||||
}, false);
|
||||
var saveMessage = 'webapp-save',
|
||||
readMessage = 'webapp-read',
|
||||
excludedMessages = [readMessage, saveMessage];
|
||||
var pathID = void 0;
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.origin !== window.location.origin || // PRIVACY AND SECURITY! (for viewing and saving, respectively)
|
||||
!Array.isArray(e.data) || excludedMessages.includes(e.data[0]) // Validate format and avoid our post below
|
||||
) {
|
||||
return;
|
||||
}
|
||||
var messageType = e.data[0];
|
||||
var svgString = void 0;
|
||||
switch (messageType) {
|
||||
case 'webapp-view':
|
||||
// Populate the contents
|
||||
pathID = e.data[1];
|
||||
|
||||
window.postMessage([readMessage], window.location.origin !== 'null' ? window.location.origin : '*'); // Avoid "null" string error for file: protocol (even though file protocol not currently supported by add-on)
|
||||
svgString = e.data[2];
|
||||
svgEditor.loadFromString(svgString);
|
||||
|
||||
return {
|
||||
name: 'WebAppFind',
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
||||
buttons: [{
|
||||
id: 'webappfind_save', //
|
||||
type: 'app_menu',
|
||||
title: 'Save Image back to Disk',
|
||||
position: 4, // Before 0-based index position 4 (after the regular "Save Image (S)")
|
||||
events: {
|
||||
click: function click() {
|
||||
if (!pathID) {
|
||||
// Not ready yet as haven't received first payload
|
||||
return;
|
||||
}
|
||||
window.postMessage([saveMessage, pathID, svgEditor.canvas.getSvgString()], window.location.origin);
|
||||
/* if ($('#tool_save_file')) {
|
||||
$('#tool_save_file').disabled = false;
|
||||
} */
|
||||
break;
|
||||
case 'webapp-save-end':
|
||||
alert('save complete for pathID ' + e.data[1] + '!');
|
||||
break;
|
||||
default:
|
||||
throw new Error('Unexpected mode');
|
||||
}
|
||||
}, false);
|
||||
saveMessage = 'webapp-save', readMessage = 'webapp-read', excludedMessages = [readMessage, saveMessage];
|
||||
pathID = void 0;
|
||||
|
||||
|
||||
window.postMessage([readMessage], window.location.origin !== 'null' ? window.location.origin : '*'); // Avoid "null" string error for file: protocol (even though file protocol not currently supported by add-on)
|
||||
buttons = [{
|
||||
id: 'webappfind_save', //
|
||||
type: 'app_menu',
|
||||
position: 4, // Before 0-based index position 4 (after the regular "Save Image (S)")
|
||||
events: {
|
||||
click: function click() {
|
||||
if (!pathID) {
|
||||
// Not ready yet as haven't received first payload
|
||||
return;
|
||||
}
|
||||
window.postMessage([saveMessage, pathID, svgEditor.canvas.getSvgString()], window.location.origin);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt('return', {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
});
|
||||
|
||||
case 10:
|
||||
case 'end':
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
}, _callee, this);
|
||||
}));
|
||||
|
||||
function init(_x) {
|
||||
return _ref2.apply(this, arguments);
|
||||
}
|
||||
|
||||
return init;
|
||||
}()
|
||||
};
|
||||
|
||||
return extWebappfind;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ var svgEditorExtension_xdomain_messaging = (function () {
|
|||
return;
|
||||
}
|
||||
// The default is not to allow any origins, including even the same domain or if run on a file:// URL
|
||||
// See config-sample.js for an example of how to configure
|
||||
// See svgedit-config-es.js for an example of how to configure
|
||||
var allowedOrigins = svgEditor.curConfig.allowedOrigins;
|
||||
|
||||
if (!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin)) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -73,6 +73,13 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* For parsing color values
|
||||
* @module RGBColor
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
var simpleColors = {
|
||||
aliceblue: 'f0f8ff',
|
||||
antiquewhite: 'faebd7',
|
||||
|
|
@ -242,12 +249,12 @@
|
|||
|
||||
/**
|
||||
* A class to parse color values
|
||||
* @author Stoyan Stefanov <sstoo@gmail.com>
|
||||
* @link https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
var RGBColor = function () {
|
||||
/**
|
||||
* @param {string} colorString
|
||||
*/
|
||||
function RGBColor(colorString) {
|
||||
classCallCheck(this, RGBColor);
|
||||
|
||||
|
|
@ -294,6 +301,9 @@
|
|||
}
|
||||
|
||||
// some getters
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
createClass(RGBColor, [{
|
||||
|
|
@ -301,6 +311,11 @@
|
|||
value: function toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'toHex',
|
||||
value: function toHex() {
|
||||
|
|
@ -319,7 +334,10 @@
|
|||
return '#' + r + g + b;
|
||||
}
|
||||
|
||||
// help
|
||||
/**
|
||||
* help
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'getHelpXML',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_af = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_af = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_af = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ar = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ar = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ar = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_az = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_az = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_az = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_be = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_be = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_be = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_bg = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_bg = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_bg = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ca = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ca = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ca = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_cs = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_cs = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_cs = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_cy = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_cy = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_cy = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_da = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_da = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_da = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_de = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_de = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_de = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_el = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_el = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_el = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -111,7 +111,6 @@ var svgEditorLang_en = (function () {
|
|||
mode_circle: 'Circle',
|
||||
mode_fhellipse: 'Free-Hand Ellipse',
|
||||
mode_path: 'Path Tool',
|
||||
mode_shapelib: 'Shape library',
|
||||
mode_text: 'Text Tool',
|
||||
mode_image: 'Image Tool',
|
||||
mode_zoom: 'Zoom Tool [Ctrl+Up/Down]',
|
||||
|
|
@ -121,7 +120,6 @@ var svgEditorLang_en = (function () {
|
|||
redo: 'Redo [Y]',
|
||||
tool_source: 'Edit Source [U]',
|
||||
wireframe_mode: 'Wireframe Mode [F]',
|
||||
toggle_grid: 'Show/Hide Grid',
|
||||
clone: 'Duplicate Element [D]',
|
||||
del: 'Delete Element [Delete/Backspace]',
|
||||
group_elements: 'Group Elements [G]',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_es = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_es = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_es = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_et = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_et = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_et = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -108,7 +108,6 @@ var svgEditorLang_fa = (function () {
|
|||
mode_circle: 'دایره',
|
||||
mode_fhellipse: 'بیضی با قابلیت تغییر پویا',
|
||||
mode_path: 'ابزار مسیر ',
|
||||
mode_shapelib: 'Shape library',
|
||||
mode_text: 'ابزار متن ',
|
||||
mode_image: 'ابزار تصویر ',
|
||||
mode_zoom: 'ابزار بزرگ نمایی ',
|
||||
|
|
@ -118,7 +117,6 @@ var svgEditorLang_fa = (function () {
|
|||
redo: 'ازنو ',
|
||||
tool_source: 'ویرایش منبع ',
|
||||
wireframe_mode: 'حالت نمایش لبه ها ',
|
||||
toggle_grid: 'Show/Hide Grid',
|
||||
clone: 'Clone Element(s)',
|
||||
del: 'Delete Element(s)',
|
||||
group_elements: 'قرار دادن عناصر در گروه ',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_fi = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_fi = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_fi = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_fr = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_fr = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: "Bibliothèque d'images",
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_fr = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_fy = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_fy = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_fy = (function () {
|
|||
redo: "Op 'e nij",
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ga = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ga = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ga = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_gl = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_gl = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_gl = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_he = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_he = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_he = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_hi = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_hi = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_hi = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_hr = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_hr = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_hr = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_hu = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_hu = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_hu = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_hy = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_hy = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_hy = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_id = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_id = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_id = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_is = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_is = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_is = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_it = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_it = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_it = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ja = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ja = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ja = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ko = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ko = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ko = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_lt = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_lt = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_lt = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_lv = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_lv = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_lv = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_mk = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_mk = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_mk = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ms = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ms = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ms = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_mt = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_mt = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_mt = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_nl = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_nl = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_nl = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_no = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_no = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_no = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_pl = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_pl = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_pl = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_pt_BR = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_pt_BR = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_pt_BR = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_pt_PT = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_pt_PT = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_pt_PT = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ro = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ro = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ro = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_ru = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_ru = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_ru = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_sk = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_sk = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_sk = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_sl = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_sl = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_sl = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ var svgEditorLang_sq = (function () {
|
|||
mode_select: 'mode_select',
|
||||
mode_fhpath: 'mode_fhpath',
|
||||
mode_line: 'mode_line',
|
||||
mode_connect: 'mode_connect',
|
||||
mode_rect: 'mode_rect',
|
||||
mode_square: 'mode_square',
|
||||
mode_fhrect: 'mode_fhrect',
|
||||
|
|
@ -111,7 +110,6 @@ var svgEditorLang_sq = (function () {
|
|||
mode_circle: 'mode_circle',
|
||||
mode_fhellipse: 'mode_fhellipse',
|
||||
mode_path: 'mode_path',
|
||||
mode_shapelib: 'mode_shapelib',
|
||||
mode_text: 'mode_text',
|
||||
mode_image: 'mode_image',
|
||||
mode_zoom: 'mode_zoom',
|
||||
|
|
@ -121,7 +119,6 @@ var svgEditorLang_sq = (function () {
|
|||
redo: 'redo',
|
||||
tool_source: 'tool_source',
|
||||
wireframe_mode: 'wireframe_mode',
|
||||
toggle_grid: 'toggle_grid',
|
||||
clone: 'clone',
|
||||
del: 'del',
|
||||
group_elements: 'group_elements',
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue