svg graph editor draft 1

gistfile1.txt

include('https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js');
$('.canvas').prepend('<div id="root"></div>')
document.addEventListener('contextmenu', event => event.preventDefault())
const DEBUG=true
function l(item) {if (typeof console != "undefined" && console.log && DEBUG) {var props=[];for(var a in arguments){props.push(arguments[a])}console.log(props.join(","))}}
var xOffset=$('.right_panel').offset().left
var yOffset=$('.right_panel').offset().top
function add(arr1,arr2){arr1.map(function (num, idx) {return num + arr2[idx]})}
function sub(arr1,arr2){arr1.map(function (num, idx) {return num - arr2[idx]})}

SVG.extend(SVG.Point, {
    add(pt) {return new SVG.Point(this.x+pt.x, this.y+pt.y)}
    ,sub(pt) {return new SVG.Point(this.x-pt.x, this.y-pt.y)}
})
SVG.extend(SVG.Shape, {
    pos() {return new SVG.Point(this.x(),this.y())}
})
//prefix $ for all the SVG.js objects
SVG.extend(SVG.Doc, SVG.Nested, {
    aNodeGraph: function(options) {
        this.down=false
        this.hitPt=null
        this.$target=null
        this.dblclick(function(e){
            this.down=true
            this.$target=SVG.get(e.target.id) || null
        })
        this.mousedown(function(e){
            var mPt=new SVG.Point(e.x-xOffset,e.y-yOffset)
            this.down=true
            this.$target=SVG.get(e.target.id) || null
            if(this.$target.type!="svg"){
                this.hitPt=mPt.sub(this.$target.pos());
            }
            else this.hitPt=null;
            l(this.$target.parent())
            //self.hitNode=SVG.get(e.target.ownerSVGElement.id);
            //self.hitNode.front();
        })
        this.mousemove(function(e){
            var mPt=new SVG.Point(e.x-xOffset,e.y-yOffset)
            if(this.hitPt!=null){
                this.$target.attr(mPt.sub(this.hitPt))
            }
        })
        this.mouseup(function(e){
            this.upPt=new SVG.Point(e.x-xOffset,e.y-yOffset)
            this.down=false
            this.$target=null
            this.hitPt=null
        })
    }
}); 


var root = SVG('root').size(1000, 700)
root.attr('id','svgroot')
root.addClass('root')
root.aNodeGraph()

SVG.aNode = SVG.invent({
  create: 'rect'
, inherit: SVG.Shape
, extend: {
    size:function(width, height) {
      return this.attr({
        width:  width
      , height: height
        , rx: 10
        , ry: 10
      })
    }
  }
, construct: {
    anode:function(width, height,color){
        var group=this.nested();
        group.attr('id','n1')
        return group.put(new SVG.aNode().size(width, height).fill(color))
        }
    }
})

class AnodeGraph {
    constructor(name) {
        this.name=name
        this.graph={
            anodes:[]
,           edges:[]
        }
    }
    hello() {
        console.log('Hello ' + this.name + '!' + JSON.stringify(this.graph))
    }
    addAnode(obj) {
        this.graph.anodes.push(obj.id)
    }
    addEdge(obj) {
        this.graph.edges.push({
            id:obj.id,
            src:{id:obj.src,port:null},
            tgt:{id:obj.tgt,port:null}
        })
    }    
    getAnodes(){
        
    }
    getEdgesFrom(){
        
    }
    getEdgesTo(){
        
    }    
}

class Anode {
    constructor(svgContext, id) {
        this.id = id
        this.$anode = svgContext.anode(160, 80,"#FF0000")        
    }
    hello() {
        console.log('Hello ' + this.id + '!')
    }
    connect(){
        
    }
}

class Edge {
    constructor(svgContext, id, src, tgt) {
        this.id = id
        this.src = src || null
        this.tgt = tgt || null
    }
}

var anodeGraph=new AnodeGraph('grääf')
var anode1=new Anode(root,'pedddpe')
var edge1=new Edge(root,'connu1','ano1','ano2')

anodeGraph.addAnode(anode1)
anodeGraph.addEdge(edge1)
anode1.hello()
anodeGraph.hello()
console.log(anode1.$anode)