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

Merge pull request #630 from SVG-Edit/fix-transformation-issues

Browse Source 
Fix transformation issues
This commit is contained in:
JFH
2021-08-30 13:00:53 +02:00
committed by GitHub
parent 4a32bedd86 d6f74fc497
commit a542ddd151
9 changed files with 45 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -225,7 +225,8 @@ describe('utilities', function () {
attr: { id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11' } attr: { id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11' }
}); });
svgroot.append(elem); svgroot.append(elem);
const closeEnough = /M0,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); assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
elem.remove(); elem.remove();
@@ -242,7 +243,7 @@ describe('utilities', function () {
attr: { id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10' } attr: { id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
assert.equal(getPathDFromElement(elem), '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.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({

2
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@@ -163,7 +163,7 @@ export default {
} }
const cx = xpos / len; const cx = xpos / len;
const cy = ypos / len; const cy = ypos / len;
const circumradius = elem.getAttribute('r'); const circumradius = Number(elem.getAttribute('r'));
const inradius = circumradius / elem.getAttribute('starRadiusMultiplier'); const inradius = circumradius / elem.getAttribute('starRadiusMultiplier');
let polyPoints = ""; let polyPoints = "";

24
src/svgcanvas/elem-get-set.js
View File

@@ -411,18 +411,18 @@ export const findDuplicateGradient = function (grad) {
} }
} else { } else {
const gradAttrs = { const gradAttrs = {
r: grad.getAttribute('r'), r: Number(grad.getAttribute('r')),
cx: grad.getAttribute('cx'), cx: Number(grad.getAttribute('cx')),
cy: grad.getAttribute('cy'), cy: Number(grad.getAttribute('cy')),
fx: grad.getAttribute('fx'), fx: Number(grad.getAttribute('fx')),
fy: grad.getAttribute('fy') fy: Number(grad.getAttribute('fy'))
}; };
const ogAttrs = { const ogAttrs = {
r: og.getAttribute('r'), r: Number(og.getAttribute('r')),
cx: og.getAttribute('cx'), cx: Number(og.getAttribute('cx')),
cy: og.getAttribute('cy'), cy: Number(og.getAttribute('cy')),
fx: og.getAttribute('fx'), fx: Number(og.getAttribute('fx')),
fy: og.getAttribute('fy') fy: Number(og.getAttribute('fy'))
}; };
let diff = false; let diff = false;
@@ -827,8 +827,8 @@ export const setRectRadiusMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = elemContext_.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'rect') { if (!isNullish(selected) && selected.tagName === 'rect') {
const r = selected.getAttribute('rx'); const r = Number(selected.getAttribute('rx'));
if (r !== String(val)) { if (r !== val) {
selected.setAttribute('rx', val); selected.setAttribute('rx', val);
selected.setAttribute('ry', val); selected.setAttribute('ry', val);
elemContext_.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius')); elemContext_.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius'));

12
src/svgcanvas/event.js
View File

@@ -364,8 +364,8 @@ export const mouseMoveEvent = function (evt) {
break; break;
} case 'circle': { } case 'circle': {
cx = shape.getAttribute('cx'); cx = Number(shape.getAttribute('cx'));
cy = shape.getAttribute('cy'); cy = Number(shape.getAttribute('cy'));
let rad = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)); let rad = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
if (eventContext_.getCurConfig().gridSnapping) { if (eventContext_.getCurConfig().gridSnapping) {
rad = snapToGrid(rad); rad = snapToGrid(rad);
@@ -373,8 +373,8 @@ export const mouseMoveEvent = function (evt) {
shape.setAttribute('r', rad); shape.setAttribute('r', rad);
break; break;
} case 'ellipse': { } case 'ellipse': {
cx = shape.getAttribute('cx'); cx = Number(shape.getAttribute('cx'));
cy = shape.getAttribute('cy'); cy = Number(shape.getAttribute('cy'));
if (eventContext_.getCurConfig().gridSnapping) { if (eventContext_.getCurConfig().gridSnapping) {
x = snapToGrid(x); x = snapToGrid(x);
cx = snapToGrid(cx); cx = snapToGrid(cx);
@@ -708,8 +708,8 @@ export const mouseUpEvent = function (evt) {
keep = (element.getAttribute('r') !== '0'); keep = (element.getAttribute('r') !== '0');
break; break;
case 'ellipse': { case 'ellipse': {
const rx = element.getAttribute('rx'); const rx = Number(element.getAttribute('rx'));
const ry = element.getAttribute('ry'); const ry = Number(element.getAttribute('ry'));
keep = (rx || ry); keep = (rx || ry);
} }
break; break;

8
src/svgcanvas/recalculate.js
View File

@@ -225,8 +225,8 @@ export const recalculateDimensions = function (selected) {
} else if (gsvg) { } else if (gsvg) {
// GSVG exception // GSVG exception
changes = { changes = {
x: gsvg.getAttribute('x') || 0, x: Number(gsvg.getAttribute('x')) || 0,
y: gsvg.getAttribute('y') || 0 y: Number(gsvg.getAttribute('y')) || 0
}; };
} }
@@ -775,8 +775,8 @@ export const recalculateDimensions = function (selected) {
const child = children.item(c); const child = children.item(c);
if (child.tagName === 'tspan') { if (child.tagName === 'tspan') {
const tspanChanges = { const tspanChanges = {
x: child.getAttribute('x') || 0, x: Number(child.getAttribute('x')) || 0,
y: child.getAttribute('y') || 0 y: Number(child.getAttribute('y')) || 0
}; };
remapElement(child, tspanChanges, m); remapElement(child, tspanChanges, m);
} }

12
src/svgcanvas/selected-elem.js
View File

@@ -702,8 +702,8 @@ export const convertToGroup = function (elem) {
// Use the gsvg as the new group // Use the gsvg as the new group
const svg = elem.firstChild; const svg = elem.firstChild;
const pt = { const pt = {
x: svg.getAttribute('x'), x: Number(svg.getAttribute('x')),
y: svg.getAttribute('y') y: Number(svg.getAttribute('y'))
}; };
// $(elem.firstChild.firstChild).unwrap(); // $(elem.firstChild.firstChild).unwrap();
@@ -725,8 +725,8 @@ export const convertToGroup = function (elem) {
ts = $elem.getAttribute('transform'); ts = $elem.getAttribute('transform');
const pos = { const pos = {
x: $elem.getAttribute('x'), x: Number($elem.getAttribute('x')),
y: $elem.getAttribute('y') y: Number($elem.getAttribute('y'))
}; };
const vb = elem.getAttribute('viewBox'); const vb = elem.getAttribute('viewBox');
@@ -929,8 +929,8 @@ export const updateCanvas = function (w, h) {
elementContext_.getSVGRoot().setAttribute('height', h); elementContext_.getSVGRoot().setAttribute('height', h);
const currentZoom = elementContext_.getCurrentZoom(); const currentZoom = elementContext_.getCurrentZoom();
const bg = document.getElementById('canvasBackground'); const bg = document.getElementById('canvasBackground');
const oldX = elementContext_.getSVGContent().getAttribute('x'); const oldX = Number(elementContext_.getSVGContent().getAttribute('x'));
const oldY = elementContext_.getSVGContent().getAttribute('y'); const oldY = Number(elementContext_.getSVGContent().getAttribute('y'));
const x = ((w - this.contentW * currentZoom) / 2); const x = ((w - this.contentW * currentZoom) / 2);
const y = ((h - this.contentH * currentZoom) / 2); const y = ((h - this.contentH * currentZoom) / 2);

2
src/svgcanvas/svgcanvas.js
View File

@@ -1832,7 +1832,7 @@ class SvgCanvas {
* position in the editor's canvas. * position in the editor's canvas.
*/ */
this.getOffset = function () { this.getOffset = function () {
return { x: svgcontent.getAttribute('x'), y: svgcontent.getAttribute('y') }; return { x: Number(svgcontent.getAttribute('x')), y: Number(svgcontent.getAttribute('y')) };
}; };
/** /**

4
src/svgcanvas/undo.js
View File

@@ -88,8 +88,8 @@ export const getUndoManager = function () {
const tspans = cmd.elem.children; const tspans = cmd.elem.children;
for (let i = 0; i < tspans.length; i++){ for (let i = 0; i < tspans.length; i++){
let x = +tspans[i].getAttribute('x'); let x = Number(tspans[i].getAttribute('x'));
let y = +tspans[i].getAttribute('y'); let y = Number(tspans[i].getAttribute('y'));
const unapply = (eventType === EventTypes.AFTER_UNAPPLY); const unapply = (eventType === EventTypes.AFTER_UNAPPLY);
x = unapply? x - dx: x + dx; x = unapply? x - dx: x + dx;

32
src/svgcanvas/utilities.js
View File

@@ -635,19 +635,7 @@ export const getBBox = function (elem) {
} }
if (elname === 'use' || (elname === 'foreignObject' && isWebkit())) { if (elname === 'use' || (elname === 'foreignObject' && isWebkit())) {
if (!ret) { ret = selected.getBBox(); } 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)) { } else if (visElemsArr.includes(elname)) {
if (selected) { if (selected) {
try { try {
@@ -721,12 +709,12 @@ export const getPathDFromElement = function (elem) {
switch (elem.tagName) { switch (elem.tagName) {
case 'ellipse': case 'ellipse':
case 'circle': { case 'circle': {
rx = elem.getAttribute('rx'); rx = Number(elem.getAttribute('rx'));
ry = elem.getAttribute('ry'); ry = Number(elem.getAttribute('ry'));
const cx = elem.getAttribute('cx'); const cx = Number(elem.getAttribute('cx'));
const cy = elem.getAttribute('cy'); const cy = Number(elem.getAttribute('cy'));
if (elem.tagName === 'circle' && elem.hasAttribute('r')) { if (elem.tagName === 'circle' && elem.hasAttribute('r')) {
ry = elem.getAttribute('r'); ry = Number(elem.getAttribute('r'));
rx = ry; rx = ry;
} }
d = getPathDFromSegments([ d = getPathDFromSegments([
@@ -756,8 +744,8 @@ export const getPathDFromElement = function (elem) {
d = 'M' + elem.getAttribute('points') + ' Z'; d = 'M' + elem.getAttribute('points') + ' Z';
break; break;
case 'rect': { case 'rect': {
rx = elem.getAttribute('rx'); rx = Number(elem.getAttribute('rx'));
ry = elem.getAttribute('ry'); ry = Number(elem.getAttribute('ry'));
const b = elem.getBBox(); const b = elem.getBBox();
const { x, y } = b; const { x, y } = b;
const w = b.width; const w = b.width;
@@ -992,8 +980,8 @@ export const getBBoxWithTransform = function (elem, addSVGElementFromJson, pathA
bb = goodBb; bb = goodBb;
} else if (elem.tagName === 'rect') { } else if (elem.tagName === 'rect') {
// Look for radius // Look for radius
const rx = elem.getAttribute('rx'); const rx = Number(elem.getAttribute('rx'));
const ry = elem.getAttribute('ry'); const ry = Number(elem.getAttribute('ry'));
if (rx || ry) { if (rx || ry) {
goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions); goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions);
bb = goodBb; bb = goodBb;