From: Ulrich-Matthias Schäfer Date: Mon, 18 Feb 2019 08:44:27 +0000 (+0100) Subject: added foreignObject to the core X-Git-Tag: 3.0.12~2 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=9e75004466f251d765f72fd80fad846e71fae107;p=svg.js.git added foreignObject to the core --- diff --git a/CHANGELOG.md b/CHANGELOG.md index d6afc53..bda4a6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,15 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: ==== +## [3.0.12] + +### Fixed + - fixed package.json which points to correct file for webpack now (browser keyword) + - fixed typescript types + +### Added + - added `ForeignObject` to the core + ## [3.0.11] - 2019-01-22 ### Fixed diff --git a/spec/spec/elements/ForeignObject.js b/spec/spec/elements/ForeignObject.js new file mode 100644 index 0000000..56ab081 --- /dev/null +++ b/spec/spec/elements/ForeignObject.js @@ -0,0 +1,47 @@ +import { makeInstance, ForeignObject } from '../../../src/main.js'; + +const { any, createSpy, objectContaining } = jasmine + + +describe('ForeignObject.js', () => { + + describe('()', () => { + it('creates a new object of type ForeignObject', () => { + expect(new ForeignObject()).toEqual(any(ForeignObject)) + }) + + it('sets passed attributes on the element', () => { + expect(new ForeignObject({id:'foo'}).id()).toBe('foo') + }) + }) + + describe('Container', () => { + describe('foreignObject()', () => { + it('creates a foreignObject in the container', () => { + const canvas = makeInstance().addTo('#canvas') + const foreignObject = canvas.foreignObject() + expect(foreignObject).toEqual(any(ForeignObject)) + expect(foreignObject.parent()).toBe(canvas) + }) + + it('sets width and height correctly on construction', () => { + const canvas = makeInstance().addTo('#canvas') + const foreignObject = canvas.foreignObject(100, 200) + expect(foreignObject.width()).toBe(100) + expect(foreignObject.height()).toBe(200) + }) + }) + }) + + describe('Element methods', () => { + it('is usable with Elements methods such as height() and width()', () => { + const canvas = makeInstance().addTo('#canvas') + const foreignObject = canvas.foreignObject() + foreignObject.width(100).height(200).x(10).y(20) + expect(foreignObject.width()).toBe(100) + expect(foreignObject.height()).toBe(200) + expect(foreignObject.x()).toBe(10) + expect(foreignObject.y()).toBe(20) + }) + }) +}) diff --git a/src/elements/Circle.js b/src/elements/Circle.js index 3135ada..e3bfacc 100644 --- a/src/elements/Circle.js +++ b/src/elements/Circle.js @@ -36,7 +36,7 @@ export default class Circle extends Shape { extend(Circle, { x, y, cx, cy, width, height }) registerMethods({ - Element: { + Container: { // Create circle element circle: wrapWithAttrCheck(function (size) { return this.put(new Circle()) diff --git a/src/elements/ForeignObject.js b/src/elements/ForeignObject.js new file mode 100644 index 0000000..e6f9e2b --- /dev/null +++ b/src/elements/ForeignObject.js @@ -0,0 +1,19 @@ +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' +import { registerMethods } from '../utils/methods.js' +import Element from './Element.js' + +export default class ForeignObject extends Element { + constructor (node) { + super(nodeOrNew('foreignObject', node), node) + } +} + +registerMethods({ + Container: { + foreignObject: wrapWithAttrCheck(function (width, height) { + return this.put(new ForeignObject()).size(width, height) + }) + } +}) + +register(ForeignObject) diff --git a/src/elements/G.js b/src/elements/G.js index a9e8b55..da4af77 100644 --- a/src/elements/G.js +++ b/src/elements/G.js @@ -78,7 +78,7 @@ export default class G extends Container { } registerMethods({ - Element: { + Container: { // Create a group element group: wrapWithAttrCheck(function () { return this.put(new G()) diff --git a/src/main.js b/src/main.js index 8ea3e5d..3162752 100644 --- a/src/main.js +++ b/src/main.js @@ -95,6 +95,7 @@ export { default as Defs } from './elements/Defs.js' export { default as Dom } from './elements/Dom.js' export { default as Element } from './elements/Element.js' export { default as Ellipse } from './elements/Ellipse.js' +export { default as ForeignObject } from './elements/ForeignObject.js' export { default as Gradient } from './elements/Gradient.js' export { default as G } from './elements/G.js' export { default as A } from './elements/A.js'