diff options
| -rw-r--r-- | spec/spec/modules/core/containerGeometry.js | 54 | ||||
| -rw-r--r-- | src/modules/core/containerGeometry.js | 9 |
2 files changed, 62 insertions, 1 deletions
diff --git a/spec/spec/modules/core/containerGeometry.js b/spec/spec/modules/core/containerGeometry.js index 011d9a8..2bb2fca 100644 --- a/spec/spec/modules/core/containerGeometry.js +++ b/spec/spec/modules/core/containerGeometry.js @@ -47,6 +47,60 @@ describe('containerGeometry.js', () => { expect(newBox.h).toBeCloseTo(oldBox.h, 4) }) + it('moves nested svgs in a group correctly when calling dmove', () => { + const canvas = SVG().addTo(container) + const g = canvas.group() + const s1 = g.nested().size(100, 100).move(100, 100) + s1.rect(100, 100).move(50, 50).rotate(10) + + const oldBox = g.bbox() + + g.dmove(10, 10) + + const newBox = g.bbox() + + expect(newBox.x).toBeCloseTo(oldBox.x + 10, 4) + expect(newBox.y).toBeCloseTo(oldBox.y + 10, 4) + expect(newBox.w).toBeCloseTo(oldBox.w, 4) + expect(newBox.h).toBeCloseTo(oldBox.h, 4) + }) + + it('moves nested svgs in a group correctly when calling dmove (2)', () => { + const canvas = SVG().addTo(container) + const g = canvas.group() + const s1 = g.nested().move(100, 100) + s1.rect(100, 100).move(50, 50).rotate(10) + + const oldBox = g.bbox() + + g.dmove(10, 10) + + const newBox = g.bbox() + + expect(newBox.x).toBeCloseTo(oldBox.x + 10, 4) + expect(newBox.y).toBeCloseTo(oldBox.y + 10, 4) + expect(newBox.w).toBeCloseTo(oldBox.w, 4) + expect(newBox.h).toBeCloseTo(oldBox.h, 4) + }) + + it('moves nested svgs in a group correctly when calling dmove (3)', () => { + const canvas = SVG().addTo(container) + const g = canvas.group() + const s1 = g.nested() + s1.rect(100, 100).move(50, 50).rotate(10) + + const oldBox = g.bbox() + + g.dmove(10, 10) + + const newBox = g.bbox() + + expect(newBox.x).toBeCloseTo(oldBox.x + 10, 4) + expect(newBox.y).toBeCloseTo(oldBox.y + 10, 4) + expect(newBox.w).toBeCloseTo(oldBox.w, 4) + expect(newBox.h).toBeCloseTo(oldBox.h, 4) + }) + it('it does not fail when hitting elements without bbox', () => { const canvas = SVG().addTo(container) const g = canvas.group() diff --git a/src/modules/core/containerGeometry.js b/src/modules/core/containerGeometry.js index 21139e8..32a3c8e 100644 --- a/src/modules/core/containerGeometry.js +++ b/src/modules/core/containerGeometry.js @@ -1,6 +1,8 @@ import Matrix from '../../types/Matrix.js' import Point from '../../types/Point.js' +import Box from '../../types/Box.js' import { proportionalSize } from '../../utils/utils.js' +import { getWindow } from '../../utils/window.js' export function dmove(dx, dy) { this.children().forEach((child) => { @@ -10,7 +12,12 @@ export function dmove(dx, dy) { // e.g. title and other descriptive elements try { // Get the childs bbox - bbox = child.bbox() + // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1905039 + // Because bbox for nested svgs returns the contents bbox in the coordinate space of the svg itself (weird!), we cant use bbox for svgs + // Therefore we have to use getBoundingClientRect. But THAT is broken (as explained in the bug). + // Funnily enough the broken behavior would work for us but that breaks it in chrome + // So we have to replicate the broken behavior of FF by just reading the attributes of the svg itself + bbox = child.node instanceof getWindow().SVGSVGElement ? new Box(child.attr(['x', 'y', 'width', 'height'])) : child.bbox() } catch (e) { return } |