I want to create curved text in SVG using Javascript. I have faced a lot of problems, specially the namespace related ones, but now everything works, a path and a circle are successfully shown, but the text is not displayed. When I copy-paste the created svg code in browser inspector and add that to the svg, it works as intended. But I can't make it work using JS. The whole code is as you can see:
<html>
<body onload="onLoad()">
<div id="svgbox"></div>
</body>
<script>
var svg;
var last_shape; // for debug
function qs(sel)
{
return document.querySelector(sel);
}
function SVG(el)
{
this.element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qs(el).appendChild(this.element);
var props = {
"xmlns": "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"version": "1.1",
"style": "width:100%;height:100%;",
"stroke": "#58b",
"fill":"none",
"stroke-width": "2"
};
for (i in props) {
this.element.setAttribute(i, props[i]);
}
this.create = function(tag,props) {
var o = document.createElementNS("http://www.w3.org/2000/svg", tag);
if(typeof(props)!="undefined") {
for (i in props) {
o.setAttribute(i, props[i]);
}
}
return o;
}
this.add = function(tag,props) {
var o = this.create(tag,props);
this.element.appendChild( o );
return o;
};
this.addTo = function(parent, tag, props) {
var o = document.createElementNS("http://www.w3.org/2000/svg", tag);
if(typeof(props)!="undefined") {
for (i in props) {
o.setAttribute(i, props[i]);
}
}
parent.appendChild(o);
return o;
};
return this;
}
function drawArc(svg, fromX, fromY, toX, toY, controlX, controlY, props)
{
var o = svg.add( "path", {
"d":"M" + fromX + " " + fromY + " Q " +
controlX + " " + controlY + " " +
toX + " " + toY
});
if(typeof(props)!="undefined") {
for (i in props) {
o.setAttribute(i, props[i]);
}
}
last_shape = o;
return o;
}
function drawLabeledArrow(svg, fromX, fromY, toX, toY, title, props)
{
var arc_id = "arc-"+Math.floor(Math.random()*10000000);
var arc = drawArc( svg, fromX, fromY, toX, toY, (fromX+toX)/2, (fromY+toY)/2 - (fromX+toX)/2, {id: arc_id});
var head_base_x = arc.getPointAtLength(arc.getTotalLength() - 4).x;
var head_base_y = arc.getPointAtLength(arc.getTotalLength() - 4).y;
last_shape = svg.add("text");
last_shape = svg.addTo(last_shape, "textPath", {"fill":"#ff0000", "xlink:href":"#"+arc_id});
last_shape.appendChild(document.createTextNode(title));
last_shape = svg.add( "circle", {
cx: head_base_x,
cy: head_base_y,
r: 4,
fill: "#5ad"
});
}
function onLoad()
{
svg = SVG('#svgbox');
drawLabeledArrow(svg, 10,100, 200, 100, "test label");
}
</script>
</html>
I'd appreciate if anyone tells me what's wrong here, and if there is any good and short explanation of all these problems in working with SVG in JS. Thanks.
UPDATE: I modified the code to use setAttributeNS instead, but still no success.
function drawLabeledArrow(svg, fromX, fromY, toX, toY, title, props)
{
var arc_id = "arc-"+Math.floor(Math.random()*10000000);
var arc = drawArc( svg, fromX, fromY, toX, toY, (fromX+toX)/2, (fromY+toY)/2 - (fromX+toX)/2, {id: arc_id});
var head_base_x = arc.getPointAtLength(arc.getTotalLength() - 4).x;
var head_base_y = arc.getPointAtLength(arc.getTotalLength() - 4).y;
last_shape = svg.add("text");
var o = document.createElementNS("http://www.w3.org/2000/svg", "textPath");
o.setAttributeNS("http://www.w3.org/2000/svg", "xlink:href", "#"+arc_id);
o.appendChild(document.createTextNode(title));
last_shape.appendChild( o );
last_shape = svg.add( "circle", {
cx: head_base_x,
cy: head_base_y,
r: 4,
fill: "#5ad"
});
}
The xlink:href attribute cannot be set with setAttribute as that method can only set attributes in the null namespace and xlink:href is in the xlink namespace.
Use setAttributeNS instead and specify the xlink namespace http://www.w3.org/1999/xlink as the first argument.
Related
I'm grouping a few elements using snapSVG's group method, pushing them to an array and applying the drag method on the array elements by looping through each element.
Could you please help me in accessing the index postion of the dragged element (grps[i]) in the drag stop handler.
g1 and var g2 are the two gropus.
grps is the array that holds the two groups.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>
JavaScript
var s = Snap(800, 600);
var grps = [];
var objects = [];
var red = s.rect(50, 50, 200, 200).attr({
fill: "red"
});
var green = s.rect(60, 60, 100, 100).attr({
fill: "green"
});
var g1 = s.group(red, green);
grps.push(g1);
var red = s.rect(300, 50, 200, 200).attr({
fill: "red"
});
var green = s.rect(310, 60, 100, 100).attr({
fill: "green"
});
var g2 = s.group(red, green);
grps.push(g1, g2);
var drag_move = function(dx, dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
};
var drag_start = function() {
this.data('origTransform', this.transform().local);
};
var drag_stop = function(i) {
console.log("finished dragging");
console.log(i);
};
for (i = 0; i < grps.length; i++) {
grps[i].drag(drag_move, drag_start, drag_stop);
}
JsBin Link: http://jsbin.com/tonazosicu/10/edit?js
Thanks
You can using Function.prototype.bind() to preset some parameters like below
for (i = 0; i < grps.length; i++) {
grps[i].drag(drag_move, drag_start, drag_stop.bind(null, i));
}
Then on drag_stop you can access them like below.
var drag_stop = function(index, event) {
console.log("finished dragging");
console.log(index);
console.log(event);
};
One can achieve the same thing (in lastest versions of Snap I think) with...
grps.ForEach( function( el, i ) {
el.drag(drag_move, drag_start, drag_stop.bind(null, i))
};
But ultimately you don't need to use i, if you just use 'this' in the handler in most cases, and can simply do....
grps.ForEach( function( el ) {
el.drag(drag_move, drag_start, drag_stop)
};
This question already has an answer here:
JavaScript and SVG: Error on createElement()
(1 answer)
Closed 5 years ago.
I'm drawing some SVG inline with JavaScript. Mostly paths, though I did also try a polygon. I manage to populate a <svg> tag with paths (one in this simplified example) that are correct SVG. I know this because:
When the contents of the svg tag are copied in to a file and opened in Inkscape, the resulting picture is as expected.
If I change a <path> in Firefox's Inspector in some way, like removing the </path> end tag, (which just causes Firefox to repair the code to the way it originally was), that particular path will display, but the rest still won't.
When I copy all the html in the page as it is after the javascript has run, and put that in a new html file, the svg displays correctly.
I originally ran into this problem in Firefox, but did also verify that the svg creation doesn't work in Edge either.
So how would I make the inline svg render immediately after it has been created?
EDIT: Not the same as this: JavaScript and SVG: Error on createElement(). That question pertains to an SVG document, not HTML. Also I don't get an error message at all.
<html>
<head></head>
<body>
<svg id="drawing"></svg>
<script>
function creel(tagname, id, cla, attrs) {
var n = document.createElement(tagname);
if (id) {
n.id = id;
}
if (cla) {
n.className = cla;
}
if (attrs) {
for (var i = 0; i < attrs.length; i = i + 2) {
n.setAttribute(attrs[i], attrs[i + 1]);
}
}
return n;
}
function drawline(c, ax, ay, bx, by, style) {
// Method for svg
var d = "M" + ax + "," + ay + " L" + bx + "," + by;
var p = creel("path", "", "", ["d", d]);
if (style) {
p.setAttribute("style", style);
} else {
p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;");
}
c.appendChild(p);
}
function drawit() {
var c = document.getElementById("drawing");
c.setAttribute("width", 500);
c.setAttribute("height", 500);
c.setAttribute("viewBox", "0 0 500 500");
c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;");
var thinstyle = "stroke:#555555;stroke-width:2; fill:none;";
drawline(c, 10, 10, 400, 400, thinstyle);
}
window.onload = function() {
drawit();
}
</script>
</body>
</html>
Create SVG elements with Document.createElementNS
When creating straight from JavaScript, you need to create svg elements with Document.createElementNS:
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
Your example rendering the path:
function creel(tagname, id, cla, attrs) {
// USE createElementNS HERE
var n = document.createElementNS('http://www.w3.org/2000/svg', tagname);
if (id) {
n.id = id;
}
if (cla) {
n.className = cla;
}
if (attrs) {
for (var i = 0; i < attrs.length; i = i + 2) {
n.setAttribute(attrs[i], attrs[i + 1]);
}
}
return n;
}
function drawline(c, ax, ay, bx, by, style) {
// Method for svg
var d = "M" + ax + "," + ay + " L" + bx + "," + by;
var p = creel("path", "", "", ["d", d]);
if (style) {
p.setAttribute("style", style);
} else {
p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;");
}
c.appendChild(p);
}
function drawit() {
var c = document.getElementById("drawing");
c.setAttribute("width", 500);
c.setAttribute("height", 500);
c.setAttribute("viewBox", "0 0 500 500");
c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;");
var thinstyle = "stroke:#555555;stroke-width:2; fill:none;";
drawline(c, 10, 10, 400, 400, thinstyle);
}
window.onload = function() {
drawit();
}
<svg id="drawing"></svg>
Also, keep in mind that some attributes on SVG elements should/need to be set with the setAttributeNS method. One of the attributes that should be set with setAttributeNS is xmlns.
This is not a duplicate of the other question.
I found this talking about rotation about the center using XML, tried to implement the same using vanilla JavaScript like rotate(45, 60, 60) but did not work with me.
The approach worked with me is the one in the snippet below, but found the rect not rotating exactly around its center, and it is moving little bit, the rect should start rotating upon the first click, and should stop at the second click, which is going fine with me.
Any idea, why the item is moving, and how can I fix it.
var NS="http://www.w3.org/2000/svg";
var SVG=function(el){
return document.createElementNS(NS,el);
}
var svg = SVG("svg");
svg.width='100%';
svg.height='100%';
document.body.appendChild(svg);
class myRect {
constructor(x,y,h,w,fill) {
this.SVGObj= SVG('rect'); // document.createElementNS(NS,"rect");
self = this.SVGObj;
self.x.baseVal.value=x;
self.y.baseVal.value=y;
self.width.baseVal.value=w;
self.height.baseVal.value=h;
self.style.fill=fill;
self.onclick="click(evt)";
self.addEventListener("click",this,false);
}
}
Object.defineProperty(myRect.prototype, "node", {
get: function(){ return this.SVGObj;}
});
Object.defineProperty(myRect.prototype, "CenterPoint", {
get: function(){
var self = this.SVGObj;
self.bbox = self.getBoundingClientRect(); // returned only after the item is drawn
self.Pc = {
x: self.bbox.left + self.bbox.width/2,
y: self.bbox.top + self.bbox.height/2
};
return self.Pc;
}
});
myRect.prototype.handleEvent= function(evt){
self = evt.target; // this returns the `rect` element
this.cntr = this.CenterPoint; // backup the origional center point Pc
this.r =5;
switch (evt.type){
case "click":
if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true;
else self.moving = false;
if(self.moving == true){
self.move = setInterval(()=>this.animate(),100);
}
else{
clearInterval(self.move);
}
break;
default:
break;
}
}
myRect.prototype.step = function(x,y) {
return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().translate(x,y));
}
myRect.prototype.rotate = function(r) {
return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().rotate(r));
}
myRect.prototype.animate = function() {
self = this.SVGObj;
self.transform.baseVal.appendItem(this.step(this.cntr.x,this.cntr.y));
self.transform.baseVal.appendItem(this.rotate(this.r));
self.transform.baseVal.appendItem(this.step(-this.cntr.x,-this.cntr.y));
};
for (var i = 0; i < 10; i++) {
var x = Math.random() * 100,
y = Math.random() * 300;
var r= new myRect(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16));
svg.appendChild(r.node);
}
UPDATE
I found the issue to be calculating the center point of the rect using the self.getBoundingClientRect() there is always 4px extra in each side, which means 8px extra in the width and 8px extra in the height, as well as both x and y are shifted by 4 px, I found this talking about the same, but neither setting self.setAttribute("display", "block"); or self.style.display = "block"; worked with me.
So, now I've one of 2 options, either:
Find a solution of the extra 4px in each side (i.e. 4px shifting of both x and y, and total 8px extra in both width and height),
or calculating the mid-point using:
self.Pc = {
x: self.x.baseVal.value + self.width.baseVal.value/2,
y: self.y.baseVal.value + self.height.baseVal.value/2
};
The second option (the other way of calculating the mid-point worked fine with me, as it is rect but if other shape is used, it is not the same way, I'll look for universal way to find the mid-point whatever the object is, i.e. looking for the first option, which is solving the self.getBoundingClientRect() issue.
Here we go…
FIDDLE
Some code for documentation here:
let SVG = ((root) => {
let ns = root.getAttribute('xmlns');
return {
e (tag) {
return document.createElementNS(ns, tag);
},
add (e) {
return root.appendChild(e)
},
matrix () {
return root.createSVGMatrix();
},
transform () {
return root.createSVGTransformFromMatrix(this.matrix());
}
}
})(document.querySelector('svg.stage'));
class Rectangle {
constructor (x,y,w,h) {
this.node = SVG.add(SVG.e('rect'));
this.node.x.baseVal.value = x;
this.node.y.baseVal.value = y;
this.node.width.baseVal.value = w;
this.node.height.baseVal.value = h;
this.node.transform.baseVal.initialize(SVG.transform());
}
rotate (gamma, x, y) {
let t = this.node.transform.baseVal.getItem(0),
m1 = SVG.matrix().translate(-x, -y),
m2 = SVG.matrix().rotate(gamma),
m3 = SVG.matrix().translate(x, y),
mtr = t.matrix.multiply(m3).multiply(m2).multiply(m1);
this.node.transform.baseVal.getItem(0).setMatrix(mtr);
}
}
Thanks #Philipp,
Solving catching the SVG center can be done, by either of the following ways:
Using .getBoundingClientRect() and adjusting the dimentions considering 4px are extra in each side, so the resulted numbers to be adjusted as:
BoxC = self.getBoundingClientRect();
Pc = {
x: (BoxC.left - 4) + (BoxC.width - 8)/2,
y: (BoxC.top - 4) + (BoxC.height - 8)/2
};
or by:
Catching the .(x/y).baseVal.value as:
Pc = {
x: self.x.baseVal.value + self.width.baseVal.value/2,
y: self.y.baseVal.value + self.height.baseVal.value/2
};
Below a full running code:
let ns="http://www.w3.org/2000/svg";
var root = document.createElementNS(ns, "svg");
root.style.width='100%';
root.style.height='100%';
root.style.backgroundColor = 'green';
document.body.appendChild(root);
//let SVG = function() {}; // let SVG = new Object(); //let SVG = {};
class SVG {};
SVG.matrix = (()=> { return root.createSVGMatrix(); });
SVG.transform = (()=> { return root.createSVGTransformFromMatrix(SVG.matrix()); });
SVG.translate = ((x,y)=> { return SVG.matrix().translate(x,y) });
SVG.rotate = ((r)=> { return SVG.matrix().rotate(r); });
class Rectangle {
constructor (x,y,w,h,fill) {
this.node = document.createElementNS(ns, 'rect');
self = this.node;
self.x.baseVal.value = x;
self.y.baseVal.value = y;
self.width.baseVal.value = w;
self.height.baseVal.value = h;
self.style.fill=fill;
self.transform.baseVal.initialize(SVG.transform()); // to generate transform list
this.transform = self.transform.baseVal.getItem(0), // to be able to read the matrix
this.node.addEventListener("click",this,false);
}
}
Object.defineProperty(Rectangle.prototype, "draw", {
get: function(){ return this.node;}
});
Object.defineProperty(Rectangle.prototype, "CenterPoint", {
get: function(){
var self = this.node;
self.bbox = self.getBoundingClientRect(); // There is 4px shift in each side
self.bboxC = {
x: (self.bbox.left - 4) + (self.bbox.width - 8)/2,
y: (self.bbox.top - 4) + (self.bbox.height - 8)/2
};
// another option is:
self.Pc = {
x: self.x.baseVal.value + self.width.baseVal.value/2,
y: self.y.baseVal.value + self.height.baseVal.value/2
};
return self.bboxC;
// return self.Pc; // will give same output of bboxC
}
});
Rectangle.prototype.animate = function () {
let move01 = SVG.translate(this.CenterPoint.x,this.CenterPoint.y),
move02 = SVG.rotate(10),
move03 = SVG.translate(-this.CenterPoint.x,-this.CenterPoint.y);
movement = this.transform.matrix.multiply(move01).multiply(move02).multiply(move03);
this.transform.setMatrix(movement);
}
Rectangle.prototype.handleEvent= function(evt){
self = evt.target; // this returns the `rect` element
switch (evt.type){
case "click":
if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true;
else self.moving = false;
if(self.moving == true){
self.move = setInterval(()=>this.animate(),100);
}
else{
clearInterval(self.move);
}
break;
default:
break;
}
}
for (var i = 0; i < 10; i++) {
var x = Math.random() * 100,
y = Math.random() * 300;
var r= new Rectangle(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16));
root.appendChild(r.draw);
}
I am looking for a way to fill an Image with an image pattern in a FabricJs canvas, since there is not a built-in image filter to do this. Although my code is still in an early version, basically it should work(unfortunately it doesn't);
All the eavy work is done by applyTo method, where I load an image, then fill an hidden canvas with a pattern. I noticed that there is a function (source) which fall in an infinite recursion:
var pattern = new fabric.Pattern({
source: function () {
fhc.setDimensions({
width: smile.getWidth() + 5,
height: smile.getHeight() + 5,
});
return fhc.getElement();
},
repeat: 'repeat'
});
I have prepared a demo on JSFiddle
Could anyone help me to understand how to solve this issue?
(function (global) {
'use strict';
var fabric = global.fabric || (global.fabric = {}),
extend = fabric.util.object.extend;
fabric.Image.filters.ImagePatternEffect = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
type: 'ImagePatternEffect',
initialize: function (options) {
options = options || {};
this.img = options.img;
},
applyTo: function (canvasEl) {
var w = canvasEl.width;
var h = canvasEl.height;
var hc = document.createElement('canvas');
fabric.Image.fromURL('http://i.imgur.com/0Ks0mlY.png', function (smile) {
debugger;
hc.setAttribute('width', w);
hc.setAttribute('height', h);
var fhc = new fabric.StaticCanvas(hc);
fhc.add(smile);
var pattern = new fabric.Pattern({
source: function () {
fhc.setDimensions({
width: smile.getWidth() + 5,
height: smile.getHeight() + 5,
});
return fhc.getElement();
},
repeat: 'repeat'
});
var rect = new fabric.Rect({
fill: pattern,
width: w,
height: h
});
fhc.add(rect);
fhc.renderAll();
var ifhcContext = fhc.getContext('2d');
var fhcImageData = ifhcContext.getImageData(0, 0, fhc.width, fhc.height);
var fhcData = fhcImageData.data;
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
data = imageData.data;
for (var i = 0, n = data.length; i < n; i += 4) {
data[i] += fhcData[i];
data[i + 1] += fhcData[i + 1];
data[i + 2] += fhcData[i + 2];
}
context.putImageData(imageData, 0, 0);
});
},
toObject: function () {
return extend(this.callSuper('toObject'), {
});
}
});
fabric.Image.filters.ImagePatternEffect.fromObject = function (object) {
return new fabric.Image.filters.ImagePatternEffect(object);
};
})(typeof exports !== 'undefined' ? exports : this);
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('http://i.imgur.com/qaQ8jir.png', function (img) {
var orImg = img;
img.filters.push(new fabric.Image.filters.ImagePatternEffect({
img: orImg,
}));
img.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(img.set({
width: 300,
height: 300,
}));
}, {
crossOrigin: ''
});
i also use pattern image on my web application , in order to add it on objects, and it works.
All you need is this function function loadPattern(url, seatObj) where i pass the object which i want to add the pattern each time and the image(pattern) link.
here is the snippet :
function loadPattern(url, seatObj) {
//i use the loadImage function to load the image and pass it to the fabric.Pattern constructor
fabric.util.loadImage(url, function (img) {
//i change the fill property of the object to the
//image that i want to load on it as a pattern
seatObj.fill = new fabric.Pattern({
source: img,
repeat: 'no-repeat'
});
//refresh canvas and watch your image pattern on the object
canvas.renderAll();
});
}
hope this helps,
good luck
I have a list of json objects.
var Planets = [
{name:"maths", percComp: "2", preReq: "english"},
{name:"english", percComp: "20", preReq: "geog"},
{name:"geog", percComp: "57", preReq: "maths"}
];
These objects are planets that i will add to a universe. They are school subjects
I also have a planet class
function Planet(planet, index)
{
this.name = planet.name;
this.percComp = planet.percComp;
this.preReq = planet.preReq;
CreatePlanet(this, index);
this.line = paper.path('');
function RedrawLine(planetFrom, planetTo, strokeWidth)
{
line.attr({
path:"M" + planetFrom.attrs.cx + "," + planetFrom.attrs.cy + "L"+ planetTo.attrs.cx + "," + planetTo.attrs.cy,
"stroke-width": strokeWidth
});
}
function CreatePlanet(planet)
{
var planetName = planet.name;
planetName = paper.circle(200 * index, 100, 80/index);
planetName.attr({
fill:'red',
stroke: '#3b4449',
'stroke-width': 6
});
SetGlow(30, true, 0, 0, 'grey', planetName)
SetHover(planetName);
}
function SetHover(planet)
{
var radius = planet.attrs.r;
planet.mouseover(function(){
this.animate({ r: radius * 1.3}, 150)
}).mouseout(function(){
this.animate({ r: radius}, 150)
})
}
function SetGlow(width, fill, offSetx, offsety, color, planet)
{
planet.glow({
width: 30,
fill: true,
offsetx: 0,
offsety: 0,
color: 'grey'
});
}
}
The code to initiate the program is
var element = document.getElementById('Main-Content')
var paper = new Raphael(element, 1000, 1000);
window.onload = function()
{
var planetsSet = paper.set();
var index = 1;
$(jQuery.parseJSON(JSON.stringify(Planets))).each(function(){
var planet = new Planet(this, index);
planetsSet.push(planet);
index++;
});
for (i=0; i<planetsSet.length; i++)
{
var planetTo = planetsSet[i];
// This is a test to see if RedrawLine works
var planeFrom = planetsFrom[i+1];
planetTo.RedrawLine(planetTo, planeFrom, 30)
var preReq = this.preReq;
}
}
The code populates the screen with 3 planets. I am trying to connect these with a line. The line will connect a planet with its pre requisite that is declared in the json object. So maths has a pre requisite english, and english has a pre requisite geog. I have a function in the Planet class that will draw the line, but I cant access the objects after they have been drawn.
Is this a problem with Raphael or can it be done?
several errors in your approach:
Paper.set is not Array, use Array for such purpse
you messed scopes, pass paper to your object constructor
public methods should be declared at least as this.method not just function method()
keep a public properties of your planet in this.property object or at least not call this.planet as PlanetName.
you forget to use this.line in your redraw method
little code to fill the void:
var planetsSet = [];
working sample
homework:
Remove planetFrom from RedrawLine method parameters, to be possible call this method as
PlanetFrom.RedrawLine(planetTo);