mirrors
/
svg.js
mirror of https://github.com/svgdotjs/svg.js.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 113 Wiki Activity
Browse Source

fix a few mistakes. Make sugar work. Roll back to childNodes because children is 10x slower

tags/3.0.0
Ulrich-Matthias Schäfer 5 years ago
parent
ac84c9be80
commit
c40d7ffdfb
10 changed files with 441 additions and 214 deletions
Split View Show Diff Stats
  1. 4
    11
      bench/runner.html
  2. 92
    99
      bench/tests/10000-rects.js
  3. 263
    74
      dist/svg.js
  4. 1
    1
      dist/svg.min.js
  5. 1
    1
      src/Element.js
  6. 8
    6
      src/Parent.js
  7. 47
    14
      src/elemnts-svg.js
  8. 10
    2
      src/methods.js
  9. 7
    6
      src/sugar.js
  10. 8
    0
      src/svg.js

+ 4
- 11
bench/runner.html View File

@@ -38,23 +38,16 @@
<div id="draw"></div>
<svg id="native" width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"></svg>
<script src="../dist/svg.js"></script>
<script type="text/javascript" src="../src/helpers.js"></script>
<script type="text/javascript" src="../src/transform.js"></script>
<script type="text/javascript" src="../src/matrix.js"></script>
<script type="text/javascript" src="../src/morph.js"></script>
<script type="text/javascript" src="../src/runner.js"></script>
<script type="text/javascript" src="../src/timeline.js"></script>
<script type="text/javascript" src="../src/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="svg.bench.js"></script>
<!--<script src="tests/10000-each.js"></script> -->
<!-- <script src="tests/10000-rects.js"></script>
<script src="tests/10000-circles.js"></script>
<script src="tests/10000-rects.js"></script>
<!-- <script src="tests/10000-circles.js"></script>
<script src="tests/10000-paths.js"></script>
<script src="tests/10000-boxes.js"></script>
<script src="tests/10000-pointArray-bbox.js"></script>
<script src="tests/10000-accesses.js"></script> -->
<script src="tests/10000-transform.js"></script>
<script src="tests/10000-accesses.js"></script>
<script src="tests/10000-transform.js"></script> -->
<script>
SVG.bench.run()
</script>

+ 92
- 99
bench/tests/10000-rects.js View File

@@ -17,102 +17,95 @@ SVG.bench.describe('Generate 10000 rects', function(bench) {
})
})


SVG.bench.describe('Generate 10000 rects with fill', function(bench) {
bench.test('using SVG.js v2.5.3', function() {
for (var i = 0; i < 10000; i++)
bench.draw.rect(100,100).fill('#f06')
})
bench.test('using vanilla js', function() {
for (var i = 0; i < 10000; i++) {
var rect = document.createElementNS(SVG.ns, 'rect')
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'fill', '#f06')
bench.raw.appendChild(rect)
}
})
bench.test('using Snap.svg v0.5.1', function() {
for (var i = 0; i < 10000; i++)
bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
})
})


SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) {
bench.test('using SVG.js v2.5.3', function() {
for (var i = 0; i < 10000; i++)
bench.draw.rect(100,100).move(50,50).fill('#f06')
})
bench.test('using vanilla js', function() {
for (var i = 0; i < 10000; i++) {
var rect = document.createElementNS(SVG.ns, 'rect')
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'fill', '#f06')
rect.setAttributeNS(null, 'x', 50)
rect.setAttributeNS(null, 'y', 50)
bench.raw.appendChild(rect)
}
})
bench.test('using Snap.svg v0.5.1', function() {
for (var i = 0; i < 10000; i++)
bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
})
})


SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) {
bench.test('using SVG.js v2.5.3', function() {
for (var i = 0; i < 10000; i++) {
var g = bench.draw.gradient('linear', function(add) {
add.stop(0, '#000')
add.stop(0.25, '#f00')
add.stop(1, '#fff')
})

bench.draw.rect(100,100).fill(g)
}
})
bench.test('using vanilla js', function() {
for (var i = 0; i < 10000; i++) {
var g = document.createElementNS(SVG.ns, 'linearGradient')
var stop = document.createElementNS(SVG.ns, 'stop')
stop.setAttributeNS(null, 'offset', '0%')
stop.setAttributeNS(null, 'color', '#000')
g.appendChild(stop)
stop = document.createElementNS(SVG.ns, 'stop')
stop.setAttributeNS(null, 'offset', '25%')
stop.setAttributeNS(null, 'color', '#f00')
g.appendChild(stop)
stop = document.createElementNS(SVG.ns, 'stop')
stop.setAttributeNS(null, 'offset', '100%')
stop.setAttributeNS(null, 'color', '#fff')
g.appendChild(stop)
bench.raw.appendChild(g)

var rect = document.createElementNS(SVG.ns, 'rect')
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'fill', '#f06')
bench.raw.appendChild(rect)
}
})
bench.test('using Snap.svg v0.5.1', function() {
for (var i = 0; i < 10000; i++) {
var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff")

bench.snap.rect(50, 50, 100, 100).attr({
fill: g
})
}
})
})








//
// SVG.bench.describe('Generate 10000 rects with fill', function(bench) {
// bench.test('using SVG.js v2.5.3', function() {
// for (var i = 0; i < 10000; i++)
// bench.draw.rect(100,100).fill('#f06')
// })
// bench.test('using vanilla js', function() {
// for (var i = 0; i < 10000; i++) {
// var rect = document.createElementNS(SVG.ns, 'rect')
// rect.setAttributeNS(null, 'height', 100)
// rect.setAttributeNS(null, 'width', 100)
// rect.setAttributeNS(null, 'fill', '#f06')
// bench.raw.appendChild(rect)
// }
// })
// bench.test('using Snap.svg v0.5.1', function() {
// for (var i = 0; i < 10000; i++)
// bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
// })
// })
//
//
// SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) {
// bench.test('using SVG.js v2.5.3', function() {
// for (var i = 0; i < 10000; i++)
// bench.draw.rect(100,100).move(50,50).fill('#f06')
// })
// bench.test('using vanilla js', function() {
// for (var i = 0; i < 10000; i++) {
// var rect = document.createElementNS(SVG.ns, 'rect')
// rect.setAttributeNS(null, 'height', 100)
// rect.setAttributeNS(null, 'width', 100)
// rect.setAttributeNS(null, 'fill', '#f06')
// rect.setAttributeNS(null, 'x', 50)
// rect.setAttributeNS(null, 'y', 50)
// bench.raw.appendChild(rect)
// }
// })
// bench.test('using Snap.svg v0.5.1', function() {
// for (var i = 0; i < 10000; i++)
// bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
// })
// })
//
//
// SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) {
// bench.test('using SVG.js v2.5.3', function() {
// for (var i = 0; i < 10000; i++) {
// var g = bench.draw.gradient('linear', function(add) {
// add.stop(0, '#000')
// add.stop(0.25, '#f00')
// add.stop(1, '#fff')
// })
//
// bench.draw.rect(100,100).fill(g)
// }
// })
// bench.test('using vanilla js', function() {
// for (var i = 0; i < 10000; i++) {
// var g = document.createElementNS(SVG.ns, 'linearGradient')
// var stop = document.createElementNS(SVG.ns, 'stop')
// stop.setAttributeNS(null, 'offset', '0%')
// stop.setAttributeNS(null, 'color', '#000')
// g.appendChild(stop)
// stop = document.createElementNS(SVG.ns, 'stop')
// stop.setAttributeNS(null, 'offset', '25%')
// stop.setAttributeNS(null, 'color', '#f00')
// g.appendChild(stop)
// stop = document.createElementNS(SVG.ns, 'stop')
// stop.setAttributeNS(null, 'offset', '100%')
// stop.setAttributeNS(null, 'color', '#fff')
// g.appendChild(stop)
// bench.raw.appendChild(g)
//
// var rect = document.createElementNS(SVG.ns, 'rect')
// rect.setAttributeNS(null, 'height', 100)
// rect.setAttributeNS(null, 'width', 100)
// rect.setAttributeNS(null, 'fill', '#f06')
// bench.raw.appendChild(rect)
// }
// })
// bench.test('using Snap.svg v0.5.1', function() {
// for (var i = 0; i < 10000; i++) {
// var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff")
//
// bench.snap.rect(50, 50, 100, 100).attr({
// fill: g
// })
// }
// })
// })
//

+ 263
- 74
dist/svg.js View File

@@ -715,31 +715,61 @@ var SVG = (function () {
var methods = {};
var constructors = {};
function registerMethods(name, m) {
if (Array.isArray(name)) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
for (var _iterator = name[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _name = _step.value;
registerMethods(_name, m);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}

return;
}

if (_typeof(name) == 'object') {
var _arr = Object.entries(name);

for (var _i = 0; _i < _arr.length; _i++) {
var _arr$_i = _slicedToArray(_arr[_i], 2),
_name = _arr$_i[0],
_name2 = _arr$_i[0],
_m = _arr$_i[1];

registerMethods(_name, _m);
registerMethods(_name2, _m);
}

return;
}

methods[name] = Object.assign(methods[name] || {}, m);
}
function getMethodsFor(name) {
return methods[name];
return methods[name] || {};
} // FIXME: save memory?
function registerConstructor(name, setup) {
constructors[name] = setup;
}
function getConstructor(name) {
return {
return constructors[name] ? {
setup: constructors[name],
name: name
};
} : {};
}

var Doc$1 =
@@ -1053,7 +1083,7 @@ var SVG = (function () {
}
});

var SVGNumber =
var SVGNumber$1 =
/*#__PURE__*/
function () {
// Initialize
@@ -1178,16 +1208,16 @@ var SVG = (function () {
} // Set width of element

function width(width) {
return width == null ? this.rx() * 2 : this.rx(new SVGNumber(width).divide(2));
return width == null ? this.rx() * 2 : this.rx(new SVGNumber$1(width).divide(2));
} // Set height of element

function height(height) {
return height == null ? this.ry() * 2 : this.ry(new SVGNumber(height).divide(2));
return height == null ? this.ry() * 2 : this.ry(new SVGNumber$1(height).divide(2));
} // Custom size function

function size(width, height) {
var p = proportionalSize$1(this, width, height);
return this.rx(new SVGNumber(p.width).divide(2)).ry(new SVGNumber(p.height).divide(2));
return this.rx(new SVGNumber$1(p.width).divide(2)).ry(new SVGNumber$1(p.height).divide(2));
}

var circled = /*#__PURE__*/Object.freeze({
@@ -1247,7 +1277,7 @@ var SVG = (function () {
Element: {
// Create circle element
circle: function circle(size$$1) {
return this.put(new Circle()).radius(new SVGNumber(size$$1).divide(2)).move(0, 0);
return this.put(new Circle()).radius(new SVGNumber$1(size$$1).divide(2)).move(0, 0);
}
}
});
@@ -1354,7 +1384,7 @@ var SVG = (function () {

function size$1(width, height) {
var p = proportionalSize$1(this, width, height);
return this.width(new SVGNumber(p.width)).height(new SVGNumber(p.height));
return this.width(new SVGNumber$1(p.width)).height(new SVGNumber$1(p.height));
} // Clone element

function clone(parent) {
@@ -1380,6 +1410,10 @@ var SVG = (function () {
return element;
} // Add element to given container and return self

function addTo(parent) {
return makeInstance(parent).put(this);
} // Add element to given container and return container

function putIn(parent) {
return makeInstance(parent).add(this);
} // Get / set id
@@ -1508,6 +1542,7 @@ var SVG = (function () {
clone: clone,
remove: remove,
replace: replace,
addTo: addTo,
putIn: putIn,
id: id$1,
inside: inside,
@@ -1675,7 +1710,7 @@ var SVG = (function () {
_createClass(Stop, [{
key: "update",
value: function update(o) {
if (typeof o === 'number' || o instanceof SVGNumber) {
if (typeof o === 'number' || o instanceof SVGNumber$1) {
o = {
offset: arguments[0],
color: arguments[1],
@@ -1686,7 +1721,7 @@ var SVG = (function () {

if (o.opacity != null) this.attr('stop-opacity', o.opacity);
if (o.color != null) this.attr('stop-color', o.color);
if (o.offset != null) this.attr('offset', new SVGNumber(o.offset));
if (o.offset != null) this.attr('offset', new SVGNumber$1(o.offset));
return this;
}
}]);
@@ -1698,20 +1733,20 @@ var SVG = (function () {
// FIXME: add to runner
function from(x, y) {
return (this._element || this).type === 'radialGradient' ? this.attr({
fx: new SVGNumber(x),
fy: new SVGNumber(y)
fx: new SVGNumber$1(x),
fy: new SVGNumber$1(y)
}) : this.attr({
x1: new SVGNumber(x),
y1: new SVGNumber(y)
x1: new SVGNumber$1(x),
y1: new SVGNumber$1(y)
});
}
function to(x, y) {
return (this._element || this).type === 'radialGradient' ? this.attr({
cx: new SVGNumber(x),
cy: new SVGNumber(y)
cx: new SVGNumber$1(x),
cy: new SVGNumber$1(y)
}) : this.attr({
x2: new SVGNumber(x),
y2: new SVGNumber(y)
x2: new SVGNumber$1(x),
y2: new SVGNumber$1(y)
});
}

@@ -2010,7 +2045,7 @@ var SVG = (function () {


if (typeof val === 'number') {
val = new SVGNumber(val);
val = new SVGNumber$1(val);
} else if (Color.isColor(val)) {
// ensure full hex color
val = new Color(val);
@@ -2774,7 +2809,7 @@ var SVG = (function () {
return parser.nodes;
}

var Point =
var Point$1 =
/*#__PURE__*/
function () {
// Initialize
@@ -2837,7 +2872,7 @@ var SVG = (function () {
Element: {
// Get point
point: function point(x, y) {
return new Point(x, y).transform(this.screenCTM().inverse());
return new Point$1(x, y).transform(this.screenCTM().inverse());
}
}
});
@@ -3115,8 +3150,8 @@ var SVG = (function () {


var result = [];
var p = new Point();
var p0 = new Point();
var p = new Point$1();
var p0 = new Point$1();
var index = 0;
var len = array.length;

@@ -3433,7 +3468,7 @@ var SVG = (function () {
_classCallCheck(this, Text);

_this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, nodeOrNew$1('text', node), Text));
_this.dom.leading = new SVGNumber(1.3); // store leading value for rebuilding
_this.dom.leading = new SVGNumber$1(1.3); // store leading value for rebuilding

_this._rebuild = true; // enable automatic updating of dy values

@@ -3538,7 +3573,7 @@ var SVG = (function () {
} // act as setter


this.dom.leading = new SVGNumber(value);
this.dom.leading = new SVGNumber$1(value);
return this.rebuild();
} // Rebuild appearance type

@@ -3554,7 +3589,7 @@ var SVG = (function () {
if (this._rebuild) {
var self = this;
var blankLineOffset = 0;
var dy = this.dom.leading * new SVGNumber(this.attr('font-size'));
var dy = this.dom.leading * new SVGNumber$1(this.attr('font-size'));
this.each(function () {
if (this.dom.newLined) {
this.attr('x', self.attr('x'));
@@ -3584,7 +3619,7 @@ var SVG = (function () {
key: "setData",
value: function setData(o) {
this.dom = o;
this.dom.leading = new SVGNumber(o.leading || 1.3);
this.dom.leading = new SVGNumber$1(o.leading || 1.3);
return this;
}
}]);
@@ -3789,7 +3824,7 @@ var SVG = (function () {
});
register(Use);

var Matrix =
var Matrix$1 =
/*#__PURE__*/
function () {
function Matrix() {
@@ -3833,7 +3868,7 @@ var SVG = (function () {
var t = Matrix.formatTransforms(o);
var current = this;

var _transform = new Point(t.ox, t.oy).transform(current),
var _transform = new Point$1(t.ox, t.oy).transform(current),
ox = _transform.x,
oy = _transform.y; // Construct the resulting matrix

@@ -3841,7 +3876,7 @@ var SVG = (function () {
var transformer = new Matrix().translateO(t.rx, t.ry).lmultiplyO(current).translateO(-ox, -oy).scaleO(t.scaleX, t.scaleY).skewO(t.skewX, t.skewY).shearO(t.shear).rotateO(t.theta).translateO(ox, oy); // If we want the origin at a particular place, we force it there

if (isFinite(t.px) || isFinite(t.py)) {
var origin = new Point(ox, oy).transform(transformer); // TODO: Replace t.px with isFinite(t.px)
var origin = new Point$1(ox, oy).transform(transformer); // TODO: Replace t.px with isFinite(t.px)

var dx = t.px ? t.px - origin.x : 0;
var dy = t.py ? t.py - origin.y : 0;
@@ -4229,16 +4264,16 @@ var SVG = (function () {
var scaleY = o.scale && o.scale.length ? o.scale[1] * flipY : isFinite(o.scale) ? o.scale * flipY : isFinite(o.scaleY) ? o.scaleY * flipY : flipY;
var shear = o.shear || 0;
var theta = o.rotate || o.theta || 0;
var origin = new Point(o.origin || o.around || o.ox || o.originX, o.oy || o.originY);
var origin = new Point$1(o.origin || o.around || o.ox || o.originX, o.oy || o.originY);
var ox = origin.x;
var oy = origin.y;
var position = new Point(o.position || o.px || o.positionX, o.py || o.positionY);
var position = new Point$1(o.position || o.px || o.positionX, o.py || o.positionY);
var px = position.x;
var py = position.y;
var translate = new Point(o.translate || o.tx || o.translateX, o.ty || o.translateY);
var translate = new Point$1(o.translate || o.tx || o.translateX, o.ty || o.translateY);
var tx = translate.x;
var ty = translate.y;
var relative = new Point(o.relative || o.rx || o.relativeX, o.ry || o.relativeY);
var relative = new Point$1(o.relative || o.rx || o.relativeX, o.ry || o.relativeY);
var rx = relative.x;
var ry = relative.y; // Populate all of the values

@@ -4287,7 +4322,7 @@ var SVG = (function () {
Element: {
// Get current matrix
ctm: function ctm() {
return new Matrix(this.node.getCTM());
return new Matrix$1(this.node.getCTM());
},
// Get current screen matrix
screenCTM: function screenCTM() {
@@ -4299,10 +4334,10 @@ var SVG = (function () {
var rect = this.rect(1, 1);
var m = rect.node.getScreenCTM();
rect.remove();
return new Matrix(m);
return new Matrix$1(m);
}

return new Matrix(this.node.getScreenCTM());
return new Matrix$1(this.node.getScreenCTM());
}
}
});
@@ -4345,7 +4380,7 @@ var SVG = (function () {
var xMax = -Infinity;
var yMin = Infinity;
var yMax = -Infinity;
var pts = [new Point(this.x, this.y), new Point(this.x2, this.y), new Point(this.x, this.y2), new Point(this.x2, this.y2)];
var pts = [new Point$1(this.x, this.y), new Point$1(this.x2, this.y), new Point$1(this.x, this.y2), new Point$1(this.x2, this.y2)];
pts.forEach(function (p) {
p = p.transform(m);
xMin = Math.min(xMin, p.x);
@@ -4709,14 +4744,14 @@ var SVG = (function () {
var type = _typeof(value);

if (type === 'number') {
this.type(SVGNumber);
this.type(SVGNumber$1);
} else if (type === 'string') {
if (Color.isColor(value)) {
this.type(Color);
} else if (regex.delimiter.test(value)) {
this.type(regex.pathLetters.test(value) ? PathArray : SVGArray);
} else if (regex.numberAndUnit.test(value)) {
this.type(SVGNumber);
this.type(SVGNumber$1);
} else {
this.type(Morphable.NonMorphable);
}
@@ -4893,7 +4928,7 @@ var SVG = (function () {
return _class3;
}();

var morphableTypes = [SVGNumber, Color, Box$1, Matrix, SVGArray, PointArray$1, PathArray, Morphable.NonMorphable, Morphable.TransformBag, Morphable.ObjectBag];
var morphableTypes = [SVGNumber$1, Color, Box$1, Matrix$1, SVGArray, PointArray$1, PathArray, Morphable.NonMorphable, Morphable.TransformBag, Morphable.ObjectBag];
extend$1(morphableTypes, {
to: function to(val, args) {
return new Morphable().type(this.constructor).from(this.valueOf()).to(val, args);
@@ -5205,7 +5240,7 @@ var SVG = (function () {
// '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }
// }

var Runner =
var Runner$1 =
/*#__PURE__*/
function () {
function Runner(options) {
@@ -5233,7 +5268,7 @@ var SVG = (function () {
this._time = 0;
this._last = 0; // Save transforms applied to this runner

this.transforms = new Matrix();
this.transforms = new Matrix$1();
this.transformId = 1; // Looping variables

this._haveReversed = false;
@@ -5474,7 +5509,7 @@ var SVG = (function () {
this._initialise(running); // clear the transforms on this runner so they dont get added again and again


this.transforms = new Matrix();
this.transforms = new Matrix$1();

var converged = this._run(declarative ? dt : position); // this.fire('step', this)

@@ -5608,7 +5643,7 @@ var SVG = (function () {
}, {
key: "clearTransform",
value: function clearTransform() {
this.transforms = new Matrix();
this.transforms = new Matrix$1();
return this;
}
}], [{
@@ -5644,10 +5679,10 @@ var SVG = (function () {

return Runner;
}();
Runner.id = 0;
Runner$1.id = 0;

var FakeRunner = function FakeRunner() {
var transforms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Matrix();
var transforms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Matrix$1();
var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
var done = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

@@ -5658,7 +5693,7 @@ var SVG = (function () {
this.done = done;
};

extend$1([Runner, FakeRunner], {
extend$1([Runner$1, FakeRunner], {
mergeWith: function mergeWith(runner) {
return new FakeRunner(runner.transforms.lmultiply(this.transforms), runner.id);
}
@@ -5675,7 +5710,7 @@ var SVG = (function () {
function mergeTransforms() {
// Find the matrix to apply to the element and apply it
var runners = this._transformationRunners.runners;
var netTransform = runners.map(getRunnerTransform).reduce(lmultiply, new Matrix());
var netTransform = runners.map(getRunnerTransform).reduce(lmultiply, new Matrix$1());
this.transform(netTransform);

this._transformationRunners.merge();
@@ -5769,9 +5804,9 @@ var SVG = (function () {
registerMethods({
Element: {
animate: function animate(duration, delay, when) {
var o = Runner.sanitise(duration, delay, when);
var o = Runner$1.sanitise(duration, delay, when);
var timeline$$1 = this.timeline();
return new Runner(o.duration).loop(o).element(this).timeline(timeline$$1).schedule(delay, when);
return new Runner$1(o.duration).loop(o).element(this).timeline(timeline$$1).schedule(delay, when);
},
delay: function delay(by, when) {
return this.animate(0, by, when);
@@ -5789,7 +5824,7 @@ var SVG = (function () {
// taken into account
.filter(function (runner) {
return runner.id <= current.id;
}).map(getRunnerTransform).reduce(lmultiply, new Matrix());
}).map(getRunnerTransform).reduce(lmultiply, new Matrix$1());
},
addRunner: function addRunner(runner) {
this._transformationRunners.add(runner);
@@ -5798,13 +5833,13 @@ var SVG = (function () {
},
_prepareRunner: function _prepareRunner() {
if (this._frameId == null) {
this._transformationRunners = new RunnerArray().add(new FakeRunner(new Matrix(this)));
this._transformationRunners = new RunnerArray().add(new FakeRunner(new Matrix$1(this)));
this._frameId = frameId++;
}
}
}
});
extend$1(Runner, {
extend$1(Runner$1, {
attr: function attr(a, v) {
return this.styleAttr('attr', a, v);
},
@@ -5830,7 +5865,7 @@ var SVG = (function () {
return this;
},
zoom: function zoom(level, point) {
var morpher = new Morphable(this._stepper).to(new SVGNumber(level));
var morpher = new Morphable(this._stepper).to(new SVGNumber$1(level));
this.queue(function () {
morpher = morpher.from(this.zoom());
}, function (pos) {
@@ -5867,7 +5902,7 @@ var SVG = (function () {
var isMatrix = isMatrixLike(transforms);
affine = transforms.affine != null ? transforms.affine : affine != null ? affine : !isMatrix; // Create a morepher and set its type

var morpher = new Morphable().type(affine ? Morphable.TransformBag : Matrix).stepper(this._stepper);
var morpher = new Morphable().type(affine ? Morphable.TransformBag : Matrix$1).stepper(this._stepper);
var origin;
var element;
var current;
@@ -5878,7 +5913,7 @@ var SVG = (function () {
// make sure element and origin is defined
element = element || this.element();
origin = origin || getOrigin(transforms, element);
startTransform = new Matrix(relative ? undefined : element); // add the runner to the element so it can merge transformations
startTransform = new Matrix$1(relative ? undefined : element); // add the runner to the element so it can merge transformations

element.addRunner(this); // Deactivate all transforms that have run so far if we are absolute

@@ -5892,11 +5927,11 @@ var SVG = (function () {
// on this runner. We are absolute. We dont need these!
if (!relative) this.clearTransform();

var _transform = new Point(origin).transform(element._currentTransform(this)),
var _transform = new Point$1(origin).transform(element._currentTransform(this)),
x = _transform.x,
y = _transform.y;

var target = new Matrix(_objectSpread({}, transforms, {
var target = new Matrix$1(_objectSpread({}, transforms, {
origin: [x, y]
}));
var start = this._isDeclarative && current ? current : startTransform;
@@ -5933,7 +5968,7 @@ var SVG = (function () {
morpher.to(target);
var affineParameters = morpher.at(pos);
currentAngle = affineParameters.rotate;
current = new Matrix(affineParameters);
current = new Matrix$1(affineParameters);
this.addTransform(current);
return morpher.done();
}
@@ -5969,7 +6004,7 @@ var SVG = (function () {
return this._queueNumberDelta('dy', y);
},
_queueNumberDelta: function _queueNumberDelta(method, to) {
to = new SVGNumber(to); // Try to change the target if we have this method already registerd
to = new SVGNumber$1(to); // Try to change the target if we have this method already registerd

if (this._tryRetargetDelta(method, to)) return this; // Make a morpher and queue the animation

@@ -6004,7 +6039,7 @@ var SVG = (function () {
return this;
},
_queueNumber: function _queueNumber(method, value) {
return this._queueObject(method, new SVGNumber(value));
return this._queueObject(method, new SVGNumber$1(value));
},
// Animatable center x-axis
cx: function cx(x) {
@@ -6163,17 +6198,17 @@ var SVG = (function () {
TextPath: TextPath,
Tspan: Tspan,
Use: Use,
SVGNumber: SVGNumber,
SVGNumber: SVGNumber$1,
SVGArray: SVGArray,
PathArray: PathArray,
PointArray: PointArray$1,
Matrix: Matrix,
Point: Point,
Matrix: Matrix$1,
Point: Point$1,
Box: Box$1,
Color: Color,
Morphable: Morphable,
Queue: Queue,
Runner: Runner,
Runner: Runner$1,
Timeline: Timeline,
Controller: Controller,
Ease: Ease,
@@ -6334,7 +6369,7 @@ var SVG = (function () {
}

return matrix[transform[0]].apply(matrix, transform[1]);
}, new Matrix());
}, new Matrix$1());
return matrix;
} // add an element to another parent without changing the visual representation on the screen

@@ -6353,7 +6388,7 @@ var SVG = (function () {
function transform(o, relative) {
// Act as a getter if no object was passed
if (o == null || typeof o === 'string') {
var decomposed = new Matrix(this).decompose();
var decomposed = new Matrix$1(this).decompose();
return decomposed[o] || decomposed;
}

@@ -6366,7 +6401,7 @@ var SVG = (function () {


var cleanRelative = relative === true ? this : relative || false;
var result = new Matrix(cleanRelative).transform(o);
var result = new Matrix$1(cleanRelative).transform(o);
return this.attr('transform', result);
}
registerMethods('Element', {
@@ -6420,6 +6455,157 @@ var SVG = (function () {
});
registerConstructor('Memory', setup$1);

var sugar = {
stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'],
fill: ['color', 'opacity', 'rule'],
prefix: function prefix(t, a) {
return a === 'color' ? t : t + '-' + a;
} // Add sugar for fill and stroke

};
['fill', 'stroke'].forEach(function (m) {
var extension = {};
var i;

extension[m] = function (o) {
if (typeof o === 'undefined') {
return this;
}

if (typeof o === 'string' || Color.isRgb(o) || o && typeof o.fill === 'function') {
this.attr(m, o);
} else {
// set all attributes from sugar.fill and sugar.stroke list
for (i = sugar[m].length - 1; i >= 0; i--) {
if (o[sugar[m][i]] != null) {
this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]]);
}
}
}

return this;
};

registerMethods(['Element', 'Runner'], extension);
});
registerMethods(['Element', 'Runner'], {
// Let the user set the matrix directly
matrix: function matrix(mat, b, c, d, e, f) {
// Act as a getter
if (mat == null) {
return new Matrix(this);
} // Act as a setter, the user can pass a matrix or a set of numbers


return this.attr('transform', new Matrix(mat, b, c, d, e, f));
},
// Map rotation to transform
rotate: function rotate(angle, cx, cy) {
return this.transform({
rotate: angle,
ox: cx,
oy: cy
}, true);
},
// Map skew to transform
skew: function skew(x, y, cx, cy) {
return arguments.length === 1 || arguments.length === 3 ? this.transform({
skew: x,
ox: y,
oy: cx
}, true) : this.transform({
skew: [x, y],
ox: cx,
oy: cy
}, true);
},
shear: function shear(lam, cx, cy) {
return this.transform({
shear: lam,
ox: cx,
oy: cy
}, true);
},
// Map scale to transform
scale: function scale(x, y, cx, cy) {
return arguments.length === 1 || arguments.length === 3 ? this.transform({
scale: x,
ox: y,
oy: cx
}, true) : this.transform({
scale: [x, y],
ox: cx,
oy: cy
}, true);
},
// Map translate to transform
translate: function translate(x, y) {
return this.transform({
translate: [x, y]
}, true);
},
// Map relative translations to transform
relative: function relative(x, y) {
return this.transform({
relative: [x, y]
}, true);
},
// Map flip to transform
flip: function flip(direction, around) {
var directionString = typeof direction === 'string' ? direction : isFinite(direction) ? 'both' : 'both';
var origin = direction === 'both' && isFinite(around) ? [around, around] : direction === 'x' ? [around, 0] : direction === 'y' ? [0, around] : isFinite(direction) ? [direction, direction] : [0, 0];
this.transform({
flip: directionString,
origin: origin
}, true);
},
// Opacity
opacity: function opacity(value) {
return this.attr('opacity', value);
},
// Relative move over x axis
dx: function dx(x) {
return this.x(new SVGNumber(x).plus(this instanceof Runner ? 0 : this.x()), true);
},
// Relative move over y axis
dy: function dy(y) {
return this.y(new SVGNumber(y).plus(this instanceof Runner ? 0 : this.y()), true);
},
// Relative move over x and y axes
dmove: function dmove(x, y) {
return this.dx(x).dy(y);
}
});
registerMethods('radius', {
// Add x and y radius
radius: function radius(x, y) {
var type = (this._target || this).type;
return type === 'radialGradient' || type === 'radialGradient' ? this.attr('r', new SVGNumber(x)) : this.rx(x).ry(y == null ? x : y);
}
});
registerMethods('Path', {
// Get path length
length: function length() {
return this.node.getTotalLength();
},
// Get point at length
pointAt: function pointAt(length) {
return new Point(this.node.getPointAtLength(length));
}
});
registerMethods(['Container', 'Runner'], {
// Set font
font: function font(a, v) {
if (_typeof(a) === 'object') {
for (v in a) {
this.font(v, a[v]);
}
}

return a === 'leading' ? this.leading(v) : a === 'anchor' ? this.attr('text-anchor', v) : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style' ? this.attr('font-' + a, v) : this.attr(a, v);
}
});

function setup$2() {
var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.events = node.events || {};
@@ -6462,8 +6648,10 @@ var SVG = (function () {
function add(element, i) {
element = makeInstance(element);

if (element.node !== this.node.children[i]) {
this.node.insertBefore(element.node, this.node.children[i] || null);
if (i == null) {
this.node.appendChild(element.node);
} else if (element.node !== this.node.childNodes[i]) {
this.node.insertBefore(element.node, this.node.childNodes[i]);
}

return this;
@@ -6606,6 +6794,7 @@ var SVG = (function () {
extend$2(Path, getMethodsFor('Path'));
extend$2(Defs, getMethodsFor('Defs'));
extend$2([Text$1, Tspan], getMethodsFor('Tspan'));
extend$2([Rect, Ellipse, Circle, Gradient], getMethodsFor('radius'));
var containerMethods = getMethodsFor('Container'); // FIXME: We need a container array

for (var i$1 in containers) {

+ 1
- 1
dist/svg.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
src/Element.js View File

@@ -272,7 +272,7 @@ export function getEventTarget () {

registerMethods('Element', {
x, y, cx, cy, move, center, width, height, size, clone, remove, replace,
putIn, id, inside, toString, classes, hasClass, addClass, removeClass,
addTo, putIn, id, inside, toString, classes, hasClass, addClass, removeClass,
toggleClass, reference, doc, defs, parents, matches, native, svg,
writeDataToDom, setData, getEventTarget
})

+ 8
- 6
src/Parent.js View File

@@ -13,8 +13,10 @@ export function children () {
export function add (element, i) {
element = makeInstance(element)

if (element.node !== this.node.children[i]) {
this.node.insertBefore(element.node, this.node.children[i] || null)
if (i == null) {
this.node.appendChild(element.node)
} else if (element.node !== this.node.childNodes[i]) {
this.node.insertBefore(element.node, this.node.childNodes[i])
}

return this
@@ -33,22 +35,22 @@ export function has (element) {

// Gets index of given element
export function index (element) {
return [].slice.call(this.node.children).indexOf(element.node)
return [].slice.call(this.node.childNodes).indexOf(element.node)
}

// Get a element at the given index
export function get (i) {
return adopt(this.node.children[i])
return adopt(this.node.childNodes[i])
}

// Get first child
export function first () {
return this.get(0)
return adopt(this.node.firstChild)
}

// Get the last child
export function last () {
return this.get(this.node.children.length - 1)
return adopt(this.node.lastChild)
}

// Iterates over all children and invokes a given block

+ 47
- 14
src/elemnts-svg.js View File

@@ -1,34 +1,67 @@
// Import raw svg
svg: function (svg) {
svg: function (svg, fn = false) {
var well, len

// act as getter if no svg string is given
if(svg == null || svg === true) {
if(svg == null || svg === true || typeof svg == 'function') {
// write svgjs data to the dom
this.writeDataToDom()
let current = this

// return outer or inner content
// An export modifier was passed
if (typeof svg == 'function') {
// Juggle arguments
[fn, svg] = [svg, fn]

// If the user wants outerHTML we need to process this node, too
if (!svg) {
current = fn(current)

// The user does not want this node? Well, then he gets nothing
if (current === false) return ''
}

// Deep loop through all children and apply modifier
current.each(function () {
let result = fn(this)

// If modifier returns false, discard node
if (result === false) {
this.remove()

// If modifier returns new node, use it
} else if (result !== this) {
this.replace(result)
}
}, true)
}

// Return outer or inner content
return svg
? this.node.innerHTML
: this.node.outerHTML
? current.node.innerHTML
: current.node.outerHTML
}

// act as setter if we got a string
// Act as setter if we got a string

// make sure we are on a parent when trying to import
if(!(this instanceof SVG.Parent))
throw Error('Cannot import svg into non-parent element')
// Make sure we are on a current when trying to import
if(!(this instanceof SVG.current))
throw Error('Cannot import svg into non-current element')

// create temporary holder
// Create temporary holder
well = document.createElementNS(SVG.ns, 'svg')
fragment = document.createDocumentFragment()

// dump raw svg
// Dump raw svg
well.innerHTML = svg

// transplant nodes
// Transplant nodes into the fragment
for (len = well.children.length; len--;) {
this.node.appendChild(well.firstElementChild)
fragment.appendChild(well.firstElementChild)
}

// Add the whole fragment at once
this.node.appendChild(fragment)

return this
},
},

+ 10
- 2
src/methods.js View File

@@ -2,17 +2,25 @@ const methods = {}
const constructors = {}

export function registerMethods (name, m) {
if (Array.isArray(name)) {
for (let _name of name) {
registerMethods(_name, m)
}
return
}

if (typeof name == 'object') {
for (let [_name, _m] of Object.entries(name)) {
registerMethods(_name, _m)
}
return
}

methods[name] = Object.assign(methods[name] || {}, m)
}

export function getMethodsFor (name) {
return methods[name]
return methods[name] || {}
}

// FIXME: save memory?
@@ -26,5 +34,5 @@ export function registerConstructor (name, setup) {
}

export function getConstructor (name) {
return {setup: constructors[name], name}
return constructors[name] ? {setup: constructors[name], name} : {}
}

+ 7
- 6
src/sugar.js View File

@@ -1,4 +1,5 @@
import {Color, Element, Runner} from './classes.js'
import Color from './Color.js'
import {registerMethods} from './methods.js'

// Define list of available attributes for stroke and fill
var sugar = {
@@ -32,10 +33,10 @@ var sugar = {
return this
}

extend([Element, Runner], extension)
registerMethods(['Element', 'Runner'], extension)
})

extend([Element, Runner], {
registerMethods(['Element', 'Runner'], {
// Let the user set the matrix directly
matrix: function (mat, b, c, d, e, f) {
// Act as a getter
@@ -114,7 +115,7 @@ extend([Element, Runner], {
}
})

extend([Rect, Ellipse, Circle, Gradient, Runner], {
registerMethods('radius', {
// Add x and y radius
radius: function (x, y) {
var type = (this._target || this).type
@@ -124,7 +125,7 @@ extend([Rect, Ellipse, Circle, Gradient, Runner], {
}
})

extend(Path, {
registerMethods('Path', {
// Get path length
length: function () {
return this.node.getTotalLength()
@@ -135,7 +136,7 @@ extend(Path, {
}
})

extend([Parent, Text, Tspan, Runner], {
registerMethods(['Container', 'Runner'], {
// Set font
font: function (a, v) {
if (typeof a === 'object') {

+ 8
- 0
src/svg.js View File

@@ -16,6 +16,7 @@ import './selector.js'
import './css.js'
import './transform.js'
import './memory.js'
import './sugar.js'
import {getMethodsFor, getConstructor} from './methods.js'
const extend = tools.extend

@@ -48,6 +49,13 @@ extend([
Classes.Tspan
], getMethodsFor('Tspan'))

extend([
Classes.Rect,
Classes.Ellipse,
Classes.Circle,
Classes.Gradient
], getMethodsFor('radius'))

const containerMethods = getMethodsFor('Container')
// FIXME: We need a container array
for (let i in containers) {

Write Preview
Loading…
Cancel
Save