type: 'module'
},
{
- pattern: 'spec/spec/types/*.js',
+ pattern: 'spec/spec/*/*.js',
included: true,
type: 'module'
}
import multiEntry from 'rollup-plugin-multi-entry'
export default {
- input: ['spec/setupBrowser.js', 'spec/spec/types/*.js', 'spec/spec/utils/*.js'],
+ input: [
+ 'spec/setupBrowser.js',
+ 'spec/spec/*/*.js'
+ ],
output: {
file: 'spec/es5TestBundle.js',
name: 'SVGTests',
====
+## [3.0.5] - 2018-12-12
+ - fixed `parser` which didnt have all reqired css rules and not focusable=false
+ - group `x(), y(), width(), height(), dx(), dy()` now correctly change the bbox of the group by moving/resizing all children
+ - fixed timeline which fired `finished` to early
+ - fixed `Animator.frame()`. The passed callback gets the current time now (same as RAF)
+ - allow `loop(true)` which is the same as `loop()`
+
## [3.0.4] - 2018-12-07
### Fixed
<!-- Headings above link to the releases listed here -->
+[3.0.5]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.5
[3.0.4]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.4
[3.0.3]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.3
[3.0.2]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.2
{
"name": "@svgdotjs/svg.js",
- "version": "3.0.4",
+ "version": "3.0.5",
"description": "A lightweight library for manipulating and animating SVG.",
"url": "https://svgdotjs.github.io/",
"homepage": "https://svgdotjs.github.io/",
"test:svgdom": "node -r esm ./spec/runSVGDomTest.js || true",
"test:es6": "npx karma start .config/karma.es6.js --single-run",
"zip": "zip -j dist/svg.js.zip -- LICENSE.txt README.md CHANGELOG.md dist/svg.js dist/svg.js.map dist/svg.min.js dist/svg.min.js.map dist/polyfills.js dist/polyfillsIE.js",
- "prepublishOnly": "rm -r ./dist && npm run build && npm run build:polyfills && npm test",
+ "prepublishOnly": "rm -rf ./dist && npm run build && npm run build:polyfills && npm test",
"postpublish": "npm run zip"
},
"devDependencies": {
<!-- include spec files here... -->
- <!--<script src="es5TestBundle.js"></script>-->
+ <script src="es5TestBundle.js"></script>
<script src="spec/adopter.js"></script>
<script src="spec/arrange.js"></script>
<script type="module" src="spec/types/Base.js"></script>
<script type="module" src="spec/types/Box.js"></script>
<script type="module" src="spec/utils/adopter.js"></script>
+ <script type="module" src="spec/elements/G.js"></script>
</body>
</html>
"spec_dir": "spec/",
"spec_files": [
"spec/types/*.js",
- "spec/utils/*.js"
+ "spec/utils/*.js",
+ "spec/elements/*.js"
],
"helpers": [
"setupSVGDom.js"
--- /dev/null
+import { G, Rect, makeInstance } from '../../../src/main';
+
+const { any, createSpy, objectContaining } = jasmine
+
+
+describe('G.js', () => {
+
+ describe('()', () => {
+ it('creates a new object of type G', () => {
+ expect(new G()).toEqual(any(G))
+ })
+
+ it('sets passed attributes on the element', () => {
+ expect(new G({id:'foo'}).id()).toBe('foo')
+ })
+ })
+
+ describe('x()', () => {
+ it('gets the x value of the bbox', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.x()).toBe(g.bbox().x)
+ expect(g.x()).toBe(10)
+ })
+ it('sets the x value of the bbox by moving all children', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.x(0)).toBe(g)
+ expect(g.bbox().x).toBe(0)
+ expect(g.children()[0].x()).toBe(0)
+ expect(g.children()[1].x()).toBe(40)
+ })
+ })
+
+ describe('y()', () => {
+ it('gets the y value of the bbox', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.y()).toBe(g.bbox().y)
+ expect(g.y()).toBe(20)
+ })
+ it('sets the y value of the bbox by moving all children', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.y(0)).toBe(g)
+ expect(g.bbox().y).toBe(0)
+ expect(g.children()[0].y()).toBe(0)
+ expect(g.children()[1].y()).toBe(40)
+ })
+ })
+
+ describe('width()', () => {
+ it('gets the width value of the bbox', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.width()).toBe(g.bbox().width)
+ expect(g.width()).toBe(110)
+ })
+ it('sets the width value of the bbox by moving all children', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.width(100)).toBe(g)
+ expect(g.bbox().width).toBe(100)
+ expect(g.children()[0].width()).toBeCloseTo(90.909, 3)
+ expect(g.children()[1].width()).toBeCloseTo(63.636, 3)
+
+ expect(g.children()[0].x()).toBeCloseTo(10, 3)
+ expect(g.children()[1].x()).toBeCloseTo(46.364, 3)
+ })
+ })
+
+ describe('height()', () => {
+ it('gets the height value of the bbox', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.height()).toBe(g.bbox().height)
+ expect(g.height()).toBe(140)
+ })
+ it('sets the height value of the bbox by moving all children', () => {
+ const canvas = makeInstance().addTo('#canvas')
+
+ const g = new G()
+ g.add(new Rect({width:100, height:120, x:10, y:20}))
+ g.add(new Rect({width:70, height:100, x:50, y:60}))
+
+ g.addTo(canvas)
+
+ expect(g.height(100)).toBe(g)
+ expect(g.bbox().height).toBe(100)
+ expect(g.children()[0].height()).toBeCloseTo(85.714, 3)
+ expect(g.children()[1].height()).toBeCloseTo(71.429, 3)
+
+ expect(g.children()[0].y()).toBeCloseTo(20, 3)
+ expect(g.children()[1].y()).toBeCloseTo(48.571, 3)
+ })
+ })
+})
var nextFrame = null
var lastFrame = Animator.frames.last()
while ((nextFrame !== lastFrame) && (nextFrame = Animator.frames.shift())) {
- nextFrame.run()
+ nextFrame.run(now)
}
var nextImmediate = null
this._times = times || Infinity
this._swing = swing || false
this._wait = wait || 0
+
+ // Allow true to be passed
+ if (this._times === true) { this._times = Infinity }
+
return this
}
this._lastStepTime = 0
// Make sure that step is always called in class context
- this._step = this._step.bind(this)
+ this._step = this._stepFn.bind(this, false)
+ this._stepImmediate = this._stepFn.bind(this, true)
}
// schedules a runner on the timeline
return this
}
- _step (immediateStep = false) {
+ _stepFn (immediateStep = false) {
// Get the time delta from the last time and update the time
var time = this._timeSource()
var dtSource = time - this._lastSourceTime
if ((runnersLeft && !(this._speed < 0 && this._time === 0)) || (this._runnerIds.length && this._speed < 0 && this._time > 0)) {
this._continue()
} else {
- this.fire('finished')
this.pause()
+ this.fire('finished')
}
return this
Animator.cancelFrame(this._nextFrame)
this._nextFrame = null
- if (immediateStep) return this._step(true)
+ if (immediateStep) return this._stepImmediate()
if (this._paused) return this
this._nextFrame = Animator.frame(this._step)
return this.root().defs()
}
+ // Relative move over x axis
+ dx (x) {
+ return this.x(new SVGNumber(x).plus(this.x()))
+ }
+
+ // Relative move over y axis
+ dy (y) {
+ return this.y(new SVGNumber(y).plus(this.y()))
+ }
+
// Get parent document
root () {
let p = this.parent(Svg)
import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js'
+import { proportionalSize } from '../utils/utils.js'
import { registerMethods } from '../utils/methods.js'
import Container from './Container.js'
+import SVGNumber from '../types/SVGNumber.js'
export default class G extends Container {
constructor (node) {
super(nodeOrNew('g', node), node)
}
- x (x) {
- if (x == null) return this.transform()['x']
- return this.move(x, 0)
+ x (x, box = this.bbox()) {
+ if (x == null) return box.x
+
+ this.children().dx(x - box.x)
+ return this
}
- y (y) {
- if (y == null) return this.transform()['y']
- return this.move(0, y)
+ y (y, box = this.bbox()) {
+ if (y == null) return box.y
+
+ this.children().dy(y - box.y)
+ return this
}
move (x, y) {
- return this.translate(x, y)
+ const box = this.bbox()
+ return this.x(x, box).y(y, box)
}
dx (dx) {
- return this.transform({ dx }, true)
+ return this.children().dx(dx)
}
dy (dy) {
- return this.transform({ dy }, true)
+ return this.children().dy(dy)
}
- dmove (dx, dy) {
- return this.transform({ dx, dy }, true)
+ width (width, box = this.bbox()) {
+ if (width == null) return box.width
+
+ const scale = width / box.width
+
+ this.each(function () {
+ const _width = this.width()
+ const _x = this.x()
+
+ this.width(_width * scale)
+ this.x((_x - box.x) * scale + box.x)
+ })
+
+ return this
}
- width () {
- return this.bbox().width
+ height (height, box = this.bbox()) {
+ if (height == null) return box.height
+
+ const scale = height / box.height
+
+ this.each(function () {
+ const _height = this.height()
+ const _y = this.y()
+
+ this.height(_height * scale)
+ this.y((_y - box.y) * scale + box.y)
+ })
+
+ return this
}
- height () {
- return this.bbox().height
+ size (width, height) {
+ const box = this.bbox()
+ const p = proportionalSize(this, width, height, box)
+
+ return this
+ .width(new SVGNumber(p.width), box)
+ .height(new SVGNumber(p.height), box)
}
}
// Reuse cached element if possible
if (!parser.nodes) {
let svg = makeInstance().size(2, 0)
- svg.node.cssText = [
+ svg.node.style.cssText = [
'opacity: 0',
'position: absolute',
'left: -100%',
'overflow: hidden'
].join(';')
+ svg.attr('focusable', 'false')
+
let path = svg.path().node
parser.nodes = { svg, path }
return this
}
- registerMethods([ 'Shape', 'Runner' ], extension)
+ registerMethods([ 'Element', 'Runner' ], extension)
})
registerMethods([ 'Element', 'Runner' ], {
}
})
-registerMethods('Element', {
- // Relative move over x axis
- dx: function (x) {
- return this.x(new SVGNumber(x).plus(this.x()))
- },
-
- // Relative move over y axis
- dy: function (y) {
- return this.y(new SVGNumber(y).plus(this.y()))
- }
-})
-
registerMethods('radius', {
// Add x and y radius
radius: function (x, y) {
}
// Calculate proportional width and height values when necessary
-export function proportionalSize (element, width, height) {
+export function proportionalSize (element, width, height, box) {
if (width == null || height == null) {
- var box = element.bbox()
+ box = box || element.bbox()
if (width == null) {
width = box.width / box.height * height
projects / svg.js.git / commitdiff