aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGELOG.md2
-rw-r--r--bench/tests/10000-textContent.js21
-rw-r--r--dirty.html18
-rw-r--r--dist/svg.js97
-rw-r--r--spec/spec/adopter.js6
-rw-r--r--spec/spec/bare.js41
-rw-r--r--spec/spec/element.js35
-rw-r--r--spec/spec/svg.js8
-rw-r--r--src/animation/Morphable.js (renamed from src/types/Morphable.js)10
-rw-r--r--src/animation/Runner.js2
-rw-r--r--src/elements/Bare.js31
-rw-r--r--src/elements/Dom.js15
-rw-r--r--src/elements/HtmlNode.js6
-rw-r--r--src/elements/Style.js6
-rw-r--r--src/main.js4
-rw-r--r--src/utils/adopter.js11
16 files changed, 134 insertions, 179 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9eeba9b..ceb62a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
- added possibility to pass attributes into a constructor like: `new SVG.Rect({width:100})`
- added possibility to pass in additional attribues to element creators e.g. `canvas.rect({x:100})` or `canvas.rect(100, 100, {x:100})` (#796)
- added `SVG.List` (#645)
+- added `words()` and `element()` to `Dom` because of (#935)
### Removed
- removed `SVG.Array.split()` function
@@ -42,6 +43,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
- removed `size()` from `SVG.Text` to avoid name clash (#799)
- removed `move(), dmove()` etc for groups to avoid inconsistencies, we will expect users to use transforms to move around groups as they should (especially since they are much simpler now).
- removed `native()` function
+- removed `Bare` in favour of `Dom` (#935)
### Changed
- gradients now have there corresponding node as type and not only radial/linear
diff --git a/bench/tests/10000-textContent.js b/bench/tests/10000-textContent.js
new file mode 100644
index 0000000..9a02308
--- /dev/null
+++ b/bench/tests/10000-textContent.js
@@ -0,0 +1,21 @@
+SVG.bench.describe('Change textContent 10000 times', function(bench) {
+ var data = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'
+
+ var node = bench.draw.plain('').node
+
+
+ bench.test('using appendChild', function() {
+ for (var i = 0; i < 1000000; i++) {
+ while (node.hasChildNodes()) {
+ node.removeChild(node.lastChild)
+ }
+
+ node.appendChild(document.createTextNode('test'+i))
+ }
+ })
+ bench.test('using textContent', function() {
+ for (var i = 0; i < 1000000; i++) {
+ node.textContent = 'test'+i
+ }
+ })
+})
diff --git a/dirty.html b/dirty.html
index decb180..3fd1412 100644
--- a/dirty.html
+++ b/dirty.html
@@ -210,9 +210,23 @@ canvas.rect(100, 100).on('click', (e) => {
})
})
-
console.log(schedule)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
// var bla = SVG('<rect>').size(0, 0).move(200, 200).addTo('svg')
// bla.animate().size(220, 200).queue(null, console.log)
@@ -353,7 +367,7 @@ rectangle.animate().transform({
//
// moon.animate(10000).loop().ease('-')
// .transform({rotate: 360, origin: [500, 300]}, true)
-// .transform({rotate: 1080, origin: [1000, 300]}, true)
+// .transform({rotate: 3600, origin: [1000, 300]}, true)
diff --git a/dist/svg.js b/dist/svg.js
index b55a529..701b906 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
* @copyright Wout Fierens <wout@mick-wout.com>
* @license MIT
*
-* BUILT: Fri Nov 23 2018 14:47:42 GMT+0100 (GMT+01:00)
+* BUILT: Sat Nov 24 2018 11:07:45 GMT+0100 (GMT+01:00)
*/;
var SVG = (function () {
'use strict';
@@ -430,21 +430,14 @@ var SVG = (function () {
// check for presence of node
if (!node) return null; // make sure a node isn't already adopted
- if (node.instance instanceof Base) return node.instance;
+ if (node.instance instanceof Base) return node.instance; // initialize variables
- if (!(node instanceof globals.window.SVGElement)) {
- return new elements.HtmlNode(node);
- } // initialize variables
-
-
- var className = capitalize(node.nodeName);
+ var className = capitalize(node.nodeName); // Make sure that gradients are adopted correctly
if (className === 'LinearGradient' || className === 'RadialGradient') {
- className = 'Gradient';
- }
-
- if (!elements[className]) {
- className = 'Bare';
+ className = 'Gradient'; // Fallback to Dom if element is not known
+ } else if (!elements[className]) {
+ className = 'Dom';
}
return new elements[className](node);
@@ -2372,6 +2365,11 @@ var SVG = (function () {
}
return this;
+ }
+ }, {
+ key: "element",
+ value: function element(nodeName) {
+ return this.put(new Dom(makeNode(nodeName)));
} // Get first child
}, {
@@ -2572,10 +2570,18 @@ var SVG = (function () {
for (len = well.children.length; len--;) {
fragment.appendChild(well.firstElementChild);
- } // Add the whole fragment at once
+ }
+ var parent = this.parent(); // Add the whole fragment at once
- return outerHTML ? this.replace(fragment) : this.add(fragment);
+ return outerHTML ? this.replace(fragment) && parent : this.add(fragment);
+ }
+ }, {
+ key: "words",
+ value: function words(text) {
+ // This is faster than removing all children and adding a new one
+ this.node.textContent = text;
+ return this;
} // write svgjs data to the dom
}, {
@@ -6604,41 +6610,6 @@ var SVG = (function () {
});
register(Tspan);
- var Bare =
- /*#__PURE__*/
- function (_Container) {
- _inherits(Bare, _Container);
-
- function Bare(node, attrs) {
- _classCallCheck(this, Bare);
-
- return _possibleConstructorReturn(this, _getPrototypeOf(Bare).call(this, nodeOrNew(node, typeof node === 'string' ? null : node), attrs));
- }
-
- _createClass(Bare, [{
- key: "words",
- value: function words(text) {
- // remove contents
- while (this.node.hasChildNodes()) {
- this.node.removeChild(this.node.lastChild);
- } // create text node
-
-
- this.node.appendChild(globals.document.createTextNode(text));
- return this;
- }
- }]);
-
- return Bare;
- }(Container);
- register(Bare);
- registerMethods('Container', {
- // Create an element that is not described by SVG.js
- element: wrapWithAttrCheck(function (node) {
- return this.put(new Bare(node));
- })
- });
-
var ClipPath =
/*#__PURE__*/
function (_Container) {
@@ -6719,21 +6690,6 @@ var SVG = (function () {
});
register(G);
- var HtmlNode =
- /*#__PURE__*/
- function (_Dom) {
- _inherits(HtmlNode, _Dom);
-
- function HtmlNode() {
- _classCallCheck(this, HtmlNode);
-
- return _possibleConstructorReturn(this, _getPrototypeOf(HtmlNode).apply(this, arguments));
- }
-
- return HtmlNode;
- }(Dom);
- register(HtmlNode);
-
var A =
/*#__PURE__*/
function (_Container) {
@@ -6867,9 +6823,10 @@ var SVG = (function () {
}
_createClass(Style, [{
- key: "words",
- value: function words(w) {
- this.node.textContent += w || '';
+ key: "addText",
+ value: function addText() {
+ var w = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+ this.node.textContent += w;
return this;
}
}, {
@@ -6884,7 +6841,7 @@ var SVG = (function () {
}, {
key: "rule",
value: function rule(selector, obj) {
- return this.words(cssRule(selector, obj));
+ return this.addText(cssRule(selector, obj));
}
}]);
@@ -7090,7 +7047,6 @@ var SVG = (function () {
Point: Point,
PointArray: PointArray,
List: List,
- Bare: Bare,
Circle: Circle,
ClipPath: ClipPath,
Container: Container,
@@ -7100,7 +7056,6 @@ var SVG = (function () {
Ellipse: Ellipse,
Gradient: Gradient,
G: G,
- HtmlNode: HtmlNode,
A: A,
Image: Image,
Line: Line,
diff --git a/spec/spec/adopter.js b/spec/spec/adopter.js
index 38d55f4..6beb63b 100644
--- a/spec/spec/adopter.js
+++ b/spec/spec/adopter.js
@@ -71,11 +71,9 @@ describe('Adopter', function() {
})
describe('with node that has no matching svg.js class', function() {
- it('wraps the node in the base SVG.Element class', function() {
+ it('wraps the node in the Dom class', function() {
var desc = SVG('#inlineSVG').find('desc')[0]
- expect(desc instanceof SVG.Element).toBeTruthy()
+ expect(desc instanceof SVG.Dom).toBeTruthy()
})
})
-
-
})
diff --git a/spec/spec/bare.js b/spec/spec/bare.js
deleted file mode 100644
index 5601a37..0000000
--- a/spec/spec/bare.js
+++ /dev/null
@@ -1,41 +0,0 @@
-describe('Bare', function() {
-
- describe('element()', function() {
- var element
-
- beforeEach(function() {
- element = draw.element('rect')
- })
-
- it('creates an instance of SVG.Bare', function() {
- expect(element instanceof SVG.Bare).toBeTruthy()
- })
- it('creates element in called parent', function() {
- expect(element.parent()).toBe(draw)
- })
- // it('inherits from given parent', function() {
- // expect(draw.element('g', SVG.Container).rect).toBeTruthy()
- // expect(draw.element('g', SVG.Container).group).toBeTruthy()
- // })
- })
-
- describe('words()', function() {
- it('inserts plain text in a node', function() {
- var element = draw.element('title').words('These are some words.').id(null)
- var result = element.svg()
- expect(
- result == '<title>These are some words.</title>'
- || result == '<title xmlns="http://www.w3.org/2000/svg">These are some words.</title>'
- ).toBe(true)
- })
- it('removes all nodes before adding words', function() {
- var element = draw.element('title').words('These are some words.').id(null)
- element.words('These are some words.')
- var result = element.svg()
- expect(
- result == '<title>These are some words.</title>'
- || result == '<title xmlns="http://www.w3.org/2000/svg">These are some words.</title>'
- ).toBe(true)
- })
- })
-})
diff --git a/spec/spec/element.js b/spec/spec/element.js
index 4845f03..6fb1ff4 100644
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -1045,4 +1045,39 @@ describe('Element', function() {
}))
})
})
+
+ describe('words()', function() {
+ it('inserts plain text in a node', function() {
+ var element = draw.element('title').words('These are some words.').id(null)
+ var result = element.svg()
+ expect(
+ result == '<title>These are some words.</title>'
+ || result == '<title xmlns="http://www.w3.org/2000/svg">These are some words.</title>'
+ ).toBe(true)
+ })
+ it('removes all nodes before adding words', function() {
+ var element = draw.element('title').words('These are some words.').id(null)
+ element.words('These are some words.')
+ var result = element.svg()
+ expect(
+ result == '<title>These are some words.</title>'
+ || result == '<title xmlns="http://www.w3.org/2000/svg">These are some words.</title>'
+ ).toBe(true)
+ })
+ })
+
+ describe('element()', function() {
+ var element
+
+ beforeEach(function() {
+ element = draw.element('rect')
+ })
+
+ it('creates an instance of Dom', function() {
+ expect(element instanceof SVG.Dom).toBeTruthy()
+ })
+ it('creates element in called parent', function() {
+ expect(element.parent()).toBe(draw)
+ })
+ })
})
diff --git a/spec/spec/svg.js b/spec/spec/svg.js
index acdd686..a3e33b5 100644
--- a/spec/spec/svg.js
+++ b/spec/spec/svg.js
@@ -23,15 +23,15 @@ describe('SVG', function() {
expect(SVG().node.nodeName).toBe('svg')
})
- it('creates an instanceof SVG.HtmlNode with html node', function() {
+ it('creates an instanceof SVG.Dom with html node', function() {
var el = SVG(wrapperHTML)
- expect(el instanceof SVG.HtmlNode).toBe(true)
+ expect(el instanceof SVG.Dom).toBe(true)
expect(el.node).toBe(wrapperHTML)
})
- it('creates new SVG.HtmlNode when called with css selector pointing to html node', function() {
+ it('creates new SVG.Dom when called with css selector pointing to html node', function() {
var el = SVG('#testDiv')
- expect(el instanceof SVG.HtmlNode).toBe(true)
+ expect(el instanceof SVG.Dom).toBe(true)
expect(el.node).toBe(wrapperHTML)
})
diff --git a/src/types/Morphable.js b/src/animation/Morphable.js
index 703cc00..a02ba31 100644
--- a/src/types/Morphable.js
+++ b/src/animation/Morphable.js
@@ -1,14 +1,14 @@
-import { Ease } from '../animation/Controller.js'
+import { Ease } from './Controller.js'
import {
delimiter,
numberAndUnit,
pathLetters
} from '../modules/core/regex.js'
import { extend } from '../utils/adopter.js'
-import Color from './Color.js'
-import PathArray from './PathArray.js'
-import SVGArray from './SVGArray.js'
-import SVGNumber from './SVGNumber.js'
+import Color from '../types/Color.js'
+import PathArray from '../types/PathArray.js'
+import SVGArray from '../types/SVGArray.js'
+import SVGNumber from '../types/SVGNumber.js'
export default class Morphable {
constructor (stepper) {
diff --git a/src/animation/Runner.js b/src/animation/Runner.js
index 5551162..bb8d5e7 100644
--- a/src/animation/Runner.js
+++ b/src/animation/Runner.js
@@ -9,7 +9,7 @@ import Animator from './Animator.js'
import Box from '../types/Box.js'
import EventTarget from '../types/EventTarget.js'
import Matrix from '../types/Matrix.js'
-import Morphable, { TransformBag } from '../types/Morphable.js'
+import Morphable, { TransformBag } from './Morphable.js'
import Point from '../types/Point.js'
import SVGNumber from '../types/SVGNumber.js'
import Timeline from './Timeline.js'
diff --git a/src/elements/Bare.js b/src/elements/Bare.js
deleted file mode 100644
index a057634..0000000
--- a/src/elements/Bare.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js'
-import { registerMethods } from '../utils/methods.js'
-import Container from './Container.js'
-import { globals } from '../utils/window.js'
-
-export default class Bare extends Container {
- constructor (node, attrs) {
- super(nodeOrNew(node, typeof node === 'string' ? null : node), attrs)
- }
-
- words (text) {
- // remove contents
- while (this.node.hasChildNodes()) {
- this.node.removeChild(this.node.lastChild)
- }
-
- // create text node
- this.node.appendChild(globals.document.createTextNode(text))
-
- return this
- }
-}
-
-register(Bare)
-
-registerMethods('Container', {
- // Create an element that is not described by SVG.js
- element: wrapWithAttrCheck(function (node) {
- return this.put(new Bare(node))
- })
-})
diff --git a/src/elements/Dom.js b/src/elements/Dom.js
index 2fcedce..5d7dbac 100644
--- a/src/elements/Dom.js
+++ b/src/elements/Dom.js
@@ -4,6 +4,7 @@ import {
eid,
extend,
makeInstance,
+ makeNode,
register
} from '../utils/adopter.js'
import { find } from '../modules/core/selector'
@@ -88,6 +89,10 @@ export default class Dom extends EventTarget {
return this
}
+ element (nodeName) {
+ return this.put(new Dom(makeNode(nodeName)))
+ }
+
// Get first child
first () {
return adopt(this.node.firstChild)
@@ -285,12 +290,20 @@ export default class Dom extends EventTarget {
fragment.appendChild(well.firstElementChild)
}
+ let parent = this.parent()
+
// Add the whole fragment at once
return outerHTML
- ? this.replace(fragment)
+ ? this.replace(fragment) && parent
: this.add(fragment)
}
+ words (text) {
+ // This is faster than removing all children and adding a new one
+ this.node.textContent = text
+ return this
+ }
+
// write svgjs data to the dom
writeDataToDom () {
// dump variables recursively
diff --git a/src/elements/HtmlNode.js b/src/elements/HtmlNode.js
deleted file mode 100644
index 009b122..0000000
--- a/src/elements/HtmlNode.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { register } from '../utils/adopter.js'
-import Dom from './Dom.js'
-
-export default class HtmlNode extends Dom {}
-
-register(HtmlNode)
diff --git a/src/elements/Style.js b/src/elements/Style.js
index 50ec50e..0b1cdb7 100644
--- a/src/elements/Style.js
+++ b/src/elements/Style.js
@@ -23,8 +23,8 @@ export default class Style extends Element {
super(nodeOrNew('style', node), node)
}
- words (w) {
- this.node.textContent += (w || '')
+ addText (w = '') {
+ this.node.textContent += w
return this
}
@@ -37,7 +37,7 @@ export default class Style extends Element {
}
rule (selector, obj) {
- return this.words(cssRule(selector, obj))
+ return this.addText(cssRule(selector, obj))
}
}
diff --git a/src/main.js b/src/main.js
index 919fb25..696dfdd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,7 +30,7 @@ import Morphable, {
TransformBag,
makeMorphable,
registerMorphableType
-} from './types/Morphable.js'
+} from './animation/Morphable.js'
import Path from './elements/Path.js'
import PathArray from './types/PathArray.js'
import Pattern from './elements/Pattern.js'
@@ -85,7 +85,6 @@ export { default as PointArray } from './types/PointArray.js'
export { default as List } from './types/List.js'
/* Elements */
-export { default as Bare } from './elements/Bare.js'
export { default as Circle } from './elements/Circle.js'
export { default as ClipPath } from './elements/ClipPath.js'
export { default as Container } from './elements/Container.js'
@@ -95,7 +94,6 @@ export { default as Element } from './elements/Element.js'
export { default as Ellipse } from './elements/Ellipse.js'
export { default as Gradient } from './elements/Gradient.js'
export { default as G } from './elements/G.js'
-export { default as HtmlNode } from './elements/HtmlNode.js'
export { default as A } from './elements/A.js'
export { default as Image } from './elements/Image.js'
export { default as Line } from './elements/Line.js'
diff --git a/src/utils/adopter.js b/src/utils/adopter.js
index 6109f22..52d589e 100644
--- a/src/utils/adopter.js
+++ b/src/utils/adopter.js
@@ -50,19 +50,16 @@ export function adopt (node) {
// make sure a node isn't already adopted
if (node.instance instanceof Base) return node.instance
- if (!(node instanceof globals.window.SVGElement)) {
- return new elements.HtmlNode(node)
- }
-
// initialize variables
var className = capitalize(node.nodeName)
+ // Make sure that gradients are adopted correctly
if (className === 'LinearGradient' || className === 'RadialGradient') {
className = 'Gradient'
- }
- if (!elements[className]) {
- className = 'Bare'
+ // Fallback to Dom if element is not known
+ } else if (!elements[className]) {
+ className = 'Dom'
}
return new elements[className](node)
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 16:03:22 +0000