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

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

Fix transformation issues
master
JFH 2021-08-30 13:00:53 +02:00 committed by GitHub
parent 4a32bedd86 d6f74fc497
commit a542ddd151
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 45 additions and 56 deletions
Show Stats 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' }
});
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({

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

@ -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 = "";

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

@ -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'));

12
src/svgcanvas/event.js
View File

@ -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;

8
src/svgcanvas/recalculate.js
View File

@ -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);
}

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

@ -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);

2
src/svgcanvas/svgcanvas.js
View File

@ -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')) };
};
/**

4
src/svgcanvas/undo.js
View File

@ -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;

32
src/svgcanvas/utilities.js
View File

@ -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;