From 25f8644e0b62b6da216d003d2d76984405daf7e9 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Tue, 4 Jan 2022 18:03:08 -0300 Subject: [PATCH] fix issue with PolyStar --- .../extensions/ext-polystar/ext-polystar.js | 39 +++++++++---------- src/svgcanvas/json.js | 4 +- src/svgcanvas/sanitize.js | 8 ++-- 3 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index e0c992b4..1d7dcadb 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -240,9 +240,9 @@ export default { }, mouseDown (opts) { if (svgCanvas.getMode() === 'star') { - const rgb = svgCanvas.getColor('fill') - const sRgb = svgCanvas.getColor('stroke') - const sWidth = svgCanvas.getStrokeWidth() + const fill = svgCanvas.getColor('fill') + const stroke = svgCanvas.getColor('stroke') + const strokeWidth = svgCanvas.getStrokeWidth() started = true newFO = svgCanvas.addSVGElementsFromJson({ element: 'polygon', @@ -256,9 +256,9 @@ export default { radialshift: $id('radialShift').value, r2: 0, orient: 'point', - fill: rgb, - strokecolor: sRgb, - strokeWidth: sWidth + fill, + stroke, + 'stroke-width': strokeWidth } }) return { @@ -266,12 +266,9 @@ export default { } } if (svgCanvas.getMode() === 'polygon') { - // const e = opts.event; - const rgb = svgCanvas.getColor('fill') - // const ccRgbEl = rgb.substring(1, rgb.length); - const sRgb = svgCanvas.getColor('stroke') - // ccSRgbEl = sRgb.substring(1, rgb.length); - const sWidth = svgCanvas.getStrokeWidth() + const fill = svgCanvas.getColor('fill') + const stroke = svgCanvas.getColor('stroke') + const strokeWidth = svgCanvas.getStrokeWidth() started = true newFO = svgCanvas.addSVGElementsFromJson({ element: 'polygon', @@ -283,9 +280,9 @@ export default { sides: $id('polySides').value, orient: 'x', edge: 0, - fill: rgb, - strokecolor: sRgb, - strokeWidth: sWidth + fill, + stroke, + 'stroke-width': strokeWidth } }) @@ -305,8 +302,8 @@ export default { const point = Number(newFO.getAttribute('point')) const orient = newFO.getAttribute('orient') const fill = newFO.getAttribute('fill') - const strokecolor = newFO.getAttribute('strokecolor') - const strokeWidth = Number(newFO.getAttribute('strokeWidth')) + const stroke = newFO.getAttribute('stroke') + const strokeWidth = Number(newFO.getAttribute('stroke-width')) const radialshift = Number(newFO.getAttribute('radialshift')) let x = opts.mouse_x @@ -352,7 +349,7 @@ export default { } newFO.setAttribute('points', polyPoints) newFO.setAttribute('fill', fill) - newFO.setAttribute('stroke', strokecolor) + newFO.setAttribute('stroke', stroke) newFO.setAttribute('stroke-width', strokeWidth) /* const shape = */ newFO.getAttribute('shape') @@ -366,8 +363,8 @@ export default { const sides = Number(newFO.getAttribute('sides')) // const orient = newFO.getAttribute('orient'); const fill = newFO.getAttribute('fill') - const strokecolor = newFO.getAttribute('strokecolor') - const strokeWidth = Number(newFO.getAttribute('strokeWidth')) + const stroke = newFO.getAttribute('stroke') + const strokeWidth = Number(newFO.getAttribute('stroke-width')) let x = opts.mouse_x let y = opts.mouse_y @@ -390,7 +387,7 @@ export default { // const poly = newFO.createElementNS(NS.SVG, 'polygon'); newFO.setAttribute('points', points) newFO.setAttribute('fill', fill) - newFO.setAttribute('stroke', strokecolor) + newFO.setAttribute('stroke', stroke) newFO.setAttribute('stroke-width', strokeWidth) return { started: true diff --git a/src/svgcanvas/json.js b/src/svgcanvas/json.js index 3537c9cf..80be6896 100644 --- a/src/svgcanvas/json.js +++ b/src/svgcanvas/json.js @@ -64,7 +64,7 @@ export const getJsonFromSvgElements = (data) => { * @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElementsFromJson} */ -export const addSVGElementsFromJson = function (data) { +export const addSVGElementsFromJson = (data) => { if (typeof data === 'string') return svgdoc_.createTextNode(data) let shape = getElement(data.attr.id) @@ -86,7 +86,7 @@ export const addSVGElementsFromJson = function (data) { assignAttributes(shape, { fill: curShape.fill, stroke: curShape.stroke, - 'stroke-width': curShape.stroke_width, + 'stroke-width': curShape.strokeWidth, 'stroke-dasharray': curShape.stroke_dasharray, 'stroke-linejoin': curShape.stroke_linejoin, 'stroke-linecap': curShape.stroke_linecap, diff --git a/src/svgcanvas/sanitize.js b/src/svgcanvas/sanitize.js index 09d3cd6d..7b9951d2 100644 --- a/src/svgcanvas/sanitize.js +++ b/src/svgcanvas/sanitize.js @@ -47,7 +47,7 @@ const svgWhiteList_ = { metadata: [], path: ['clip-path', 'clip-rule', 'd', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'], pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'], - polygon: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift'], + polygon: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift', 'r2', 'orient', 'cx', 'cy'], polyline: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'se:connector'], radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'], rect: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'width', 'x', 'y'], @@ -104,7 +104,7 @@ Object.keys(svgWhiteList_).forEach((element) => { svgWhiteList_[element] = [...s const svgWhiteListNS_ = {} Object.entries(svgWhiteList_).forEach(([elt, atts]) => { const attNS = {} - Object.entries(atts).forEach(function ([_i, att]) { + Object.entries(atts).forEach(([_i, att]) => { if (att.includes(':')) { const v = att.split(':') attNS[v[1]] = NS[(v[0]).toUpperCase()] @@ -122,7 +122,7 @@ Object.entries(svgWhiteList_).forEach(([elt, atts]) => { * @param {Text|Element} node - The DOM element to be checked (we'll also check its children) or text node to be cleaned up * @returns {void} */ -export const sanitizeSvg = function (node) { +export const sanitizeSvg = (node) => { // Cleanup text nodes if (node.nodeType === 3) { // 3 === TEXT_NODE // Trim whitespace @@ -216,7 +216,7 @@ export const sanitizeSvg = function (node) { } // if the element has attributes pointing to a non-local reference, // need to remove the attribute - Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], function (attr) { + Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], (attr) => { let val = node.getAttribute(attr) if (val) { val = getUrlFromAttr(val)