From 3f6ff221205965bde90a33df3111823ec39484e0 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Mon, 30 Aug 2021 10:41:11 +0200 Subject: [PATCH 1/2] make sure we receive a number from attributes x,y,rx,ry,cx,cy --- .../extensions/ext-polystar/ext-polystar.js | 2 +- src/svgcanvas/elem-get-set.js | 24 +++++++------- src/svgcanvas/event.js | 12 +++---- src/svgcanvas/recalculate.js | 8 ++--- src/svgcanvas/selected-elem.js | 12 +++---- src/svgcanvas/svgcanvas.js | 2 +- src/svgcanvas/undo.js | 4 +-- src/svgcanvas/utilities.js | 32 ++++++------------- 8 files changed, 42 insertions(+), 54 deletions(-) diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 2a6211e2..74b224ce 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -163,7 +163,7 @@ export default { } const cx = xpos / len; const cy = ypos / len; - const circumradius = elem.getAttribute('r'); + const circumradius = Number(elem.getAttribute('r')); const inradius = circumradius / elem.getAttribute('starRadiusMultiplier'); let polyPoints = ""; diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js index 32c63c30..41b77216 100644 --- a/src/svgcanvas/elem-get-set.js +++ b/src/svgcanvas/elem-get-set.js @@ -411,18 +411,18 @@ export const findDuplicateGradient = function (grad) { } } else { const gradAttrs = { - r: grad.getAttribute('r'), - cx: grad.getAttribute('cx'), - cy: grad.getAttribute('cy'), - fx: grad.getAttribute('fx'), - fy: grad.getAttribute('fy') + r: Number(grad.getAttribute('r')), + cx: Number(grad.getAttribute('cx')), + cy: Number(grad.getAttribute('cy')), + fx: Number(grad.getAttribute('fx')), + fy: Number(grad.getAttribute('fy')) }; const ogAttrs = { - r: og.getAttribute('r'), - cx: og.getAttribute('cx'), - cy: og.getAttribute('cy'), - fx: og.getAttribute('fx'), - fy: og.getAttribute('fy') + r: Number(og.getAttribute('r')), + cx: Number(og.getAttribute('cx')), + cy: Number(og.getAttribute('cy')), + fx: Number(og.getAttribute('fx')), + fy: Number(og.getAttribute('fy')) }; let diff = false; @@ -827,8 +827,8 @@ export const setRectRadiusMethod = function (val) { const selectedElements = elemContext_.getSelectedElements(); const selected = selectedElements[0]; if (!isNullish(selected) && selected.tagName === 'rect') { - const r = selected.getAttribute('rx'); - if (r !== String(val)) { + const r = Number(selected.getAttribute('rx')); + if (r !== val) { selected.setAttribute('rx', val); selected.setAttribute('ry', val); elemContext_.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius')); diff --git a/src/svgcanvas/event.js b/src/svgcanvas/event.js index 2fbd63a6..7b343f43 100644 --- a/src/svgcanvas/event.js +++ b/src/svgcanvas/event.js @@ -364,8 +364,8 @@ export const mouseMoveEvent = function (evt) { break; } case 'circle': { - cx = shape.getAttribute('cx'); - cy = shape.getAttribute('cy'); + cx = Number(shape.getAttribute('cx')); + cy = Number(shape.getAttribute('cy')); let rad = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)); if (eventContext_.getCurConfig().gridSnapping) { rad = snapToGrid(rad); @@ -373,8 +373,8 @@ export const mouseMoveEvent = function (evt) { shape.setAttribute('r', rad); break; } case 'ellipse': { - cx = shape.getAttribute('cx'); - cy = shape.getAttribute('cy'); + cx = Number(shape.getAttribute('cx')); + cy = Number(shape.getAttribute('cy')); if (eventContext_.getCurConfig().gridSnapping) { x = snapToGrid(x); cx = snapToGrid(cx); @@ -708,8 +708,8 @@ export const mouseUpEvent = function (evt) { keep = (element.getAttribute('r') !== '0'); break; case 'ellipse': { - const rx = element.getAttribute('rx'); - const ry = element.getAttribute('ry'); + const rx = Number(element.getAttribute('rx')); + const ry = Number(element.getAttribute('ry')); keep = (rx || ry); } break; diff --git a/src/svgcanvas/recalculate.js b/src/svgcanvas/recalculate.js index 81e1d6df..bfe33afc 100644 --- a/src/svgcanvas/recalculate.js +++ b/src/svgcanvas/recalculate.js @@ -225,8 +225,8 @@ export const recalculateDimensions = function (selected) { } else if (gsvg) { // GSVG exception changes = { - x: gsvg.getAttribute('x') || 0, - y: gsvg.getAttribute('y') || 0 + x: Number(gsvg.getAttribute('x')) || 0, + y: Number(gsvg.getAttribute('y')) || 0 }; } @@ -775,8 +775,8 @@ export const recalculateDimensions = function (selected) { const child = children.item(c); if (child.tagName === 'tspan') { const tspanChanges = { - x: child.getAttribute('x') || 0, - y: child.getAttribute('y') || 0 + x: Number(child.getAttribute('x')) || 0, + y: Number(child.getAttribute('y')) || 0 }; remapElement(child, tspanChanges, m); } diff --git a/src/svgcanvas/selected-elem.js b/src/svgcanvas/selected-elem.js index db0763f3..30ec70c2 100644 --- a/src/svgcanvas/selected-elem.js +++ b/src/svgcanvas/selected-elem.js @@ -702,8 +702,8 @@ export const convertToGroup = function (elem) { // Use the gsvg as the new group const svg = elem.firstChild; const pt = { - x: svg.getAttribute('x'), - y: svg.getAttribute('y') + x: Number(svg.getAttribute('x')), + y: Number(svg.getAttribute('y')) }; // $(elem.firstChild.firstChild).unwrap(); @@ -725,8 +725,8 @@ export const convertToGroup = function (elem) { ts = $elem.getAttribute('transform'); const pos = { - x: $elem.getAttribute('x'), - y: $elem.getAttribute('y') + x: Number($elem.getAttribute('x')), + y: Number($elem.getAttribute('y')) }; const vb = elem.getAttribute('viewBox'); @@ -929,8 +929,8 @@ export const updateCanvas = function (w, h) { elementContext_.getSVGRoot().setAttribute('height', h); const currentZoom = elementContext_.getCurrentZoom(); const bg = document.getElementById('canvasBackground'); - const oldX = elementContext_.getSVGContent().getAttribute('x'); - const oldY = elementContext_.getSVGContent().getAttribute('y'); + const oldX = Number(elementContext_.getSVGContent().getAttribute('x')); + const oldY = Number(elementContext_.getSVGContent().getAttribute('y')); const x = ((w - this.contentW * currentZoom) / 2); const y = ((h - this.contentH * currentZoom) / 2); diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 937eb8cf..5549a060 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -1832,7 +1832,7 @@ class SvgCanvas { * position in the editor's canvas. */ this.getOffset = function () { - return { x: svgcontent.getAttribute('x'), y: svgcontent.getAttribute('y') }; + return { x: Number(svgcontent.getAttribute('x')), y: Number(svgcontent.getAttribute('y')) }; }; /** diff --git a/src/svgcanvas/undo.js b/src/svgcanvas/undo.js index 00d0d3ae..ddf8d2c7 100644 --- a/src/svgcanvas/undo.js +++ b/src/svgcanvas/undo.js @@ -88,8 +88,8 @@ export const getUndoManager = function () { const tspans = cmd.elem.children; for (let i = 0; i < tspans.length; i++){ - let x = +tspans[i].getAttribute('x'); - let y = +tspans[i].getAttribute('y'); + let x = Number(tspans[i].getAttribute('x')); + let y = Number(tspans[i].getAttribute('y')); const unapply = (eventType === EventTypes.AFTER_UNAPPLY); x = unapply? x - dx: x + dx; diff --git a/src/svgcanvas/utilities.js b/src/svgcanvas/utilities.js index e6348d9b..d068d5a7 100644 --- a/src/svgcanvas/utilities.js +++ b/src/svgcanvas/utilities.js @@ -635,19 +635,7 @@ export const getBBox = function (elem) { } if (elname === 'use' || (elname === 'foreignObject' && isWebkit())) { if (!ret) { ret = selected.getBBox(); } - // This is resolved in later versions of webkit, perhaps we should - // have a featured detection for correct 'use' behavior? - // —————————— - /* if (!isWebkit()) { - const { x, y, width, height } = ret; - const bb = { - width, - height, - x: x + Number.parseFloat(selected.getAttribute('x') || 0), - y: y + Number.parseFloat(selected.getAttribute('y') || 0) - }; - ret = bb; - } */ + } else if (visElemsArr.includes(elname)) { if (selected) { try { @@ -721,12 +709,12 @@ export const getPathDFromElement = function (elem) { switch (elem.tagName) { case 'ellipse': case 'circle': { - rx = elem.getAttribute('rx'); - ry = elem.getAttribute('ry'); - const cx = elem.getAttribute('cx'); - const cy = elem.getAttribute('cy'); + rx = Number(elem.getAttribute('rx')); + ry = Number(elem.getAttribute('ry')); + const cx = Number(elem.getAttribute('cx')); + const cy = Number(elem.getAttribute('cy')); if (elem.tagName === 'circle' && elem.hasAttribute('r')) { - ry = elem.getAttribute('r'); + ry = Number(elem.getAttribute('r')); rx = ry; } d = getPathDFromSegments([ @@ -756,8 +744,8 @@ export const getPathDFromElement = function (elem) { d = 'M' + elem.getAttribute('points') + ' Z'; break; case 'rect': { - rx = elem.getAttribute('rx'); - ry = elem.getAttribute('ry'); + rx = Number(elem.getAttribute('rx')); + ry = Number(elem.getAttribute('ry')); const b = elem.getBBox(); const { x, y } = b; const w = b.width; @@ -992,8 +980,8 @@ export const getBBoxWithTransform = function (elem, addSVGElementFromJson, pathA bb = goodBb; } else if (elem.tagName === 'rect') { // Look for radius - const rx = elem.getAttribute('rx'); - const ry = elem.getAttribute('ry'); + const rx = Number(elem.getAttribute('rx')); + const ry = Number(elem.getAttribute('ry')); if (rx || ry) { goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions); bb = goodBb; From d6f74fc497269b392a10057b6e6c19b78e463504 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Mon, 30 Aug 2021 12:09:45 +0200 Subject: [PATCH 2/2] Fix test --- cypress/integration/unit/utilities.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/cypress/integration/unit/utilities.js b/cypress/integration/unit/utilities.js index daa7e8db..c30ea97e 100644 --- a/cypress/integration/unit/utilities.js +++ b/cypress/integration/unit/utilities.js @@ -225,7 +225,8 @@ describe('utilities', function () { attr: { id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11' } }); svgroot.append(elem); - const closeEnough = /M0,13 C0,2.3\d* 0.9\d*,1 02,1 L8,1 C9.0\d*,1 10,2.3\d* 10,13 L10,9 C10,10.6\d* 9.08675799086758,12 8,12 L02,12 C0.9\d*,12 0,10.6\d* 0,9 L0,13 Z/; + const closeEnough = /M0,4 C0,2.3\d* 0.9\d*,1 2,1 L8,1 C9.0\d*,1 10,2.3\d* 10,4 L10,9 C10,10.6\d* 9.0\d*,12 8,12 L2,12 C0.9\d*,12 0,10.6\d* 0,9 L0,4 Z/; + console.log(getPathDFromElement(elem), closeEnough); assert.equal(closeEnough.test(getPathDFromElement(elem)), true); elem.remove(); @@ -242,7 +243,7 @@ describe('utilities', function () { attr: { id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10' } }); svgroot.append(elem); - assert.equal(getPathDFromElement(elem), 'M5,11 C5,5.475138121546961 7.237569060773481,1 10,1 C102.7624309392265194,1 105,5.475138121546961 105,11 C105,115.524861878453039 102.7624309392265194,1110 10,1110 C7.237569060773481,1110 5,115.524861878453039 5,11 Z'); + assert.equal(getPathDFromElement(elem), 'M5,11 C5,5.475138121546961 7.237569060773481,1 10,1 C12.762430939226519,1 15,5.475138121546961 15,11 C15,16.524861878453038 12.762430939226519,21 10,21 C7.237569060773481,21 5,16.524861878453038 5,11 Z'); elem.remove(); elem = mockCreateSVGElement({