identation requirement to eslint
This commit is contained in:
JFH
@@ -115,192 +115,192 @@ export const remapElement = function (selected, changes, m) {
|
||||
// now we have a set of changes and an applied reduced transform list
|
||||
// we apply the changes directly to the DOM
|
||||
switch (elName) {
|
||||
case 'foreignObject':
|
||||
case 'rect':
|
||||
case 'image': {
|
||||
// Allow images to be inverted (give them matrix when flipped)
|
||||
if (elName === 'image' && (m.a < 0 || m.d < 0)) {
|
||||
// Convert to matrix
|
||||
const chlist = getTransformList(selected);
|
||||
const mt = editorContext_.getSVGRoot().createSVGTransform();
|
||||
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
|
||||
chlist.clear();
|
||||
chlist.appendItem(mt);
|
||||
} else {
|
||||
const pt1 = remap(changes.x, changes.y);
|
||||
changes.width = scalew(changes.width);
|
||||
changes.height = scaleh(changes.height);
|
||||
changes.x = pt1.x + Math.min(0, changes.width);
|
||||
changes.y = pt1.y + Math.min(0, changes.height);
|
||||
changes.width = Math.abs(changes.width);
|
||||
changes.height = Math.abs(changes.height);
|
||||
}
|
||||
finishUp();
|
||||
break;
|
||||
} case 'ellipse': {
|
||||
const c = remap(changes.cx, changes.cy);
|
||||
changes.cx = c.x;
|
||||
changes.cy = c.y;
|
||||
changes.rx = scalew(changes.rx);
|
||||
changes.ry = scaleh(changes.ry);
|
||||
changes.rx = Math.abs(changes.rx);
|
||||
changes.ry = Math.abs(changes.ry);
|
||||
finishUp();
|
||||
break;
|
||||
} case 'circle': {
|
||||
const c = remap(changes.cx, changes.cy);
|
||||
changes.cx = c.x;
|
||||
changes.cy = c.y;
|
||||
// take the minimum of the new selected box's dimensions for the new circle radius
|
||||
const tbox = transformBox(box.x, box.y, box.width, box.height, m);
|
||||
const w = tbox.tr.x - tbox.tl.x, h = tbox.bl.y - tbox.tl.y;
|
||||
changes.r = Math.min(w / 2, h / 2);
|
||||
|
||||
if (changes.r) { changes.r = Math.abs(changes.r); }
|
||||
finishUp();
|
||||
break;
|
||||
} case 'line': {
|
||||
const pt1 = remap(changes.x1, changes.y1);
|
||||
const pt2 = remap(changes.x2, changes.y2);
|
||||
changes.x1 = pt1.x;
|
||||
changes.y1 = pt1.y;
|
||||
changes.x2 = pt2.x;
|
||||
changes.y2 = pt2.y;
|
||||
} // Fallthrough
|
||||
case 'text':
|
||||
case 'tspan':
|
||||
case 'use': {
|
||||
finishUp();
|
||||
break;
|
||||
} case 'g': {
|
||||
const dataStorage = editorContext_.getDataStorage();
|
||||
const gsvg = dataStorage.get(selected, 'gsvg');
|
||||
if (gsvg) {
|
||||
assignAttributes(gsvg, changes, 1000, true);
|
||||
}
|
||||
break;
|
||||
} case 'polyline':
|
||||
case 'polygon': {
|
||||
const len = changes.points.length;
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = changes.points[i];
|
||||
const { x, y } = remap(pt.x, pt.y);
|
||||
changes.points[i].x = x;
|
||||
changes.points[i].y = y;
|
||||
}
|
||||
|
||||
// const len = changes.points.length;
|
||||
let pstr = '';
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = changes.points[i];
|
||||
pstr += pt.x + ',' + pt.y + ' ';
|
||||
}
|
||||
selected.setAttribute('points', pstr);
|
||||
break;
|
||||
} case 'path': {
|
||||
const segList = selected.pathSegList;
|
||||
let len = segList.numberOfItems;
|
||||
changes.d = [];
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const seg = segList.getItem(i);
|
||||
changes.d[i] = {
|
||||
type: seg.pathSegType,
|
||||
x: seg.x,
|
||||
y: seg.y,
|
||||
x1: seg.x1,
|
||||
y1: seg.y1,
|
||||
x2: seg.x2,
|
||||
y2: seg.y2,
|
||||
r1: seg.r1,
|
||||
r2: seg.r2,
|
||||
angle: seg.angle,
|
||||
largeArcFlag: seg.largeArcFlag,
|
||||
sweepFlag: seg.sweepFlag
|
||||
};
|
||||
}
|
||||
|
||||
len = changes.d.length;
|
||||
const firstseg = changes.d[0],
|
||||
currentpt = remap(firstseg.x, firstseg.y);
|
||||
changes.d[0].x = currentpt.x;
|
||||
changes.d[0].y = currentpt.y;
|
||||
for (let i = 1; i < len; ++i) {
|
||||
const seg = changes.d[i];
|
||||
const { type } = seg;
|
||||
// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
|
||||
// if relative, we want to scalew, scaleh
|
||||
if (type % 2 === 0) { // absolute
|
||||
const thisx = (seg.x !== undefined) ? seg.x : currentpt.x, // for V commands
|
||||
thisy = (seg.y !== undefined) ? seg.y : currentpt.y; // for H commands
|
||||
const pt = remap(thisx, thisy);
|
||||
const pt1 = remap(seg.x1, seg.y1);
|
||||
const pt2 = remap(seg.x2, seg.y2);
|
||||
seg.x = pt.x;
|
||||
seg.y = pt.y;
|
||||
seg.x1 = pt1.x;
|
||||
seg.y1 = pt1.y;
|
||||
seg.x2 = pt2.x;
|
||||
seg.y2 = pt2.y;
|
||||
seg.r1 = scalew(seg.r1);
|
||||
seg.r2 = scaleh(seg.r2);
|
||||
} else { // relative
|
||||
seg.x = scalew(seg.x);
|
||||
seg.y = scaleh(seg.y);
|
||||
seg.x1 = scalew(seg.x1);
|
||||
seg.y1 = scaleh(seg.y1);
|
||||
seg.x2 = scalew(seg.x2);
|
||||
seg.y2 = scaleh(seg.y2);
|
||||
seg.r1 = scalew(seg.r1);
|
||||
seg.r2 = scaleh(seg.r2);
|
||||
}
|
||||
} // for each segment
|
||||
|
||||
let dstr = '';
|
||||
len = changes.d.length;
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const seg = changes.d[i];
|
||||
const { type } = seg;
|
||||
dstr += pathMap[type];
|
||||
switch (type) {
|
||||
case 13: // relative horizontal line (h)
|
||||
case 12: // absolute horizontal line (H)
|
||||
dstr += seg.x + ' ';
|
||||
break;
|
||||
case 15: // relative vertical line (v)
|
||||
case 14: // absolute vertical line (V)
|
||||
dstr += seg.y + ' ';
|
||||
break;
|
||||
case 3: // relative move (m)
|
||||
case 5: // relative line (l)
|
||||
case 19: // relative smooth quad (t)
|
||||
case 2: // absolute move (M)
|
||||
case 4: // absolute line (L)
|
||||
case 18: // absolute smooth quad (T)
|
||||
dstr += seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 7: // relative cubic (c)
|
||||
case 6: // absolute cubic (C)
|
||||
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +
|
||||
seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 9: // relative quad (q)
|
||||
case 8: // absolute quad (Q)
|
||||
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 11: // relative elliptical arc (a)
|
||||
case 10: // absolute elliptical arc (A)
|
||||
dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +
|
||||
' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 17: // relative smooth cubic (s)
|
||||
case 16: // absolute smooth cubic (S)
|
||||
dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
selected.setAttribute('d', dstr);
|
||||
break;
|
||||
case 'foreignObject':
|
||||
case 'rect':
|
||||
case 'image': {
|
||||
// Allow images to be inverted (give them matrix when flipped)
|
||||
if (elName === 'image' && (m.a < 0 || m.d < 0)) {
|
||||
// Convert to matrix
|
||||
const chlist = getTransformList(selected);
|
||||
const mt = editorContext_.getSVGRoot().createSVGTransform();
|
||||
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
|
||||
chlist.clear();
|
||||
chlist.appendItem(mt);
|
||||
} else {
|
||||
const pt1 = remap(changes.x, changes.y);
|
||||
changes.width = scalew(changes.width);
|
||||
changes.height = scaleh(changes.height);
|
||||
changes.x = pt1.x + Math.min(0, changes.width);
|
||||
changes.y = pt1.y + Math.min(0, changes.height);
|
||||
changes.width = Math.abs(changes.width);
|
||||
changes.height = Math.abs(changes.height);
|
||||
}
|
||||
finishUp();
|
||||
break;
|
||||
} case 'ellipse': {
|
||||
const c = remap(changes.cx, changes.cy);
|
||||
changes.cx = c.x;
|
||||
changes.cy = c.y;
|
||||
changes.rx = scalew(changes.rx);
|
||||
changes.ry = scaleh(changes.ry);
|
||||
changes.rx = Math.abs(changes.rx);
|
||||
changes.ry = Math.abs(changes.ry);
|
||||
finishUp();
|
||||
break;
|
||||
} case 'circle': {
|
||||
const c = remap(changes.cx, changes.cy);
|
||||
changes.cx = c.x;
|
||||
changes.cy = c.y;
|
||||
// take the minimum of the new selected box's dimensions for the new circle radius
|
||||
const tbox = transformBox(box.x, box.y, box.width, box.height, m);
|
||||
const w = tbox.tr.x - tbox.tl.x, h = tbox.bl.y - tbox.tl.y;
|
||||
changes.r = Math.min(w / 2, h / 2);
|
||||
|
||||
if (changes.r) { changes.r = Math.abs(changes.r); }
|
||||
finishUp();
|
||||
break;
|
||||
} case 'line': {
|
||||
const pt1 = remap(changes.x1, changes.y1);
|
||||
const pt2 = remap(changes.x2, changes.y2);
|
||||
changes.x1 = pt1.x;
|
||||
changes.y1 = pt1.y;
|
||||
changes.x2 = pt2.x;
|
||||
changes.y2 = pt2.y;
|
||||
} // Fallthrough
|
||||
case 'text':
|
||||
case 'tspan':
|
||||
case 'use': {
|
||||
finishUp();
|
||||
break;
|
||||
} case 'g': {
|
||||
const dataStorage = editorContext_.getDataStorage();
|
||||
const gsvg = dataStorage.get(selected, 'gsvg');
|
||||
if (gsvg) {
|
||||
assignAttributes(gsvg, changes, 1000, true);
|
||||
}
|
||||
break;
|
||||
} case 'polyline':
|
||||
case 'polygon': {
|
||||
const len = changes.points.length;
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = changes.points[i];
|
||||
const { x, y } = remap(pt.x, pt.y);
|
||||
changes.points[i].x = x;
|
||||
changes.points[i].y = y;
|
||||
}
|
||||
|
||||
// const len = changes.points.length;
|
||||
let pstr = '';
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = changes.points[i];
|
||||
pstr += pt.x + ',' + pt.y + ' ';
|
||||
}
|
||||
selected.setAttribute('points', pstr);
|
||||
break;
|
||||
} case 'path': {
|
||||
const segList = selected.pathSegList;
|
||||
let len = segList.numberOfItems;
|
||||
changes.d = [];
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const seg = segList.getItem(i);
|
||||
changes.d[i] = {
|
||||
type: seg.pathSegType,
|
||||
x: seg.x,
|
||||
y: seg.y,
|
||||
x1: seg.x1,
|
||||
y1: seg.y1,
|
||||
x2: seg.x2,
|
||||
y2: seg.y2,
|
||||
r1: seg.r1,
|
||||
r2: seg.r2,
|
||||
angle: seg.angle,
|
||||
largeArcFlag: seg.largeArcFlag,
|
||||
sweepFlag: seg.sweepFlag
|
||||
};
|
||||
}
|
||||
|
||||
len = changes.d.length;
|
||||
const firstseg = changes.d[0],
|
||||
currentpt = remap(firstseg.x, firstseg.y);
|
||||
changes.d[0].x = currentpt.x;
|
||||
changes.d[0].y = currentpt.y;
|
||||
for (let i = 1; i < len; ++i) {
|
||||
const seg = changes.d[i];
|
||||
const { type } = seg;
|
||||
// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
|
||||
// if relative, we want to scalew, scaleh
|
||||
if (type % 2 === 0) { // absolute
|
||||
const thisx = (seg.x !== undefined) ? seg.x : currentpt.x, // for V commands
|
||||
thisy = (seg.y !== undefined) ? seg.y : currentpt.y; // for H commands
|
||||
const pt = remap(thisx, thisy);
|
||||
const pt1 = remap(seg.x1, seg.y1);
|
||||
const pt2 = remap(seg.x2, seg.y2);
|
||||
seg.x = pt.x;
|
||||
seg.y = pt.y;
|
||||
seg.x1 = pt1.x;
|
||||
seg.y1 = pt1.y;
|
||||
seg.x2 = pt2.x;
|
||||
seg.y2 = pt2.y;
|
||||
seg.r1 = scalew(seg.r1);
|
||||
seg.r2 = scaleh(seg.r2);
|
||||
} else { // relative
|
||||
seg.x = scalew(seg.x);
|
||||
seg.y = scaleh(seg.y);
|
||||
seg.x1 = scalew(seg.x1);
|
||||
seg.y1 = scaleh(seg.y1);
|
||||
seg.x2 = scalew(seg.x2);
|
||||
seg.y2 = scaleh(seg.y2);
|
||||
seg.r1 = scalew(seg.r1);
|
||||
seg.r2 = scaleh(seg.r2);
|
||||
}
|
||||
} // for each segment
|
||||
|
||||
let dstr = '';
|
||||
len = changes.d.length;
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const seg = changes.d[i];
|
||||
const { type } = seg;
|
||||
dstr += pathMap[type];
|
||||
switch (type) {
|
||||
case 13: // relative horizontal line (h)
|
||||
case 12: // absolute horizontal line (H)
|
||||
dstr += seg.x + ' ';
|
||||
break;
|
||||
case 15: // relative vertical line (v)
|
||||
case 14: // absolute vertical line (V)
|
||||
dstr += seg.y + ' ';
|
||||
break;
|
||||
case 3: // relative move (m)
|
||||
case 5: // relative line (l)
|
||||
case 19: // relative smooth quad (t)
|
||||
case 2: // absolute move (M)
|
||||
case 4: // absolute line (L)
|
||||
case 18: // absolute smooth quad (T)
|
||||
dstr += seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 7: // relative cubic (c)
|
||||
case 6: // absolute cubic (C)
|
||||
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +
|
||||
seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 9: // relative quad (q)
|
||||
case 8: // absolute quad (Q)
|
||||
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 11: // relative elliptical arc (a)
|
||||
case 10: // absolute elliptical arc (A)
|
||||
dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +
|
||||
' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
case 17: // relative smooth cubic (s)
|
||||
case 16: // absolute smooth cubic (S)
|
||||
dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' ';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
selected.setAttribute('d', dstr);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -13,7 +13,7 @@ export const copyElem = function (el, getNextId) {
|
||||
// manually create a copy of the element
|
||||
const newEl = document.createElementNS(el.namespaceURI, el.nodeName);
|
||||
Object.values(el.attributes).forEach((attr) => {
|
||||
newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value);
|
||||
newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value);
|
||||
});
|
||||
// set the copied element's new id
|
||||
newEl.removeAttribute('id');
|
||||
|
||||
@@ -265,29 +265,29 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
|
||||
}
|
||||
|
||||
switch (val) {
|
||||
case 'selection': {
|
||||
if (!selectedElements[0]) { return undefined; }
|
||||
const selectedElems = selectedElements.map(function (n, _) {
|
||||
if (n) {
|
||||
return n;
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
bb = getStrokedBBoxDefaultVisible(selectedElems);
|
||||
break;
|
||||
} case 'canvas': {
|
||||
const res = elemContext_.getCanvas().getResolution();
|
||||
spacer = 0.95;
|
||||
bb = { width: res.w, height: res.h, x: 0, y: 0 };
|
||||
break;
|
||||
} case 'content':
|
||||
bb = getStrokedBBoxDefaultVisible();
|
||||
break;
|
||||
case 'layer':
|
||||
bb = getStrokedBBoxDefaultVisible(getVisibleElements(elemContext_.getCanvas().getCurrentDrawing().getCurrentLayer()));
|
||||
break;
|
||||
default:
|
||||
case 'selection': {
|
||||
if (!selectedElements[0]) { return undefined; }
|
||||
const selectedElems = selectedElements.map(function (n, _) {
|
||||
if (n) {
|
||||
return n;
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
bb = getStrokedBBoxDefaultVisible(selectedElems);
|
||||
break;
|
||||
} case 'canvas': {
|
||||
const res = elemContext_.getCanvas().getResolution();
|
||||
spacer = 0.95;
|
||||
bb = { width: res.w, height: res.h, x: 0, y: 0 };
|
||||
break;
|
||||
} case 'content':
|
||||
bb = getStrokedBBoxDefaultVisible();
|
||||
break;
|
||||
case 'layer':
|
||||
bb = getStrokedBBoxDefaultVisible(getVisibleElements(elemContext_.getCanvas().getCurrentDrawing().getCurrentLayer()));
|
||||
break;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
return calcZoom(bb);
|
||||
};
|
||||
@@ -476,14 +476,14 @@ export const setPaintMethod = function (type, paint) {
|
||||
// now set the current paint object
|
||||
elemContext_.setCurProperties(type + '_paint', p);
|
||||
switch (p.type) {
|
||||
case 'solidColor':
|
||||
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
|
||||
break;
|
||||
case 'linearGradient':
|
||||
case 'radialGradient':
|
||||
elemContext_.setCanvas(type + 'Grad', p[p.type]);
|
||||
elemContext_.getCanvas().setGradient(type);
|
||||
break;
|
||||
case 'solidColor':
|
||||
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
|
||||
break;
|
||||
case 'linearGradient':
|
||||
case 'radialGradient':
|
||||
elemContext_.setCanvas(type + 'Grad', p[p.type]);
|
||||
elemContext_.getCanvas().setGradient(type);
|
||||
break;
|
||||
}
|
||||
};
|
||||
/**
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -163,17 +163,17 @@ export const recalculateDimensions = function (selected) {
|
||||
|
||||
// If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).
|
||||
switch (selected.tagName) {
|
||||
// Ignore these elements, as they can absorb the [M]
|
||||
case 'line':
|
||||
case 'polyline':
|
||||
case 'polygon':
|
||||
case 'path':
|
||||
break;
|
||||
default:
|
||||
if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||
|
||||
// Ignore these elements, as they can absorb the [M]
|
||||
case 'line':
|
||||
case 'polyline':
|
||||
case 'polygon':
|
||||
case 'path':
|
||||
break;
|
||||
default:
|
||||
if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||
|
||||
(tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4)) {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
// Grouped SVG element
|
||||
const gsvg = (dataStorage.has(selected, 'gsvg')) ? dataStorage.get(selected, 'gsvg') : undefined;
|
||||
@@ -185,42 +185,42 @@ export const recalculateDimensions = function (selected) {
|
||||
let initial = null;
|
||||
let attrs = [];
|
||||
switch (selected.tagName) {
|
||||
case 'line':
|
||||
attrs = [ 'x1', 'y1', 'x2', 'y2' ];
|
||||
break;
|
||||
case 'circle':
|
||||
attrs = [ 'cx', 'cy', 'r' ];
|
||||
break;
|
||||
case 'ellipse':
|
||||
attrs = [ 'cx', 'cy', 'rx', 'ry' ];
|
||||
break;
|
||||
case 'foreignObject':
|
||||
case 'rect':
|
||||
case 'image':
|
||||
attrs = [ 'width', 'height', 'x', 'y' ];
|
||||
break;
|
||||
case 'use':
|
||||
case 'text':
|
||||
case 'tspan':
|
||||
attrs = [ 'x', 'y' ];
|
||||
break;
|
||||
case 'polygon':
|
||||
case 'polyline': {
|
||||
initial = {};
|
||||
initial.points = selected.getAttribute('points');
|
||||
const list = selected.points;
|
||||
const len = list.numberOfItems;
|
||||
changes.points = new Array(len);
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = list.getItem(i);
|
||||
changes.points[i] = { x: pt.x, y: pt.y };
|
||||
}
|
||||
break;
|
||||
} case 'path':
|
||||
initial = {};
|
||||
initial.d = selected.getAttribute('d');
|
||||
changes.d = selected.getAttribute('d');
|
||||
break;
|
||||
case 'line':
|
||||
attrs = [ 'x1', 'y1', 'x2', 'y2' ];
|
||||
break;
|
||||
case 'circle':
|
||||
attrs = [ 'cx', 'cy', 'r' ];
|
||||
break;
|
||||
case 'ellipse':
|
||||
attrs = [ 'cx', 'cy', 'rx', 'ry' ];
|
||||
break;
|
||||
case 'foreignObject':
|
||||
case 'rect':
|
||||
case 'image':
|
||||
attrs = [ 'width', 'height', 'x', 'y' ];
|
||||
break;
|
||||
case 'use':
|
||||
case 'text':
|
||||
case 'tspan':
|
||||
attrs = [ 'x', 'y' ];
|
||||
break;
|
||||
case 'polygon':
|
||||
case 'polyline': {
|
||||
initial = {};
|
||||
initial.points = selected.getAttribute('points');
|
||||
const list = selected.points;
|
||||
const len = list.numberOfItems;
|
||||
changes.points = new Array(len);
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = list.getItem(i);
|
||||
changes.points[i] = { x: pt.x, y: pt.y };
|
||||
}
|
||||
break;
|
||||
} case 'path':
|
||||
initial = {};
|
||||
initial.d = selected.getAttribute('d');
|
||||
changes.d = selected.getAttribute('d');
|
||||
break;
|
||||
} // switch on element type to get initial values
|
||||
|
||||
if (attrs.length) {
|
||||
@@ -702,34 +702,34 @@ export const recalculateDimensions = function (selected) {
|
||||
// Remap all point-based elements
|
||||
m = transformListToTransform(tlist).matrix;
|
||||
switch (selected.tagName) {
|
||||
case 'line':
|
||||
changes = {
|
||||
x1: selected.getAttribute('x1'),
|
||||
y1: selected.getAttribute('y1'),
|
||||
x2: selected.getAttribute('x2'),
|
||||
y2: selected.getAttribute('y2'),
|
||||
};
|
||||
case 'line':
|
||||
changes = {
|
||||
x1: selected.getAttribute('x1'),
|
||||
y1: selected.getAttribute('y1'),
|
||||
x2: selected.getAttribute('x2'),
|
||||
y2: selected.getAttribute('y2'),
|
||||
};
|
||||
// Fallthrough
|
||||
case 'polyline':
|
||||
case 'polygon':
|
||||
changes.points = selected.getAttribute('points');
|
||||
if (changes.points) {
|
||||
const list = selected.points;
|
||||
const len = list.numberOfItems;
|
||||
changes.points = new Array(len);
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = list.getItem(i);
|
||||
changes.points[i] = { x: pt.x, y: pt.y };
|
||||
}
|
||||
case 'polyline':
|
||||
case 'polygon':
|
||||
changes.points = selected.getAttribute('points');
|
||||
if (changes.points) {
|
||||
const list = selected.points;
|
||||
const len = list.numberOfItems;
|
||||
changes.points = new Array(len);
|
||||
for (let i = 0; i < len; ++i) {
|
||||
const pt = list.getItem(i);
|
||||
changes.points[i] = { x: pt.x, y: pt.y };
|
||||
}
|
||||
}
|
||||
// Fallthrough
|
||||
case 'path':
|
||||
changes.d = selected.getAttribute('d');
|
||||
operation = 1;
|
||||
tlist.clear();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
case 'path':
|
||||
changes.d = selected.getAttribute('d');
|
||||
operation = 1;
|
||||
tlist.clear();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// if it was a rotation, put the rotate back and return without a command
|
||||
// (this function has zero work to do for a rotate())
|
||||
|
||||
@@ -237,7 +237,7 @@ export const cloneSelectedElements = function (x, y) {
|
||||
|
||||
function index(el) {
|
||||
if (!el) return -1;
|
||||
var i = 0;
|
||||
let i = 0;
|
||||
do {
|
||||
i++;
|
||||
} while (el == el.previousElementSibling);
|
||||
@@ -300,40 +300,40 @@ export const alignSelectedElements = function (type, relativeTo) {
|
||||
|
||||
// now bbox is axis-aligned and handles rotation
|
||||
switch (relativeTo) {
|
||||
case 'smallest':
|
||||
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
|
||||
case 'smallest':
|
||||
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
|
||||
(curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) ||
|
||||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
|
||||
(curheight === Number.MIN_VALUE || curheight > bboxes[i].height))
|
||||
) {
|
||||
minx = bboxes[i].x;
|
||||
miny = bboxes[i].y;
|
||||
maxx = bboxes[i].x + bboxes[i].width;
|
||||
maxy = bboxes[i].y + bboxes[i].height;
|
||||
curwidth = bboxes[i].width;
|
||||
curheight = bboxes[i].height;
|
||||
}
|
||||
break;
|
||||
case 'largest':
|
||||
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
|
||||
) {
|
||||
minx = bboxes[i].x;
|
||||
miny = bboxes[i].y;
|
||||
maxx = bboxes[i].x + bboxes[i].width;
|
||||
maxy = bboxes[i].y + bboxes[i].height;
|
||||
curwidth = bboxes[i].width;
|
||||
curheight = bboxes[i].height;
|
||||
}
|
||||
break;
|
||||
case 'largest':
|
||||
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
|
||||
(curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) ||
|
||||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
|
||||
(curheight === Number.MIN_VALUE || curheight < bboxes[i].height))
|
||||
) {
|
||||
minx = bboxes[i].x;
|
||||
miny = bboxes[i].y;
|
||||
maxx = bboxes[i].x + bboxes[i].width;
|
||||
maxy = bboxes[i].y + bboxes[i].height;
|
||||
curwidth = bboxes[i].width;
|
||||
curheight = bboxes[i].height;
|
||||
}
|
||||
break;
|
||||
default: // 'selected'
|
||||
if (bboxes[i].x < minx) { minx = bboxes[i].x; }
|
||||
if (bboxes[i].y < miny) { miny = bboxes[i].y; }
|
||||
if (bboxes[i].x + bboxes[i].width > maxx) { maxx = bboxes[i].x + bboxes[i].width; }
|
||||
if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height; }
|
||||
break;
|
||||
) {
|
||||
minx = bboxes[i].x;
|
||||
miny = bboxes[i].y;
|
||||
maxx = bboxes[i].x + bboxes[i].width;
|
||||
maxy = bboxes[i].y + bboxes[i].height;
|
||||
curwidth = bboxes[i].width;
|
||||
curheight = bboxes[i].height;
|
||||
}
|
||||
break;
|
||||
default: // 'selected'
|
||||
if (bboxes[i].x < minx) { minx = bboxes[i].x; }
|
||||
if (bboxes[i].y < miny) { miny = bboxes[i].y; }
|
||||
if (bboxes[i].x + bboxes[i].width > maxx) { maxx = bboxes[i].x + bboxes[i].width; }
|
||||
if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height; }
|
||||
break;
|
||||
}
|
||||
} // loop for each element to find the bbox and adjust min/max
|
||||
|
||||
@@ -353,30 +353,30 @@ export const alignSelectedElements = function (type, relativeTo) {
|
||||
dx[i] = 0;
|
||||
dy[i] = 0;
|
||||
switch (type) {
|
||||
case 'l': // left (horizontal)
|
||||
case 'left': // left (horizontal)
|
||||
dx[i] = minx - bbox.x;
|
||||
break;
|
||||
case 'c': // center (horizontal)
|
||||
case 'center': // center (horizontal)
|
||||
dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
|
||||
break;
|
||||
case 'r': // right (horizontal)
|
||||
case 'right': // right (horizontal)
|
||||
dx[i] = maxx - (bbox.x + bbox.width);
|
||||
break;
|
||||
case 't': // top (vertical)
|
||||
case 'top': // top (vertical)
|
||||
dy[i] = miny - bbox.y;
|
||||
break;
|
||||
case 'm': // middle (vertical)
|
||||
case 'middle': // middle (vertical)
|
||||
dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
|
||||
break;
|
||||
case 'b': // bottom (vertical)
|
||||
case 'bottom': // bottom (vertical)
|
||||
dy[i] = maxy - (bbox.y + bbox.height);
|
||||
break;
|
||||
case 'l': // left (horizontal)
|
||||
case 'left': // left (horizontal)
|
||||
dx[i] = minx - bbox.x;
|
||||
break;
|
||||
case 'c': // center (horizontal)
|
||||
case 'center': // center (horizontal)
|
||||
dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
|
||||
break;
|
||||
case 'r': // right (horizontal)
|
||||
case 'right': // right (horizontal)
|
||||
dx[i] = maxx - (bbox.x + bbox.width);
|
||||
break;
|
||||
case 't': // top (vertical)
|
||||
case 'top': // top (vertical)
|
||||
dy[i] = miny - bbox.y;
|
||||
break;
|
||||
case 'm': // middle (vertical)
|
||||
case 'middle': // middle (vertical)
|
||||
dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
|
||||
break;
|
||||
case 'b': // bottom (vertical)
|
||||
case 'bottom': // bottom (vertical)
|
||||
dy[i] = maxy - (bbox.y + bbox.height);
|
||||
break;
|
||||
}
|
||||
}
|
||||
moveSelectedElements(dx, dy);
|
||||
@@ -460,15 +460,15 @@ export const groupSelectedElements = function (type, urlArg) {
|
||||
|
||||
// eslint-disable-next-line sonarjs/no-small-switch
|
||||
switch (type) {
|
||||
case 'a': {
|
||||
cmdStr = 'Make hyperlink';
|
||||
url = urlArg || '';
|
||||
break;
|
||||
} default: {
|
||||
type = 'g';
|
||||
cmdStr = 'Group Elements';
|
||||
break;
|
||||
}
|
||||
case 'a': {
|
||||
cmdStr = 'Make hyperlink';
|
||||
url = urlArg || '';
|
||||
break;
|
||||
} default: {
|
||||
type = 'g';
|
||||
cmdStr = 'Group Elements';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const batchCmd = new BatchCommand(cmdStr);
|
||||
|
||||
@@ -247,31 +247,31 @@ export const svgToString = function (elem, indent) {
|
||||
for (let i = 0; i < childs.length; i++) {
|
||||
const child = childs.item(i);
|
||||
switch (child.nodeType) {
|
||||
case 1: // element node
|
||||
out.push('\n');
|
||||
out.push(this.svgToString(child, indent));
|
||||
break;
|
||||
case 3: { // text node
|
||||
const str = child.nodeValue.replace(/^\s+|\s+$/g, '');
|
||||
if (str !== '') {
|
||||
bOneLine = true;
|
||||
out.push(String(toXml(str)));
|
||||
}
|
||||
break;
|
||||
} case 4: // cdata node
|
||||
out.push('\n');
|
||||
out.push(new Array(indent + 1).join(' '));
|
||||
out.push('<![CDATA[');
|
||||
out.push(child.nodeValue);
|
||||
out.push(']]>');
|
||||
break;
|
||||
case 8: // comment
|
||||
out.push('\n');
|
||||
out.push(new Array(indent + 1).join(' '));
|
||||
out.push('<!--');
|
||||
out.push(child.data);
|
||||
out.push('-->');
|
||||
break;
|
||||
case 1: // element node
|
||||
out.push('\n');
|
||||
out.push(this.svgToString(child, indent));
|
||||
break;
|
||||
case 3: { // text node
|
||||
const str = child.nodeValue.replace(/^\s+|\s+$/g, '');
|
||||
if (str !== '') {
|
||||
bOneLine = true;
|
||||
out.push(String(toXml(str)));
|
||||
}
|
||||
break;
|
||||
} case 4: // cdata node
|
||||
out.push('\n');
|
||||
out.push(new Array(indent + 1).join(' '));
|
||||
out.push('<![CDATA[');
|
||||
out.push(child.nodeValue);
|
||||
out.push(']]>');
|
||||
break;
|
||||
case 8: // comment
|
||||
out.push('\n');
|
||||
out.push(new Array(indent + 1).join(' '));
|
||||
out.push('<!--');
|
||||
out.push(child.data);
|
||||
out.push('-->');
|
||||
break;
|
||||
} // switch on node type
|
||||
}
|
||||
indent--;
|
||||
|
||||
@@ -209,7 +209,7 @@ class SvgCanvas {
|
||||
return this._storage.has(element) && this._storage.get(element).has(key);
|
||||
},
|
||||
remove: function (element, key) {
|
||||
var ret = this._storage.get(element).delete(key);
|
||||
let ret = this._storage.get(element).delete(key);
|
||||
if (!this._storage.get(element).size === 0) {
|
||||
this._storage.delete(element);
|
||||
}
|
||||
@@ -787,65 +787,49 @@ class SvgCanvas {
|
||||
*/
|
||||
|
||||
// Object to contain image data for raster images that were found encodable
|
||||
const encodableImages = {},
|
||||
const encodableImages = {};
|
||||
// Object with save options
|
||||
/**
|
||||
* @type {module:svgcanvas.SaveOptions}
|
||||
*/
|
||||
const saveOptions = { round_digits: 5 };
|
||||
// Object with IDs for imported files, to see if one was already added
|
||||
const importIds = {};
|
||||
// Current text style properties
|
||||
const curText = allProperties.text;
|
||||
// Object to contain all included extensions
|
||||
const extensions = {};
|
||||
// Map of deleted reference elements
|
||||
const removedElements = {};
|
||||
|
||||
// Object with save options
|
||||
/**
|
||||
* @type {module:svgcanvas.SaveOptions}
|
||||
*/
|
||||
saveOptions = { round_digits: 5 },
|
||||
|
||||
// Object with IDs for imported files, to see if one was already added
|
||||
importIds = {},
|
||||
|
||||
// Current text style properties
|
||||
curText = allProperties.text,
|
||||
|
||||
// Object to contain all included extensions
|
||||
extensions = {},
|
||||
|
||||
// Map of deleted reference elements
|
||||
removedElements = {};
|
||||
|
||||
let
|
||||
// String with image URL of last loadable image
|
||||
lastGoodImgUrl = curConfig.imgPath + 'logo.svg',
|
||||
|
||||
// Boolean indicating whether or not a draw action has been started
|
||||
started = false,
|
||||
|
||||
// String with an element's initial transform attribute value
|
||||
startTransform = null,
|
||||
|
||||
// String indicating the current editor mode
|
||||
currentMode = 'select',
|
||||
|
||||
// String with the current direction in which an element is being resized
|
||||
currentResizeMode = 'none',
|
||||
|
||||
// Current general properties
|
||||
curProperties = curShape,
|
||||
|
||||
// Array with selected elements' Bounding box object
|
||||
// selectedBBoxes = new Array(1),
|
||||
|
||||
// The DOM element that was just selected
|
||||
justSelected = null,
|
||||
|
||||
// DOM element for selection rectangle drawn by the user
|
||||
rubberBox = null,
|
||||
|
||||
// Array of current BBoxes, used in getIntersectionList().
|
||||
curBBoxes = [],
|
||||
|
||||
// Canvas point for the most recent right click
|
||||
lastClickPoint = null;
|
||||
// String with image URL of last loadable image
|
||||
let lastGoodImgUrl = curConfig.imgPath + 'logo.svg';
|
||||
// Boolean indicating whether or not a draw action has been started
|
||||
let started = false;
|
||||
// String with an element's initial transform attribute value
|
||||
let startTransform = null;
|
||||
// String indicating the current editor mode
|
||||
let currentMode = 'select';
|
||||
// String with the current direction in which an element is being resized
|
||||
let currentResizeMode = 'none';
|
||||
// Current general properties
|
||||
let curProperties = curShape;
|
||||
// Array with selected elements' Bounding box object
|
||||
// selectedBBoxes = new Array(1),
|
||||
// The DOM element that was just selected
|
||||
let justSelected = null;
|
||||
// DOM element for selection rectangle drawn by the user
|
||||
let rubberBox = null;
|
||||
// Array of current BBoxes, used in getIntersectionList().
|
||||
let curBBoxes = [];
|
||||
// Canvas point for the most recent right click
|
||||
let lastClickPoint = null;
|
||||
|
||||
this.runExtension = function (name, action, vars) {
|
||||
return this.runExtensions(action, vars, false, (n) => n === name);
|
||||
};
|
||||
/* eslint-disable max-len */
|
||||
/**
|
||||
/* eslint-disable max-len */
|
||||
/**
|
||||
* @todo Consider: Should this return an array by default, so extension results aren't overwritten?
|
||||
* @todo Would be easier to document if passing in object with key of action and vars as value; could then define an interface which tied both together
|
||||
* @function module:svgcanvas.SvgCanvas#runExtensions
|
||||
@@ -855,7 +839,7 @@ class SvgCanvas {
|
||||
* @param {module:svgcanvas.ExtensionNameFilter} nameFilter
|
||||
* @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus.
|
||||
*/
|
||||
/* eslint-enable max-len */
|
||||
/* eslint-enable max-len */
|
||||
|
||||
this.runExtensions = runExtensionsMethod;
|
||||
|
||||
@@ -1037,14 +1021,14 @@ class SvgCanvas {
|
||||
* @event module:svgcanvas.SvgCanvas#event:exportedPDF
|
||||
* @type {module:svgcanvas.PDFExportedResults}
|
||||
*/
|
||||
/* eslint-disable max-len */
|
||||
/**
|
||||
/* eslint-disable max-len */
|
||||
/**
|
||||
* Creating a cover-all class until {@link https://github.com/jsdoc3/jsdoc/issues/1545} may be supported.
|
||||
* `undefined` may be returned by {@link module:svgcanvas.SvgCanvas#event:extension_added} if the extension's `init` returns `undefined` It is also the type for the following events "zoomDone", "unsetnonce", "cleared", and "extensions_added".
|
||||
* @event module:svgcanvas.SvgCanvas#event:GenericCanvasEvent
|
||||
* @type {module:svgcanvas.SvgCanvas#event:selected|module:svgcanvas.SvgCanvas#event:changed|module:svgcanvas.SvgCanvas#event:contextset|module:svgcanvas.SvgCanvas#event:pointsAdded|module:svgcanvas.SvgCanvas#event:extension_added|module:svgcanvas.SvgCanvas#event:extensions_added|module:svgcanvas.SvgCanvas#event:message|module:svgcanvas.SvgCanvas#event:transition|module:svgcanvas.SvgCanvas#event:zoomed|module:svgcanvas.SvgCanvas#event:updateCanvas|module:svgcanvas.SvgCanvas#event:saved|module:svgcanvas.SvgCanvas#event:exported|module:svgcanvas.SvgCanvas#event:exportedPDF|module:svgcanvas.SvgCanvas#event:setnonce|module:svgcanvas.SvgCanvas#event:unsetnonce|void}
|
||||
*/
|
||||
/* eslint-enable max-len */
|
||||
/* eslint-enable max-len */
|
||||
|
||||
/**
|
||||
* The promise return, if present, resolves to `undefined`
|
||||
@@ -1059,7 +1043,7 @@ class SvgCanvas {
|
||||
* @listens module:svgcanvas.SvgCanvas#event:GenericCanvasEvent
|
||||
* @returns {module:svgcanvas.EventHandlerReturn}
|
||||
*/
|
||||
/* eslint-disable max-len */
|
||||
/* eslint-disable max-len */
|
||||
/**
|
||||
* Attaches a callback function to an event.
|
||||
* @function module:svgcanvas.SvgCanvas#bind
|
||||
@@ -1067,7 +1051,7 @@ class SvgCanvas {
|
||||
* @param {module:svgcanvas.EventHandler} f - The callback function to bind to the event
|
||||
* @returns {module:svgcanvas.EventHandler} The previous event
|
||||
*/
|
||||
/* eslint-enable max-len */
|
||||
/* eslint-enable max-len */
|
||||
canvas.bind = function (ev, f) {
|
||||
const old = events[ev];
|
||||
events[ev] = f;
|
||||
|
||||
@@ -628,70 +628,70 @@ export const getBBox = function (elem) {
|
||||
|
||||
let ret = null;
|
||||
switch (elname) {
|
||||
case 'text':
|
||||
if (selected.textContent === '') {
|
||||
selected.textContent = 'a'; // Some character needed for the selector to use.
|
||||
ret = selected.getBBox();
|
||||
selected.textContent = '';
|
||||
} else if (selected.getBBox) {
|
||||
ret = selected.getBBox();
|
||||
}
|
||||
break;
|
||||
case 'path':
|
||||
if (!supportsPathBBox()) {
|
||||
ret = getPathBBox(selected);
|
||||
} else if (selected.getBBox) {
|
||||
ret = selected.getBBox();
|
||||
}
|
||||
break;
|
||||
case 'g':
|
||||
case 'a':
|
||||
ret = groupBBFix(selected);
|
||||
break;
|
||||
default:
|
||||
case 'text':
|
||||
if (selected.textContent === '') {
|
||||
selected.textContent = 'a'; // Some character needed for the selector to use.
|
||||
ret = selected.getBBox();
|
||||
selected.textContent = '';
|
||||
} else if (selected.getBBox) {
|
||||
ret = selected.getBBox();
|
||||
}
|
||||
break;
|
||||
case 'path':
|
||||
if (!supportsPathBBox()) {
|
||||
ret = getPathBBox(selected);
|
||||
} else if (selected.getBBox) {
|
||||
ret = selected.getBBox();
|
||||
}
|
||||
break;
|
||||
case 'g':
|
||||
case 'a':
|
||||
ret = groupBBFix(selected);
|
||||
break;
|
||||
default:
|
||||
|
||||
if (elname === 'use') {
|
||||
ret = groupBBFix(selected); // , true);
|
||||
if (elname === 'use') {
|
||||
ret = groupBBFix(selected); // , true);
|
||||
}
|
||||
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;
|
||||
}
|
||||
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 = {
|
||||
} else if (visElemsArr.includes(elname)) {
|
||||
if (selected) {
|
||||
try {
|
||||
ret = selected.getBBox();
|
||||
} catch (err) {
|
||||
// tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268
|
||||
// Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835
|
||||
const extent = selected.getExtentOfChar(0); // pos+dimensions of the first glyph
|
||||
const width = selected.getComputedTextLength(); // width of the tspan
|
||||
ret = {
|
||||
x: extent.x,
|
||||
y: extent.y,
|
||||
width,
|
||||
height,
|
||||
x: x + Number.parseFloat(selected.getAttribute('x') || 0),
|
||||
y: y + Number.parseFloat(selected.getAttribute('y') || 0)
|
||||
height: extent.height
|
||||
};
|
||||
ret = bb;
|
||||
}
|
||||
} else if (visElemsArr.includes(elname)) {
|
||||
if (selected) {
|
||||
try {
|
||||
ret = selected.getBBox();
|
||||
} catch (err) {
|
||||
// tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268
|
||||
// Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835
|
||||
const extent = selected.getExtentOfChar(0); // pos+dimensions of the first glyph
|
||||
const width = selected.getComputedTextLength(); // width of the tspan
|
||||
ret = {
|
||||
x: extent.x,
|
||||
y: extent.y,
|
||||
width,
|
||||
height: extent.height
|
||||
};
|
||||
}
|
||||
} else {
|
||||
// Check if element is child of a foreignObject
|
||||
const fo = getClosest(selected.parentNode, 'foreignObject');
|
||||
if (fo.length && fo[0].getBBox) {
|
||||
ret = fo[0].getBBox();
|
||||
}
|
||||
} else {
|
||||
// Check if element is child of a foreignObject
|
||||
const fo = getClosest(selected.parentNode, 'foreignObject');
|
||||
if (fo.length && fo[0].getBBox) {
|
||||
ret = fo[0].getBBox();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (ret) {
|
||||
ret = bboxToObj(ret);
|
||||
@@ -739,76 +739,76 @@ export const getPathDFromElement = function (elem) {
|
||||
let num = 1.81;
|
||||
let d, rx, ry;
|
||||
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');
|
||||
if (elem.tagName === 'circle' && elem.hasAttribute('r')) {
|
||||
ry = elem.getAttribute('r');
|
||||
rx = ry;
|
||||
}
|
||||
d = getPathDFromSegments([
|
||||
[ 'M', [ (cx - rx), (cy) ] ],
|
||||
[ 'C', [ (cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry) ] ],
|
||||
[ 'C', [ (cx + rx / num), (cy - ry), (cx + rx), (cy - ry / num), (cx + rx), (cy) ] ],
|
||||
[ 'C', [ (cx + rx), (cy + ry / num), (cx + rx / num), (cy + ry), (cx), (cy + ry) ] ],
|
||||
[ 'C', [ (cx - rx / num), (cy + ry), (cx - rx), (cy + ry / num), (cx - rx), (cy) ] ],
|
||||
case 'ellipse':
|
||||
case 'circle': {
|
||||
rx = elem.getAttribute('rx');
|
||||
ry = elem.getAttribute('ry');
|
||||
const cx = elem.getAttribute('cx');
|
||||
const cy = elem.getAttribute('cy');
|
||||
if (elem.tagName === 'circle' && elem.hasAttribute('r')) {
|
||||
ry = elem.getAttribute('r');
|
||||
rx = ry;
|
||||
}
|
||||
d = getPathDFromSegments([
|
||||
[ 'M', [ (cx - rx), (cy) ] ],
|
||||
[ 'C', [ (cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry) ] ],
|
||||
[ 'C', [ (cx + rx / num), (cy - ry), (cx + rx), (cy - ry / num), (cx + rx), (cy) ] ],
|
||||
[ 'C', [ (cx + rx), (cy + ry / num), (cx + rx / num), (cy + ry), (cx), (cy + ry) ] ],
|
||||
[ 'C', [ (cx - rx / num), (cy + ry), (cx - rx), (cy + ry / num), (cx - rx), (cy) ] ],
|
||||
[ 'Z', [] ]
|
||||
]);
|
||||
break;
|
||||
} case 'path':
|
||||
d = elem.getAttribute('d');
|
||||
break;
|
||||
case 'line': {
|
||||
const x1 = elem.getAttribute('x1');
|
||||
const y1 = elem.getAttribute('y1');
|
||||
const x2 = elem.getAttribute('x2');
|
||||
const y2 = elem.getAttribute('y2');
|
||||
d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2;
|
||||
}
|
||||
break;
|
||||
case 'polyline':
|
||||
d = 'M' + elem.getAttribute('points');
|
||||
break;
|
||||
case 'polygon':
|
||||
d = 'M' + elem.getAttribute('points') + ' Z';
|
||||
break;
|
||||
case 'rect': {
|
||||
rx = elem.getAttribute('rx');
|
||||
ry = elem.getAttribute('ry');
|
||||
const b = elem.getBBox();
|
||||
const { x, y } = b,
|
||||
w = b.width,
|
||||
h = b.height;
|
||||
num = 4 - num; // Why? Because!
|
||||
|
||||
d = (!rx && !ry)
|
||||
// Regular rect
|
||||
? getPathDFromSegments([
|
||||
[ 'M', [ x, y ] ],
|
||||
[ 'L', [ x + w, y ] ],
|
||||
[ 'L', [ x + w, y + h ] ],
|
||||
[ 'L', [ x, y + h ] ],
|
||||
[ 'L', [ x, y ] ],
|
||||
[ 'Z', [] ]
|
||||
])
|
||||
: getPathDFromSegments([
|
||||
[ 'M', [ x, y + ry ] ],
|
||||
[ 'C', [ x, y + ry / num, x + rx / num, y, x + rx, y ] ],
|
||||
[ 'L', [ x + w - rx, y ] ],
|
||||
[ 'C', [ x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry ] ],
|
||||
[ 'L', [ x + w, y + h - ry ] ],
|
||||
[ 'C', [ x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h ] ],
|
||||
[ 'L', [ x + rx, y + h ] ],
|
||||
[ 'C', [ x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry ] ],
|
||||
[ 'L', [ x, y + ry ] ],
|
||||
[ 'Z', [] ]
|
||||
]);
|
||||
break;
|
||||
} case 'path':
|
||||
d = elem.getAttribute('d');
|
||||
break;
|
||||
case 'line': {
|
||||
const x1 = elem.getAttribute('x1');
|
||||
const y1 = elem.getAttribute('y1');
|
||||
const x2 = elem.getAttribute('x2');
|
||||
const y2 = elem.getAttribute('y2');
|
||||
d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2;
|
||||
}
|
||||
break;
|
||||
case 'polyline':
|
||||
d = 'M' + elem.getAttribute('points');
|
||||
break;
|
||||
case 'polygon':
|
||||
d = 'M' + elem.getAttribute('points') + ' Z';
|
||||
break;
|
||||
case 'rect': {
|
||||
rx = elem.getAttribute('rx');
|
||||
ry = elem.getAttribute('ry');
|
||||
const b = elem.getBBox();
|
||||
const { x, y } = b,
|
||||
w = b.width,
|
||||
h = b.height;
|
||||
num = 4 - num; // Why? Because!
|
||||
|
||||
d = (!rx && !ry)
|
||||
// Regular rect
|
||||
? getPathDFromSegments([
|
||||
[ 'M', [ x, y ] ],
|
||||
[ 'L', [ x + w, y ] ],
|
||||
[ 'L', [ x + w, y + h ] ],
|
||||
[ 'L', [ x, y + h ] ],
|
||||
[ 'L', [ x, y ] ],
|
||||
[ 'Z', [] ]
|
||||
])
|
||||
: getPathDFromSegments([
|
||||
[ 'M', [ x, y + ry ] ],
|
||||
[ 'C', [ x, y + ry / num, x + rx / num, y, x + rx, y ] ],
|
||||
[ 'L', [ x + w - rx, y ] ],
|
||||
[ 'C', [ x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry ] ],
|
||||
[ 'L', [ x + w, y + h - ry ] ],
|
||||
[ 'C', [ x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h ] ],
|
||||
[ 'L', [ x + rx, y + h ] ],
|
||||
[ 'C', [ x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry ] ],
|
||||
[ 'L', [ x, y + ry ] ],
|
||||
[ 'Z', [] ]
|
||||
]);
|
||||
break;
|
||||
} default:
|
||||
break;
|
||||
break;
|
||||
} default:
|
||||
break;
|
||||
}
|
||||
|
||||
return d;
|
||||
|
||||
Reference in New Issue
Block a user