aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--spec/spec/elements/ClipPath.js2
-rw-r--r--spec/spec/elements/Gradient.js83
-rw-r--r--spec/spec/gradient.js86
-rw-r--r--src/elements/Gradient.js42
-rw-r--r--src/elements/Stop.js10
-rw-r--r--src/main.js1
6 files changed, 156 insertions, 68 deletions
diff --git a/spec/spec/elements/ClipPath.js b/spec/spec/elements/ClipPath.js
index 6ed6bfe..a476884 100644
--- a/spec/spec/elements/ClipPath.js
+++ b/spec/spec/elements/ClipPath.js
@@ -32,7 +32,7 @@ describe('ClipPath.js', () => {
})
})
- describe('target()', () => {
+ describe('targets()', () => {
it('gets all targets of this clipPath', () => {
const canvas = SVG().addTo(container)
const clip = canvas.clip()
diff --git a/spec/spec/elements/Gradient.js b/spec/spec/elements/Gradient.js
new file mode 100644
index 0000000..13e58a7
--- /dev/null
+++ b/spec/spec/elements/Gradient.js
@@ -0,0 +1,83 @@
+/* globals describe, expect, it, spyOn, jasmine, container */
+
+import { Gradient, SVG, Container } from '../../../src/main.js'
+
+const { any, objectContaining, createSpy } = jasmine
+
+describe('Gradient.js', () => {
+ describe('()', () => {
+ it('creates a new object of type LinearGradient', () => {
+ const gradient = new Gradient('linear')
+ expect(gradient).toEqual(any(Gradient))
+ expect(gradient.type).toBe('linearGradient')
+ })
+
+ it('creates a new object of type RadialGradient', () => {
+ const gradient = new Gradient('radial')
+ expect(gradient).toEqual(any(Gradient))
+ expect(gradient.type).toBe('radialGradient')
+ })
+
+ it('sets passed attributes on the element', () => {
+ expect(new Gradient('linear', { id: 'foo' }).id()).toBe('foo')
+ })
+ })
+
+ describe('attr()', () => {
+ it('relays to parents attr method for any call except transformation', () => {
+ const gradient = new Gradient('linear')
+ const spy = spyOn(Container.prototype, 'attr')
+ gradient.attr(1, 2, 3)
+ gradient.attr('transform', 2, 3)
+
+ expect(spy).toHaveBeenCalledWith(1, 2, 3)
+ expect(spy).toHaveBeenCalledWith('gradientTransform', 2, 3)
+ })
+ })
+
+ describe('bbox()', () => {
+ it('returns an empty box', () => {
+ expect(new Gradient('linear').bbox().isNulled()).toBe(true)
+ })
+ })
+
+ describe('targets()', () => {
+ it('gets all targets of this gradient', () => {
+ const canvas = SVG().addTo(container)
+ const gradient = canvas.gradient('linear')
+ const rect = canvas.rect(100, 100).fill(gradient)
+ expect(gradient.targets()).toEqual([ rect ])
+ })
+ })
+
+ describe('toString()', () => {
+ it('calls url() and returns the result', () => {
+ const gradient = new Gradient('linear')
+ expect(gradient.toString()).toBe(gradient.url())
+ })
+ })
+
+ describe('update()', () => {
+ it('clears the element', () => {
+ const gradient = new Gradient('linear')
+ gradient.stop(0.1, '#fff')
+ expect(gradient.update().children()).toEqual([])
+ })
+
+ it('executes a function in the context of the gradient', () => {
+ const gradient = new Gradient('linear')
+ const spy = createSpy('gradient')
+ gradient.update(spy)
+ expect(spy.calls.all()).toEqual([
+ objectContaining({ object: gradient, args: [ gradient ] })
+ ])
+ })
+ })
+
+ describe('url()', () => {
+ it('returns url(#id)', () => {
+ const gradient = new Gradient('linear').id('foo')
+ expect(gradient.url()).toBe('url("#foo")')
+ })
+ })
+})
diff --git a/spec/spec/gradient.js b/spec/spec/gradient.js
index cab9142..7280a98 100644
--- a/spec/spec/gradient.js
+++ b/spec/spec/gradient.js
@@ -1,101 +1,101 @@
-describe('Gradient', function() {
+describe('Gradient', function () {
var rect, gradient
- beforeEach(function() {
- rect = draw.rect(100,100)
- gradient = draw.gradient('linear', function(add) {
+ beforeEach(function () {
+ rect = draw.rect(100, 100)
+ gradient = draw.gradient('linear', function (add) {
add.stop({ offset: 0, color: '#333', opacity: 1 })
add.stop({ offset: 1, color: '#fff', opacity: 1 })
})
- radial = draw.gradient('radial', function(add) {
+ radial = draw.gradient('radial', function (add) {
add.stop({ offset: 0, color: '#333', opacity: 1 })
add.stop({ offset: 1, color: '#fff', opacity: 1 })
})
})
- afterEach(function() {
+ afterEach(function () {
rect.remove()
gradient.remove()
})
- it('is an instance of SVG.Gradient', function() {
+ it('is an instance of SVG.Gradient', function () {
expect(gradient instanceof SVG.Gradient).toBe(true)
})
- it('allows creation of a new gradient without block', function() {
+ it('allows creation of a new gradient without block', function () {
gradient = draw.gradient('linear')
expect(gradient.children().length).toBe(0)
})
- describe('url()', function() {
- it('returns the id of the gradient wrapped in url()', function() {
- expect(gradient.url()).toBe('url(#' + gradient.id() + ')')
+ describe('url()', function () {
+ it('returns the id of the gradient wrapped in url()', function () {
+ expect(gradient.url()).toBe('url("#' + gradient.id() + '")')
})
})
-
- describe('from()', function() {
- it('sets fx and fy attribute for radial gradients', function() {
+
+ describe('from()', function () {
+ it('sets fx and fy attribute for radial gradients', function () {
radial.from(7, 10)
expect(radial.attr('fx')).toBe(7)
expect(radial.attr('fy')).toBe(10)
})
- it('sets x1 and y1 attribute for linear gradients', function() {
+ it('sets x1 and y1 attribute for linear gradients', function () {
gradient.from(7, 10)
expect(gradient.attr('x1')).toBe(7)
expect(gradient.attr('y1')).toBe(10)
})
})
-
- describe('to()', function() {
- it('sets cx and cy attribute for radial gradients', function() {
+
+ describe('to()', function () {
+ it('sets cx and cy attribute for radial gradients', function () {
radial.to(75, 105)
expect(radial.attr('cx')).toBe(75)
expect(radial.attr('cy')).toBe(105)
})
- it('sets x2 and y2 attribute for linear gradients', function() {
+ it('sets x2 and y2 attribute for linear gradients', function () {
gradient.to(75, 105)
expect(gradient.attr('x2')).toBe(75)
expect(gradient.attr('y2')).toBe(105)
})
})
- describe('attr()', function() {
- it('will catch transform attribues and convert them to gradientTransform', function() {
- expect(gradient.translate(100,100).attr('gradientTransform')).toBe('matrix(1,0,0,1,100,100)')
+ describe('attr()', function () {
+ it('will catch transform attribues and convert them to gradientTransform', function () {
+ expect(gradient.translate(100, 100).attr('gradientTransform')).toBe('matrix(1,0,0,1,100,100)')
})
})
- describe('toString()', function() {
- it('returns the id of the gradient wrapped in url()', function() {
- expect(gradient + '').toBe('url(#' + gradient.id() + ')')
+ describe('toString()', function () {
+ it('returns the id of the gradient wrapped in url()', function () {
+ expect(gradient + '').toBe('url("#' + gradient.id() + '")')
})
- it('is called when instance is passed as an attribute value', function() {
+ it('is called when instance is passed as an attribute value', function () {
rect.attr('fill', gradient)
- expect(rect.attr('fill')).toBe('url(#' + gradient.id() + ')')
+ expect(rect.attr('fill')).toBe('url("#' + gradient.id() + '")')
})
})
- describe('input values', function() {
+ describe('input values', function () {
var s1, s2
- it('accepts floats', function() {
- gradient = draw.gradient('linear', function(add) {
+ it('accepts floats', function () {
+ gradient = draw.gradient('linear', function (add) {
s1 = add.stop({ offset: 0.12, color: '#333', opacity: 1 })
s2 = add.stop({ offset: 0.93, color: '#fff', opacity: 1 })
})
expect(s1.attr('offset')).toBe(0.12)
expect(s2.attr('offset')).toBe(0.93)
})
- it('accepts string floats', function() {
- gradient = draw.gradient('linear', function(add) {
+ it('accepts string floats', function () {
+ gradient = draw.gradient('linear', function (add) {
s1 = add.stop({ offset: '0.13', color: '#333', opacity: 1 })
s2 = add.stop({ offset: '0.92', color: '#fff', opacity: 1 })
})
expect(s1.attr('offset')).toBe(0.13)
expect(s2.attr('offset')).toBe(0.92)
})
- it('accept percentages', function() {
- gradient = draw.gradient('linear', function(add) {
+ it('accept percentages', function () {
+ gradient = draw.gradient('linear', function (add) {
s1 = add.stop({ offset: '14%', color: '#333', opacity: 1 })
s2 = add.stop({ offset: '91%', color: '#fff', opacity: 1 })
})
@@ -104,23 +104,23 @@ describe('Gradient', function() {
})
})
- describe('update()', function() {
+ describe('update()', function () {
- it('removes all existing children first', function() {
- gradient = draw.gradient('linear', function(add) {
+ it('removes all existing children first', function () {
+ gradient = draw.gradient('linear', function (add) {
s1 = add.stop({ offset: 0.12, color: '#333', opacity: 1 })
s2 = add.stop({ offset: 0.93, color: '#fff', opacity: 1 })
})
expect(gradient.children().length).toBe(2)
- gradient.update(function(add) {
+ gradient.update(function (add) {
s1 = add.stop({ offset: 0.33, color: '#666', opacity: 1 })
s2 = add.stop({ offset: 1, color: '#000', opacity: 1 })
})
expect(gradient.children().length).toBe(2)
})
- it('accepts multiple aruments on fixed positions', function() {
- gradient = draw.gradient('linear', function(add) {
+ it('accepts multiple aruments on fixed positions', function () {
+ gradient = draw.gradient('linear', function (add) {
s1 = add.stop(0.11, '#333')
s2 = add.stop(0.94, '#fff', 0.5)
})
@@ -134,10 +134,10 @@ describe('Gradient', function() {
})
- describe('get()', function() {
+ describe('get()', function () {
- it('returns the stop at a given index', function() {
- gradient = draw.gradient('linear', function(add) {
+ it('returns the stop at a given index', function () {
+ gradient = draw.gradient('linear', function (add) {
s1 = add.stop({ offset: 0.12, color: '#333', opacity: 1 })
s2 = add.stop({ offset: 0.93, color: '#fff', opacity: 1 })
})
diff --git a/src/elements/Gradient.js b/src/elements/Gradient.js
index d5ae8b7..4e09cbd 100644
--- a/src/elements/Gradient.js
+++ b/src/elements/Gradient.js
@@ -7,7 +7,6 @@ import {
import { registerMethods } from '../utils/methods.js'
import Box from '../types/Box.js'
import Container from './Container.js'
-import Stop from './Stop.js'
import baseFind from '../modules/core/selector.js'
import * as gradiented from '../modules/core/gradiented.js'
@@ -19,9 +18,23 @@ export default class Gradient extends Container {
)
}
- // Add a color stop
- stop (offset, color, opacity) {
- return this.put(new Stop()).update(offset, color, opacity)
+ // custom attr to handle transform
+ attr (a, b, c) {
+ if (a === 'transform') a = 'gradientTransform'
+ return super.attr(a, b, c)
+ }
+
+ bbox () {
+ return new Box()
+ }
+
+ targets () {
+ return baseFind('svg [fill*="' + this.id() + '"]')
+ }
+
+ // Alias string conversion to fill
+ toString () {
+ return this.url()
}
// Update gradient
@@ -39,26 +52,7 @@ export default class Gradient extends Container {
// Return the fill id
url () {
- return 'url(#' + this.id() + ')'
- }
-
- // Alias string convertion to fill
- toString () {
- return this.url()
- }
-
- // custom attr to handle transform
- attr (a, b, c) {
- if (a === 'transform') a = 'gradientTransform'
- return super.attr(a, b, c)
- }
-
- targets () {
- return baseFind('svg [fill*="' + this.id() + '"]')
- }
-
- bbox () {
- return new Box()
+ return 'url("#' + this.id() + '")'
}
}
diff --git a/src/elements/Stop.js b/src/elements/Stop.js
index d258b86..d29090c 100644
--- a/src/elements/Stop.js
+++ b/src/elements/Stop.js
@@ -1,6 +1,7 @@
import { nodeOrNew, register } from '../utils/adopter.js'
import Element from './Element.js'
import SVGNumber from '../types/SVGNumber.js'
+import { registerMethods } from '../utils/methods.js'
export default class Stop extends Element {
constructor (node, attrs = node) {
@@ -26,4 +27,13 @@ export default class Stop extends Element {
}
}
+registerMethods({
+ Gradient: {
+ // Add a color stop
+ stop: function (offset, color, opacity) {
+ return this.put(new Stop()).update(offset, color, opacity)
+ }
+ }
+})
+
register(Stop, 'Stop')
diff --git a/src/main.js b/src/main.js
index a8da19f..f95ccf5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -156,6 +156,7 @@ extend(Dom, getMethodsFor('Dom'))
extend(Element, getMethodsFor('Element'))
extend(Shape, getMethodsFor('Shape'))
extend([ Container, Fragment ], getMethodsFor('Container'))
+extend(Gradient, getMethodsFor('Gradient'))
extend(Runner, getMethodsFor('Runner'))
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 03:20:08 +0000