## Pull Request Process
-When you want to make contriubtions to the project, the process is pretty simple:
+When you want to make contributions to the project, the process is pretty simple:
1. Discuss in an issue or on gitter what you'd like to change
2. Fork the repository to make your own local copy
-SVG.bench.describe('Access a dom attribues vs dom properties vs object properties', function(bench) {
+SVG.bench.describe('Access a dom attributes vs dom properties vs object properties', function(bench) {
bench.test('using an object', function() {
var sum = 0
var obj = {x: "30"}
var obj = bench.draw.rect(100, 100).move(0, 0)
})
- bench.test('using dom attriutes', function () {
+ bench.test('using dom attributes', function () {
var sum = 0
var obj = bench.draw.rect(100, 100).move(0, 0)
var node = obj.node
let canvas = SVG('#canvas')
-// Make the green rectange
+// Make the green rectangle
canvas.rect(200, 400).move(200, 400)
.attr('opacity', 0.3)
.addClass('green')
/* globals jasmine */
/**
- * Jasmine RequestAnimationFrame: a set of helpers for testing funcionality
+ * Jasmine RequestAnimationFrame: a set of helpers for testing functionality
* that uses requestAnimationFrame under the Jasmine BDD framework for JavaScript.
*/
function RAFPlugin (jasmine) {
expect(pid.done(context)).toBe(true)
})
- it('caculates a new value', () => {
+ it('calculates a new value', () => {
const pid = new PID()
expect(pid.step(0, 100, 16, {})).toBe(20)
})
describe('private Methods', () => {
describe('_rememberMorpher()', () => {
- it('adds a morper for a method to the runner', () => {
+ it('adds a morpher for a method to the runner', () => {
const runner = new Runner()
const morpher = new Morphable()
runner._rememberMorpher('move', morpher)
})
describe('_addRunner()', () => {
- it('adds a runenr to the runner array of this element', () => {
+ it('adds a runner to the runner array of this element', () => {
const rect = new Rect()
rect._prepareRunner()
const spy = spyOn(rect._transformationRunners, 'add')
expect(element.x()).toBe(15)
})
- it('retargets corectly', () => {
+ it('retargets correctly', () => {
const element = new Rect().x(10)
const runner = new Runner(100).ease('-').element(element)
runner._queueNumberDelta('x', 10)
expect(element.fill()).toBe('#808080')
})
- it('retargets corectly', () => {
+ it('retargets correctly', () => {
const element = new Rect().x(10)
const runner = new Runner(100).ease('-').element(element)
runner._queueObject('x', 20)
it('does a step in the timeline and runs all runners', () => {
const timeline = new Timeline()
const runner = new Runner(1000)
- timeline.schedule(runner).play() // we have to play because its syncronous here
+ timeline.schedule(runner).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(16)
expect(runner.time()).toBe(16)
})
it('doenst run runners which start later', () => {
const timeline = new Timeline()
const runner = new Runner(1000)
- timeline.schedule(runner, 100).play() // we have to play because its syncronous here
+ timeline.schedule(runner, 100).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(16)
expect(runner.time()).toBe(0)
})
it('doesnt run runners if they are not active', () => {
const timeline = new Timeline()
const runner = new Runner(1000).active(false)
- timeline.schedule(runner).play() // we have to play because its syncronous here
+ timeline.schedule(runner).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(16)
expect(runner.time()).toBe(0)
})
it('unschedules runner if its finished', () => {
const timeline = new Timeline()
const runner = new Runner(1000)
- timeline.schedule(runner).play() // we have to play because its syncronous here
+ timeline.schedule(runner).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(1000)
jasmine.RequestAnimationFrame.tick(1)
expect(runner.time()).toBe(1001)
it('does not unschedule if runner is persistent forever', () => {
const timeline = new Timeline()
const runner = new Runner(1000).persist(true)
- timeline.schedule(runner).play() // we have to play because its syncronous here
+ timeline.schedule(runner).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(1000)
jasmine.RequestAnimationFrame.tick(1)
expect(runner.time()).toBe(1001)
it('does not unschedule if runner is persistent for a certain time', () => {
const timeline = new Timeline()
const runner = new Runner(1000).persist(100)
- timeline.schedule(runner).play() // we have to play because its syncronous here
+ timeline.schedule(runner).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(1000)
jasmine.RequestAnimationFrame.tick(1)
expect(runner.time()).toBe(1001)
const timeline = new Timeline().on('finished', spy)
const runner = new Runner(1000)
spy.calls.reset()
- timeline.schedule(runner).play() // we have to play because its syncronous here
+ timeline.schedule(runner).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(1000)
jasmine.RequestAnimationFrame.tick(1)
expect(spy).toHaveBeenCalled()
const timeline = new Timeline().on('finished', spy).time(1200).reverse(true)
const runner = new Runner(1000)
spy.calls.reset()
- timeline.schedule(runner, 0).play() // we have to play because its syncronous here
+ timeline.schedule(runner, 0).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(1)
expect(spy).not.toHaveBeenCalled()
})
const timeline = new Timeline().on('finished', spy).reverse(true)
const runner = new Runner(1000)
spy.calls.reset()
- timeline.schedule(runner, 0).play() // we have to play because its syncronous here
+ timeline.schedule(runner, 0).play() // we have to play because its synchronous here
jasmine.RequestAnimationFrame.tick(1)
expect(spy).toHaveBeenCalled()
})
expect(rect.addTo(g)).toBe(rect)
})
- it('puts an element innto another element', () => {
+ it('puts an element into another element', () => {
const g = new G()
const rect = new Rect()
const spy = spyOn(g, 'put')
expect(rect.round(1).attr()).toEqual({ id: 'foo', x: 10.7, y: 3, width: 123.5 })
})
- it('rounds the given attribues whose values are numbers to the passed precision', () => {
+ it('rounds the given attributes whose values are numbers to the passed precision', () => {
const rect = new Rect({ id: 'foo', x: 10.678, y: 3, width: 123.456 })
expect(rect.round(1, [ 'id', 'x' ]).attr()).toEqual({ id: 'foo', x: 10.7, y: 3, width: 123.456 })
})
})
describe('ref()', () => {
- it('sets refX and refY attriute', () => {
+ it('sets refX and refY attribute', () => {
const marker = new Marker().ref(10, 20)
expect(marker.attr('refX')).toBe(10)
expect(marker.attr('refY')).toBe(20)
describe('Element', () => {
describe('masker()', () => {
- it('returns the instance of Mask the current element is maskped with', () => {
+ it('returns the instance of Mask the current element is masked with', () => {
const canvas = SVG().addTo(container)
const mask = canvas.mask()
const rect = canvas.rect(100, 100).maskWith(mask)
describe('Text', () => {
describe('newLine()', () => {
- it('creates a tspan and calles newLine() on it', () => {
+ it('creates a tspan and calls newLine() on it', () => {
const text = new Text()
const tspan = text.newLine()
expect(tspan).toEqual(any(Tspan))
expect(g.x()).toBe(g.bbox().x)
expect(g.x()).toBe(10)
})
- it('calls move with the paramater as x', () => {
+ it('calls move with the parameter as x', () => {
const canvas = SVG().addTo(container)
const g = canvas.group()
g.rect(100, 200).move(111, 223)
expect(g.y()).toBe(20)
})
- it('calls move with the paramater as y', () => {
+ it('calls move with the parameter as y', () => {
const canvas = SVG().addTo(container)
const g = canvas.group()
g.rect(100, 200).move(111, 223)
expect(spy).toHaveBeenCalledWith(any(getWindow().CustomEvent))
})
- it('binds to multiple events with space or comma seperated string', () => {
+ it('binds to multiple events with space or comma separated string', () => {
const eventTarget = new EventTarget()
const spy = createSpy('spy')
on(eventTarget, 'event1 event2, event3', spy)
expect(spy).toHaveBeenCalledTimes(1)
})
- it('unbinds multiple events with space or comma seperated string', () => {
+ it('unbinds multiple events with space or comma separated string', () => {
const eventTarget = new EventTarget()
const spy = createSpy('spy')
on(eventTarget, 'event1 event2, event3', spy)
expect(spy).toHaveBeenCalledTimes(3)
})
- it('unbinds multiple events with space or comma seperated string', () => {
+ it('unbinds multiple events with space or comma separated string', () => {
const eventTarget = new EventTarget()
const spy = createSpy('spy')
on(eventTarget, [ 'event1', 'event2', 'event3' ], spy)
expect(spy).toHaveBeenCalledTimes(1)
})
- it('unbinds all events incuding namespaced ones when only event is passed', () => {
+ it('unbinds all events including namespaced ones when only event is passed', () => {
const eventTarget = new EventTarget()
const spy = createSpy('spy')
on(eventTarget, [ 'event1.ns1', 'event2.ns2', 'event3' ], spy)
})
})
- it('returns an object with selected css properries', () => {
+ it('returns an object with selected css properties', () => {
const rect = new Rect({ style: 'fill: none; outline-width: 1px; stroke: none' })
expect(rect.css([ 'fill', 'stroke' ])).toEqual({
fill: 'none',
})
})
- it('returns an object with selected data properries', () => {
+ it('returns an object with selected data properties', () => {
const rect = new Rect({ 'data-fill': 'none', 'data-outline-width': '1px', 'data-stroke': 'none' })
expect(rect.data([ 'fill', 'stroke' ])).toEqual({
fill: 'none',
expect(spy).toHaveBeenCalledWith({ flip: 'both', origin: 'center' }, true)
})
- // this works because only x and y are valid flip values. Evereything else flips on both axis
+ // this works because only x and y are valid flip values. Everything else flips on both axis
it('sets flip to both and origin to number when called with origin only', function () {
const rect = new Rect()
const spy = spyOn(rect, 'transform')
})
describe('dispatch()', () => {
- it('evemtually calls dispatchEvent on the target and returns the event', () => {
+ it('eventually calls dispatchEvent on the target and returns the event', () => {
const target = new EventTarget()
const spy = spyOn(target, 'dispatchEvent').and.callThrough()
const options = { cancelable: false }
}))
})
- it('calls a method on every element in the list and passes aguments when a string is passed', () => {
+ it('calls a method on every element in the list and passes arguments when a string is passed', () => {
const list = new List([ 10, 11, 12 ])
expect(list.each('toString', 16)).toEqual([ 'a', 'b', 'c' ])
})
}
})
- it('throws if matrix is not inversable', () => {
+ it('throws if matrix is not invertible', () => {
const matrix = new Matrix(0, 0, 0, 0, 0, 0)
expect(() => matrix.inverse()).toThrowError('Cannot invert matrix(0,0,0,0,0,0)')
})
expect(array + '').toBe('0.343 0.669 0.119 0 0 0.249 -0.626 0.13 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0')
})
- it('parses space seperated string and converts it to array', () => {
+ it('parses space separated string and converts it to array', () => {
expect((new SVGArray('1 2 3 4')).valueOf()).toEqual([ 1, 2, 3, 4 ])
})
- it('parses comma seperated string and converts it to array', () => {
+ it('parses comma separated string and converts it to array', () => {
expect((new SVGArray('1,2,3,4')).valueOf()).toEqual([ 1, 2, 3, 4 ])
})
})
describe('degrees()', function () {
- it('converts radians to degreens', function () {
+ it('converts radians to degrees', function () {
expect(degrees(1.5 * Math.PI)).toBe(270)
expect(degrees(Math.PI / 2)).toBe(90)
})
}
// We have to resume the timeline in case a controller
- // is already done without beeing ever run
+ // is already done without being ever run
// This can happen when e.g. this is done:
// anim = el.animate(new SVG.Spring)
// and later
// The start time for the next animation can either be given explicitly,
// derived from the current timeline time or it can be relative to the
- // last start time to chain animations direclty
+ // last start time to chain animations directly
var absoluteStartTime = 0
var endTime = this.getEndTime()
// FIXME:
// However, reseting in insertion order leads to bugs. Considering the case,
- // where 2 runners change the same attriute but in different times,
+ // where 2 runners change the same attribute but in different times,
// reseting both of them will lead to the case where the later defined
// runner always wins the reset even if the other runner started earlier
// and therefore should win the attribute battle
this.node.id = eid(this.type)
}
- // dont't set directly with this.node.id to make `null` work correctly
+ // don't set directly with this.node.id to make `null` work correctly
return this.attr('id', id)
}
return baseFind('svg [fill*="' + this.id() + '"]')
}
- // Alias string convertion to fill
+ // Alias string conversion to fill
toString () {
return this.url()
}
return this.parent().children()
}
-// Get the curent position siblings
+// Get the current position siblings
export function position () {
return this.parent().index(this)
}
export function rbox (el) {
const getRBox = (node) => node.getBoundingClientRect()
const retry = (el) => {
- // There is no point in trying tricks here because if we insert the element into the dom ourselfes
+ // There is no point in trying tricks here because if we insert the element into the dom ourselves
// it obviously will be at the wrong position
throw new Error(`Getting rbox of element "${el.node.nodeName}" is not possible`)
}
zoom (level, point) {
// Its best to rely on the attributes here and here is why:
// clientXYZ: Doesn't work on non-root svgs because they dont have a CSSBox (silly!)
- // getBoundingClinetRect: Doesn't work because Chrome just ignores width and height of nested svgs completely
+ // getBoundingClientRect: Doesn't work because Chrome just ignores width and height of nested svgs completely
// that means, their clientRect is always as big as the content.
// Furthermore this size is incorrect if the element is further transformed by its parents
// computedStyle: Only returns meaningful values if css was used with px. We dont go this route here!
import { numberAndUnit } from '../modules/core/regex.js'
-// Module for unit convertions
+// Module for unit conversions
export default class SVGNumber {
// Initialize
constructor (...args) {
})
}
-// Convert camel cased string to dash seperated
+// Convert camel cased string to dash separated
export function unCamelCase (s) {
return s.replace(/([A-Z])/g, function (m, g) {
return '-' + g.toLowerCase()
projects / svg.js.git / commitdiff