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

- Security fix: 'extPath', 'imgPath', 'extIconsPath', 'canvgPath', 'langPath', 'jGraduatePath', and 'jspdfPath' were not being prevented

Browse Source 
- 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 Sinon
This commit is contained in:
Brett Zamir
2018-06-06 15:26:20 +08:00
parent 057f5a5dc2
commit a3f0b8e501
334 changed files with 60808 additions and 16650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

656
editor/canvg/StackBlur.js Normal file
View File

@@ -0,0 +1,656 @@
/**
* 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.
*/
const 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];
const 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|HTMLImageElement} img
* @param {string|HTMLCanvasElement} canvas
* @param {Float} radius
* @param {boolean} blurAlphaChannel
* @returns {undefined}
*/
function processImage (img, canvas, radius, blurAlphaChannel) {
if (typeof img === 'string') {
img = document.getElementById(img);
}
if (!img || !('naturalWidth' in img)) {
return;
}
const w = img.naturalWidth;
const h = img.naturalHeight;
if (typeof canvas === 'string') {
canvas = document.getElementById(canvas);
}
if (!canvas || !('getContext' in canvas)) {
return;
}
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;
const context = canvas.getContext('2d');
context.clearRect(0, 0, w, h);
context.drawImage(img, 0, 0);
if (isNaN(radius) || radius < 1) { return; }
if (blurAlphaChannel) {
processCanvasRGBA(canvas, 0, 0, w, h, radius);
} else {
processCanvasRGB(canvas, 0, 0, w, h, radius);
}
}
/**
* @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;
}
const 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;
let 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) {
const pixels = imageData.data;
let x, y, i, p, yp, yi, yw, rSum, gSum, bSum, aSum,
rOutSum, gOutSum, bOutSum, aOutSum,
rInSum, gInSum, bInSum, aInSum,
pr, pg, pb, pa, rbs;
const div = radius + radius + 1;
// const w4 = width << 2;
const widthMinus1 = width - 1;
const heightMinus1 = height - 1;
const radiusPlus1 = radius + 1;
const sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
const stackStart = new BlurStack();
let stack = stackStart;
let stackEnd;
for (i = 1; i < div; i++) {
stack = stack.next = new BlurStack();
if (i === radiusPlus1) {
stackEnd = stack;
}
}
stack.next = stackStart;
let stackIn = null;
let stackOut = null;
yw = yi = 0;
const mulSum = mulTable[radius];
const 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;
}
/**
* @param {HTMLCanvasElement} canvas
* @param {Integer} topX
* @param {Integer} topY
* @param {Integer} width
* @param {Integer} height
* @param {Float} radius
* @returns {undefined}
*/
function processCanvasRGB (canvas, topX, topY, width, height, radius) {
if (isNaN(radius) || radius < 1) { return; }
radius |= 0;
let imageData = getImageDataFromCanvas(canvas, topX, topY, width, height);
imageData = processImageDataRGB(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 processImageDataRGB (imageData, topX, topY, width, height, radius) {
const pixels = imageData.data;
let x, y, i, p, yp, yi, yw, rSum, gSum, bSum,
rOutSum, gOutSum, bOutSum,
rInSum, gInSum, bInSum,
pr, pg, pb, rbs;
const div = radius + radius + 1;
// const w4 = width << 2;
const widthMinus1 = width - 1;
const heightMinus1 = height - 1;
const radiusPlus1 = radius + 1;
const sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
const stackStart = new BlurStack();
let stack = stackStart;
let stackEnd;
for (i = 1; i < div; i++) {
stack = stack.next = new BlurStack();
if (i === radiusPlus1) {
stackEnd = stack;
}
}
stack.next = stackStart;
let stackIn = null;
let stackOut = null;
yw = yi = 0;
const mulSum = mulTable[radius];
const shgSum = shgTable[radius];
for (y = 0; y < height; y++) {
rInSum = gInSum = bInSum = rSum = gSum = bSum = 0;
rOutSum = radiusPlus1 * (pr = pixels[yi]);
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
rSum += sumFactor * pr;
gSum += sumFactor * pg;
bSum += sumFactor * pb;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
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;
rInSum += pr;
gInSum += pg;
bInSum += pb;
stack = stack.next;
}
stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++) {
pixels[yi] = (rSum * mulSum) >> shgSum;
pixels[yi + 1] = (gSum * mulSum) >> shgSum;
pixels[yi + 2] = (bSum * mulSum) >> shgSum;
rSum -= rOutSum;
gSum -= gOutSum;
bSum -= bOutSum;
rOutSum -= stackIn.r;
gOutSum -= stackIn.g;
bOutSum -= stackIn.b;
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]);
rSum += rInSum;
gSum += gInSum;
bSum += bInSum;
stackIn = stackIn.next;
rOutSum += (pr = stackOut.r);
gOutSum += (pg = stackOut.g);
bOutSum += (pb = stackOut.b);
rInSum -= pr;
gInSum -= pg;
bInSum -= pb;
stackOut = stackOut.next;
yi += 4;
}
yw += width;
}
for (x = 0; x < width; x++) {
gInSum = bInSum = rInSum = gSum = bSum = rSum = 0;
yi = x << 2;
rOutSum = radiusPlus1 * (pr = pixels[yi]);
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
rSum += sumFactor * pr;
gSum += sumFactor * pg;
bSum += sumFactor * pb;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
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;
rInSum += pr;
gInSum += pg;
bInSum += pb;
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] = (rSum * mulSum) >> shgSum;
pixels[p + 1] = (gSum * mulSum) >> shgSum;
pixels[p + 2] = (bSum * mulSum) >> shgSum;
rSum -= rOutSum;
gSum -= gOutSum;
bSum -= bOutSum;
rOutSum -= stackIn.r;
gOutSum -= stackIn.g;
bOutSum -= stackIn.b;
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]));
stackIn = stackIn.next;
rOutSum += (pr = stackOut.r);
gOutSum += (pg = stackOut.g);
bOutSum += (pb = stackOut.b);
rInSum -= pr;
gInSum -= pg;
bInSum -= pb;
stackOut = stackOut.next;
yi += width;
}
}
return imageData;
}
/**
*
*/
export class BlurStack {
constructor () {
this.r = 0;
this.g = 0;
this.b = 0;
this.a = 0;
this.next = null;
}
}
export {
/**
* @class module:StackBlur.image
* @see module:StackBlur~processImage
*/
processImage as image,
/**
* @class module:StackBlur.canvasRGBA
* @see module:StackBlur~processCanvasRGBA
*/
processCanvasRGBA as canvasRGBA,
/**
* @class module:StackBlur.canvasRGB
* @see module:StackBlur~processCanvasRGB
*/
processCanvasRGB as canvasRGB,
/**
* @class module:StackBlur.imageDataRGBA
* @see module:StackBlur~processImageDataRGBA
*/
processImageDataRGBA as imageDataRGBA,
/**
* @class module:StackBlur.imageDataRGB
* @see module:StackBlur~processImageDataRGB
*/
processImageDataRGB as imageDataRGB
};

85
editor/canvg/canvg.js
View File

@@ -1,33 +1,64 @@
/* eslint-disable new-cap */
/*
// Todo: Compare with latest canvg (add any improvements of ours) and add full JSDocs (denoting links to standard APIs and which are custom): https://github.com/canvg/canvg
/**
* canvg.js - Javascript SVG parser and renderer on Canvas
* MIT Licensed
* Gabe Lerner (gabelerner@gmail.com)
* http://code.google.com/p/canvg/
* @module canvg
* @license MIT
* @author Gabe Lerner <gabelerner@gmail.com>
* @see https://github.com/canvg/canvg
*/
import RGBColor from './rgbcolor.js';
import {canvasRGBA} from './StackBlur.js';
let stackBlurCanvasRGBA;
export const setStackBlurCanvasRGBA = (value) => {
stackBlurCanvasRGBA = value;
let canvasRGBA_ = canvasRGBA;
/**
* @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
*/
export const setStackBlurCanvasRGBA = (cb) => {
canvasRGBA_ = cb;
};
// 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
*/
export const canvg = function (target, s, opts) {
// no parameters
if (target == null && s == null && opts == null) {
@@ -69,6 +100,11 @@ export const canvg = function (target, s, opts) {
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) {
const svg = {opts};
@@ -2644,16 +2680,17 @@ function build (opts) {
}
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();
}
};

27
editor/canvg/rgbcolor.js
View File

@@ -1,3 +1,10 @@
/**
* For parsing color values
* @module RGBColor
* @author Stoyan Stefanov <sstoo@gmail.com>
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
* @license MIT
*/
const simpleColors = {
aliceblue: 'f0f8ff',
antiquewhite: 'faebd7',
@@ -183,11 +190,11 @@ const colorDefs = [
/**
* A class to parse color values
* @author Stoyan Stefanov <sstoo@gmail.com>
* @link https://www.phpied.com/rgb-color-parser-in-javascript/
* @license MIT
*/
class RGBColor {
export default class RGBColor {
/**
* @param {string} colorString
*/
constructor (colorString) {
this.ok = false;
@@ -225,10 +232,16 @@ class RGBColor {
}
// some getters
/**
* @returns {string}
*/
toRGB () {
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
}
/**
* @returns {string}
*/
toHex () {
let r = this.r.toString(16);
let g = this.g.toString(16);
@@ -239,7 +252,10 @@ class RGBColor {
return '#' + r + g + b;
}
// help
/**
* help
* @returns {HTMLUListElement}
*/
getHelpXML () {
const examples = [];
// add regexps
@@ -274,4 +290,3 @@ color: ${listColor.toHex()};`
return xml;
}
}
export default RGBColor;