aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--spec/spec/elements/Line.js46
-rw-r--r--spec/spec/elements/Path.js188
-rw-r--r--src/elements/Line.js10
-rw-r--r--src/elements/Path.js39
4 files changed, 248 insertions, 35 deletions
diff --git a/spec/spec/elements/Line.js b/spec/spec/elements/Line.js
index 9fe1871..ebb2406 100644
--- a/spec/spec/elements/Line.js
+++ b/spec/spec/elements/Line.js
@@ -29,6 +29,21 @@ describe('Line.js', () => {
})
})
+ describe('move()', () => {
+ it('returns itself', () => {
+ expect(line.move(0, 0)).toBe(line)
+ })
+
+ it('moves the line along x and y axis', () => {
+ const canvas = SVG().addTo(container)
+ const line = canvas.line(1, 2, 3, 4)
+ line.move(50, 50)
+ expect(line.bbox()).toEqual(objectContaining({
+ x: 50, y: 50, width: 2, height: 2
+ }))
+ })
+ })
+
describe('plot()', () => {
it('relays to array() as getter', () => {
const spy = spyOn(line, 'array')
@@ -42,6 +57,12 @@ describe('Line.js', () => {
expect(spy).toHaveBeenCalledWith({ x1: 1, y1: 2, x2: 3, y2: 4 })
})
+ it('calls attr with line attributes when string given', () => {
+ const spy = spyOn(line, 'attr')
+ line.plot('1, 2, 3, 4')
+ expect(spy).toHaveBeenCalledWith({ x1: 1, y1: 2, x2: 3, y2: 4 })
+ })
+
it('calls attr with line attributes when array given', () => {
const spy = spyOn(line, 'attr')
line.plot([ 1, 2, 3, 4 ])
@@ -61,30 +82,33 @@ describe('Line.js', () => {
})
})
- describe('move()', () => {
+ describe('size()', () => {
it('returns itself', () => {
- expect(line.move(0, 0)).toBe(line)
+ expect(line.size(50, 50)).toBe(line)
})
- it('moves the line along x and y axis', () => {
+ it('sets the size of the line', () => {
const canvas = SVG().addTo(container)
const line = canvas.line(1, 2, 3, 4)
- line.move(50, 50)
+ line.size(50, 50)
expect(line.bbox()).toEqual(objectContaining({
- x: 50, y: 50, width: 2, height: 2
+ width: 50, height: 50, x: 1, y: 2
}))
})
- })
- describe('size()', () => {
- it('returns itself', () => {
- expect(line.size(50, 50)).toBe(line)
+ it('changes height proportionally', () => {
+ const canvas = SVG().addTo(container)
+ const line = canvas.line(1, 2, 3, 4)
+ line.size(50, null)
+ expect(line.bbox()).toEqual(objectContaining({
+ width: 50, height: 50, x: 1, y: 2
+ }))
})
- it('sets the size of the line', () => {
+ it('changes width proportionally', () => {
const canvas = SVG().addTo(container)
const line = canvas.line(1, 2, 3, 4)
- line.size(50, 50)
+ line.size(null, 50)
expect(line.bbox()).toEqual(objectContaining({
width: 50, height: 50, x: 1, y: 2
}))
diff --git a/spec/spec/elements/Path.js b/spec/spec/elements/Path.js
new file mode 100644
index 0000000..e388fdb
--- /dev/null
+++ b/spec/spec/elements/Path.js
@@ -0,0 +1,188 @@
+/* globals describe, expect, beforeEach, it, spyOn, jasmine, container */
+
+import { Path, SVG, PathArray } from '../../../src/main.js'
+
+const { any, objectContaining } = jasmine
+
+describe('Path.js', () => {
+ let path
+
+ beforeEach(() => {
+ path = new Path()
+ })
+
+ describe('()', () => {
+ it('creates a new object of type Path', () => {
+ expect(new Path()).toEqual(any(Path))
+ })
+
+ it('sets passed attributes on the element', () => {
+ expect(new Path({ id: 'foo' }).id()).toBe('foo')
+ })
+ })
+
+ describe('array()', () => {
+ it('returns the underlying PathArray', () => {
+ const array = path.plot('M1 2 3 4').array()
+ expect(array).toEqual(any(PathArray))
+ expect(array).toEqual([ [ 'M', 1, 2 ], [ 'L', 3, 4 ] ])
+ })
+ })
+
+ describe('clear()', () => {
+ it('clears the array cache and returns itself', () => {
+ const array = path.plot('M1 2 3 4').array()
+ expect(path.clear()).toBe(path)
+ expect(array).not.toBe(path._array)
+ })
+ })
+
+ describe('height()', () => {
+ it('gets the height of the path', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ expect(path.height()).toBe(50)
+ })
+
+ it('sets the height of the path and returns itself', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ expect(path.height(100)).toBe(path)
+ expect(path.height()).toBe(100)
+ })
+ })
+
+ describe('move()', () => {
+ it('returns itself', () => {
+ expect(path.move(0, 0)).toBe(path)
+ })
+
+ it('moves the path along x and y axis', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ path.move(50, 50)
+ expect(path.bbox()).toEqual(objectContaining({
+ x: 50, y: 50, width: 50, height: 50
+ }))
+ })
+ })
+
+ describe('plot()', () => {
+ it('relays to array() as getter', () => {
+ const spy = spyOn(path, 'array')
+ path.plot()
+ expect(spy).toHaveBeenCalled()
+ })
+
+ it('works by passing a string', () => {
+ const spy = spyOn(path, 'attr')
+ path.plot('M0 0 50 50')
+ expect(spy).toHaveBeenCalledWith('d', 'M0 0 50 50')
+ })
+
+ it('works with flat array', () => {
+ const spy = spyOn(path, 'attr')
+ path.plot([ 'M', 0, 0, 'L', 50, 50 ])
+ expect(spy).toHaveBeenCalledWith('d', [ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ])
+ })
+
+ it('works with multi array', () => {
+ const spy = spyOn(path, 'attr')
+ path.plot([ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ])
+ expect(spy).toHaveBeenCalledWith('d', [ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ])
+ })
+
+ it('works with PathArray', () => {
+ const spy = spyOn(path, 'attr')
+ path.plot(new PathArray([ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ]))
+ expect(spy).toHaveBeenCalledWith('d', [ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ])
+ })
+ })
+
+ describe('size()', () => {
+ it('returns itself', () => {
+ expect(path.size(50, 50)).toBe(path)
+ })
+
+ it('sets the size of the path', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ path.size(100, 100)
+ expect(path.bbox()).toEqual(objectContaining({
+ width: 100, height: 100, x: 0, y: 0
+ }))
+ })
+
+ it('changes height proportionally', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ path.size(100, null)
+ expect(path.bbox()).toEqual(objectContaining({
+ width: 100, height: 100, x: 0, y: 0
+ }))
+ })
+
+ it('changes width proportionally', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ path.size(null, 100)
+ expect(path.bbox()).toEqual(objectContaining({
+ width: 100, height: 100, x: 0, y: 0
+ }))
+ })
+ })
+
+ describe('targets()', () => {
+ it('gets all targets of this path', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ const textPath = canvas.text('Hello World').path(path)
+ expect(path.targets()).toEqual([ textPath ])
+ })
+ })
+
+ describe('width()', () => {
+ it('gets the width of the path', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ expect(path.width()).toBe(50)
+ })
+
+ it('sets the width of the path and returns itself', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ expect(path.width(100)).toBe(path)
+ expect(path.width()).toBe(100)
+ })
+ })
+
+ describe('x()', () => {
+ it('gets the x position of the path', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M10 10 50, 50')
+ expect(path.x()).toBe(10)
+ })
+
+ it('sets the x position of the path and returns itself', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ expect(path.x(100)).toBe(path)
+ expect(path.x()).toBe(100)
+ })
+ })
+
+ describe('y()', () => {
+ it('gets the y position of the path', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M10 10 50, 50')
+ expect(path.y()).toBe(10)
+ })
+
+ it('sets the y position of the path and returns itself', () => {
+ const canvas = SVG().addTo(container)
+ const path = canvas.path('M0 0 50, 50')
+ expect(path.y(100)).toBe(path)
+ expect(path.y()).toBe(100)
+ })
+ })
+})
diff --git a/src/elements/Line.js b/src/elements/Line.js
index b9982f4..1b72a7d 100644
--- a/src/elements/Line.js
+++ b/src/elements/Line.js
@@ -24,6 +24,11 @@ export default class Line extends Shape {
])
}
+ // Move by left top corner
+ move (x, y) {
+ return this.attr(this.array().move(x, y).toLine())
+ }
+
// Overwrite native plot() method
plot (x1, y1, x2, y2) {
if (x1 == null) {
@@ -37,11 +42,6 @@ export default class Line extends Shape {
return this.attr(x1)
}
- // Move by left top corner
- move (x, y) {
- return this.attr(this.array().move(x, y).toLine())
- }
-
// Set element size to given width and height
size (width, height) {
var p = proportionalSize(this, width, height)
diff --git a/src/elements/Path.js b/src/elements/Path.js
index 8f37319..018a8c6 100644
--- a/src/elements/Path.js
+++ b/src/elements/Path.js
@@ -16,31 +16,26 @@ export default class Path extends Shape {
return this._array || (this._array = new PathArray(this.attr('d')))
}
- // Plot new path
- plot (d) {
- return (d == null) ? this.array()
- : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new PathArray(d)))
- }
-
// Clear array cache
clear () {
delete this._array
return this
}
+ // Set height of element
+ height (height) {
+ return height == null ? this.bbox().height : this.size(this.bbox().width, height)
+ }
+
// Move by left top corner
move (x, y) {
return this.attr('d', this.array().move(x, y))
}
- // Move by left top corner over x-axis
- x (x) {
- return x == null ? this.bbox().x : this.move(x, this.bbox().y)
- }
-
- // Move by left top corner over y-axis
- y (y) {
- return y == null ? this.bbox().y : this.move(this.bbox().x, y)
+ // Plot new path
+ plot (d) {
+ return (d == null) ? this.array()
+ : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new PathArray(d)))
}
// Set element size to given width and height
@@ -49,19 +44,25 @@ export default class Path extends Shape {
return this.attr('d', this.array().size(p.width, p.height))
}
+ targets () {
+ return baseFind('svg textpath [href*="' + this.id() + '"]')
+ }
+
// Set width of element
width (width) {
return width == null ? this.bbox().width : this.size(width, this.bbox().height)
}
- // Set height of element
- height (height) {
- return height == null ? this.bbox().height : this.size(this.bbox().width, height)
+ // Move by left top corner over x-axis
+ x (x) {
+ return x == null ? this.bbox().x : this.move(x, this.bbox().y)
}
- targets () {
- return baseFind('svg textpath [href*="' + this.id() + '"]')
+ // Move by left top corner over y-axis
+ y (y) {
+ return y == null ? this.bbox().y : this.move(this.bbox().x, y)
}
+
}
// Define morphable array
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 03:17:09 +0000