@shawcx/avispa 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2023 Matthew Shaw
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+Avispa
+======
+
+Javascript Graph Layout and Interaction
+
+Avispa (spanish for wasp) is a visualization framework. It is intended to be a
+general purpose Javascript library for rendering graphs.
+
+Depends on jQuery, Underscore.js, and Backbone.js
+
+Demo at [http://shawcx.github.io/avispa/](http://shawcx.github.io/avispa/)

package/css/Avispa.css

@@ -0,0 +1,57 @@
+g.group rect {
+  cursor: pointer;
+  fill: #fff;
+  opacity: 0.75;
+  stroke: #999;
+  stroke-width: 1px;
+}
+g.group rect.hover {
+  stroke: #333;
+  stroke-width: 2px;
+}
+g.group text {
+  cursor: pointer;
+  font: bold 8pt "Andale Mono", AndaleMono, monospace;
+  fill: #000;
+  text-anchor: left;
+}
+
+g.node circle {
+  cursor: pointer;
+  fill: #fff;
+  stroke: #999;
+  stroke-width: 1px;
+}
+g.node circle:hover {
+  stroke: #333;
+  stroke-width: 2px;
+}
+g.node text {
+  cursor: pointer;
+  font: bold 8pt "Andale Mono", AndaleMono, monospace;
+  fill: #000;
+  text-anchor: middle;
+}
+
+g.link line {
+  fill: none;
+  stroke: #666;
+  stroke-width: 3px;
+  stroke-linecap: round;
+}
+g.link path {
+  fill: none;
+  stroke: #999;
+  stroke-width: 3px;
+  stroke-linecap: round;
+  cursor: pointer;
+  stroke-dasharray: 8, 4;
+}
+g.link text {
+  font: bold 6pt "Andale Mono", AndaleMono, monospace;
+  fill: #666;
+  cursor: pointer;
+  text-anchor: middle;
+}
+
+/*# sourceMappingURL=Avispa.css.map */

package/css/Avispa.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/Avispa.scss"],"names":[],"mappings":"AAMI;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"Avispa.css"}

package/js/Avispa.js

@@ -0,0 +1,230 @@
+'use strict'
+
+const _        = require('underscore')
+const Backbone = require('backbone')
+
+const { Position }          = require('./Types.js')
+const { cancelEvent, $SVG } = require('./Utils.js')
+
+const context      = require('./Context.js')
+const Group        = require('./Group.js')
+const Node         = require('./Node.js')
+const Link         = require('./Link.js')
+
+let normalizeWheel = function(event) {
+    if (event.wheelDelta) {
+        return event.wheelDelta / 120
+    }
+    if (event.detail) {
+        return event.detail / -3
+    }
+    return 0
+}
+
+
+const $SVG = function(name) {
+    return $(document.createElementNS('http://www.w3.org/2000/svg', name))
+}
+
+
+class Avispa extends Backbone.View {
+    events() {
+        return {
+            'mousedown.avispa'      : 'OnMouseDown',
+            'mousemove.avispa'      : 'OnMouseMove',
+            'mouseup.avispa'        : 'OnMouseUp',
+            'mousewheel.avispa'     : 'OnMouseWheel',
+            'DOMMouseScroll.avispa' : 'OnMouseWheel',
+            'contextmenu.avispa'    : 'OnContextMenu',
+            }
+    }
+
+    initialize(options) {
+        context.a = this
+
+        _.bindAll(this, 'render',
+            'OnMouseDown', 'OnMouseMove', 'OnMouseUp', 'OnMouseWheel', 'OnContextMenu')
+
+        this.scale    = 1.0
+        this.links    = {}
+        this.offset   = null
+        this.dragItem = null
+        this.arrow    = null
+
+        this.position = {
+            x: 0,
+            y: 0
+            }
+
+        this.zoom = {
+            step : 0.125,
+            min  : 0.125,
+            max  : 2.5,
+            }
+
+        this.$parent  = this.$el.parent()
+
+        this.$pan     = this.$el.find('g.pan')
+        this.$zoom    = this.$el.find('g.zoom')
+
+        this.$groups  = this.$el.find('g.groups')
+        this.$links   = this.$el.find('g.links')
+        this.$objects = this.$el.find('g.objects')
+        this.$labels  = this.$el.find('g.labels')
+
+        this.$pan.x = parseInt(window.innerWidth  / 2)
+        this.$pan.y = parseInt(window.innerHeight / 2)
+
+        this.Pan(0,0)
+    }
+
+    Pan(dx, dy) {
+        this.$pan.x += dx
+        this.$pan.y += dy
+
+        this.$pan.attr('transform', `translate(${this.$pan.x}, ${this.$pan.y})`)
+        this.$parent.css('background-position', `${this.$pan.x}px ${this.$pan.y}px`)
+
+        return this
+    }
+
+    Scale(scale) {
+        this.scale = scale
+        this.$zoom.attr('transform', `scale(${scale})`)
+        return this
+    }
+
+    Zoom(delta) {
+        let scale = (delta == 0) ? 1.0 : this.scale + delta * this.zoom.step
+        if (scale >= this.zoom.min || scale <= this.zoom.max) {
+            this.Scale(scale)
+        }
+        return this
+    }
+
+    Point(event) {
+        // translates the client x,y into the surface x,y
+        let point = this.el.createSVGPoint()
+        point.x = event.clientX
+        point.y = event.clientY
+        point = point.matrixTransform(this.el.getScreenCTM().inverse())
+
+        // account for the current pan and scale
+        point.x = parseInt((point.x - this.$pan.x) / this.scale)
+        point.y = parseInt((point.y - this.$pan.y) / this.scale)
+
+        return [point.x, point.y]
+    }
+
+    OnMouseDown(event) {
+        if (this.arrow) {
+            this.arrow.Remove()
+            this.arrow = null
+            return cancelEvent(event)
+        }
+
+        switch (event.which) {
+            case 1:
+                this.LeftDown(event)
+                break
+            case 2:
+                this.MiddleDown(event)
+                break
+            case 3:
+                if (this.RightDown) {
+                    this.RightDown(event)
+                }
+                break
+        }
+
+        return cancelEvent(event)
+    }
+
+    LeftDown(event) {
+        //if event.shiftKey
+        this.offset = [event.clientX, event.clientY]
+    }
+
+    MiddleDown(event) {
+        this.Pan(-this.$pan.x + window.innerWidth / 2, -this.$pan.y + window.innerHeight / 2)
+        this.Zoom(0)
+        //this.$('#zoomslider').slider('option', 'value', 1)
+    }
+
+    OnMouseMove(event) {
+        // drag the entire scene around
+        if (this.offset) {
+            this.Pan(event.clientX - this.offset[0], event.clientY - this.offset[1])
+            this.offset = [event.clientX, event.clientY]
+        }
+        else if (this.arrow) {
+            this.arrow.Drag(event)
+        }
+        else if (this.dragItem) {
+            this.dragItem.jitter++
+            if (this.dragItem.Drag) {
+                this.dragItem.Drag(event)
+            }
+        }
+
+        return cancelEvent(event)
+    }
+
+    OnMouseUp(event) {
+        this.offset = null
+
+        if (this.dragItem) {
+            if (this.dragItem.jitter < 3) {
+                switch (event.which) {
+                    case 1:
+                        this.dragItem.LeftClick(event)
+                        break
+                    case 2:
+                        this.dragItem.MiddleClick(event)
+                        break
+                    case 3:
+                        this.dragItem.RightClick(event)
+                        break
+                }
+            }
+            else if(this.dragItem.MouseUp) {
+                this.dragItem.MouseUp(event)
+            }
+            this.dragItem = null
+        }
+        else {
+            switch (event.which) {
+                case 1:
+                    this.LeftClick(event)
+                    break
+                case 2:
+                    this.MiddleClick(event)
+                    break
+                case 3:
+                    this.RightClick(event)
+                    break
+            }
+        }
+
+        return cancelEvent(event)
+    }
+
+    OnMouseWheel(event) {
+        this.Zoom(normalizeWheel(event))
+        //this.$('#zoomslider').slider('option', 'value', this.scale)
+        return cancelEvent(event)
+    }
+
+    LeftClick(event) {}
+    MiddleClick(event) {}
+    RightClick(event) {}
+    OnContextMenu(event) {}
+}
+
+exports.Avispa      = Avispa
+exports.Position    = Position
+exports.Group       = Group
+exports.Node        = Node
+exports.Link        = Link
+exports.$SVG        = $SVG
+exports.cancelEvent = cancelEvent

package/js/BaseObject.js

@@ -0,0 +1,92 @@
+'use strict'
+
+const _        = require('underscore')
+const Backbone = require('backbone')
+
+const { cancelEvent } = require('./Utils.js')
+const context         = require('./Context.js')
+
+
+class BaseObject extends Backbone.View {
+    events() {
+        return {
+            'mousedown'   : 'OnMouseDown',
+            'mouseenter'  : 'OnMouseEnter',
+            'mouseleave'  : 'OnMouseLeave',
+            'mouseup'     : 'OnMouseUp',
+            'contextmenu' : 'OnContextMenu',
+            }
+    }
+
+    delegateEvents(events) {
+        super.delegateEvents(events)
+    }
+
+    initialize(options) {
+        _.bindAll(this, 'OnMouseDown', 'OnMouseUp', 'OnContextMenu', 'render')
+
+        this.parent   = options.parent
+        this.position = options.position
+        if (this.position) {
+            this.position.bind('change', this.render, this)
+        }
+
+        if (this.parent) {
+            this.offset = {
+                x: this.position.get('x'),
+                y: this.position.get('y'),
+                }
+            this.ParentDrag(this.parent.position)
+            this.parent.position.bind('change', this.ParentDrag, this)
+        }
+    }
+
+    size(w,h) {
+        this.position.set({w:w,h:h})
+        return this
+    }
+
+    ParentDrag(parentPosition) {
+        this.position.set({
+            x: this.offset.x + parentPosition.get('x'),
+            y: this.offset.y + parentPosition.get('y'),
+            })
+    }
+
+    OnMouseDown(event) {
+        this.jitter = 0
+
+        this.x1 = (event.clientX / context.a.scale) - this.position.get('x')
+        this.y1 = (event.clientY / context.a.scale) - this.position.get('y')
+
+        if (this.parent) {
+            this.ox1 = this.offset.x - this.position.get('x')
+            this.oy1 = this.offset.y - this.position.get('y')
+        }
+
+        // TODO: calculate the bounds of the parent element
+
+        if (event.shiftKey) {
+            this.$el.parent().append(this.$el)
+        }
+
+        context.a.dragItem = this
+
+        return cancelEvent(event)
+    }
+
+    Drag(event) {
+        let x = (event.clientX / context.a.scale) - this.x1
+        let y = (event.clientY / context.a.scale) - this.y1
+        this.position.set({x:x,y:y})
+        return cancelEvent(event)
+    }
+
+    OnMouseUp(event) {}
+    OnContextMenu(event) {}
+    LeftClick(event) {}
+    MiddleClick(event) {}
+    RightClick(event) {}
+}
+
+module.exports = BaseObject

package/js/Context.js

@@ -0,0 +1,7 @@
+'use strict'
+
+var context = {
+
+}
+
+module.exports = context

package/js/Group.js

@@ -0,0 +1,97 @@
+'use strict'
+
+const _        = require('underscore')
+const Backbone = require('backbone')
+
+const { cancelEvent, $SVG } = require('./Utils.js')
+const context               = require('./Context.js')
+const BaseObject            = require('./BaseObject.js')
+
+
+class Group extends BaseObject {
+    el() {
+        return $SVG('g').attr('class', 'group')
+    }
+
+    initialize(options) {
+        this.$rect = $SVG('rect')
+            .attr('width',  options.position.get('w'))
+            .attr('height', options.position.get('h'))
+            .css('fill', options.position.get('fill'))
+            .appendTo(this.$el)
+
+        super.initialize(options)
+    }
+
+    render() {
+        this.$rect
+            .attr('width',  this.position.get('w'))
+            .attr('height', this.position.get('h'))
+            .attr('x',      this.position.get('x'))
+            .attr('y',      this.position.get('y'))
+        return this
+    }
+
+    OnMouseEnter(event) {
+        if (!context.a.dragItem) {
+            this.$rect.attr('class', 'hover')
+        }
+        return cancelEvent(event)
+    }
+
+    OnMouseLeave(event) {
+        if (!context.a.dragItem) {
+            this.$rect.removeAttr('class')
+        }
+        return cancelEvent(event)
+    }
+
+    Drag(event) {
+        let x = (event.clientX / context.a.scale) - this.x1
+        let y = (event.clientY / context.a.scale) - this.y1
+
+        let newparentw = 0
+        let newparenth = 0
+
+        if (this.offset) {
+            this.offset.x = this.ox1 + x
+            this.offset.y = this.oy1 + y
+
+            let boundsx = this.parent.position.get('w') - this.position.get('w') - 10
+            let boundsy = this.parent.position.get('h') - this.position.get('h') - 10
+
+            if (this.offset.x < 10) {
+                this.offset.x = 10
+                x = this.parent.position.get('x') + 10
+            }
+            else if (this.offset.x > boundsx) {
+                //this.offset.x = boundsx
+                //x = this.parent.position.get('x') + boundsx
+                newparentw = this.offset.x - boundsx
+                x = this.offset.x //this.parent.position.get('x') + boundsx
+            }
+
+            if (this.offset.y < 30) {
+                this.offset.y = 30
+                y = this.parent.position.get('y') + 30
+            }
+            else if (this.offset.y > boundsy) {
+                //this.offset.y = boundsy
+                //y = this.parent.position.get('y') + boundsy
+                newparenth = this.offset.y - boundsy
+                y = this.offset.y //this.parent.position.get('x') + boundsx
+            }
+        }
+
+        this.position.set({x:x,y:y})
+        if (newparentw || newparenth) {
+            newparentw = this.parent.position.get('w') + newparentw
+            newparenth = this.parent.position.get('h') + newparenth
+            this.parent.Size(newparentw, newparenth)
+        }
+
+        return cancelEvent(event)
+    }
+}
+
+module.exports = Group

package/js/Link.js

@@ -0,0 +1,154 @@
+'use strict'
+
+const _        = require('underscore')
+const Backbone = require('backbone')
+
+const { cancelEvent, $SVG } = require('./Utils.js')
+const context               = require('./Context.js')
+
+
+class Link extends Backbone.View {
+    static RAD = 180.0 / Math.PI
+
+    el() {
+        return $SVG('g').attr('class', 'link')
+    }
+
+    events() {
+        return {
+            'mousedown'   : 'OnMouseDown',
+            'mouseenter'  : 'OnMouseEnter',
+            'mouseleave'  : 'OnMouseLeave',
+            'contextmenu' : 'OnContextMenu',
+            }
+    }
+
+    initialize(options) {
+        this.path = $SVG('path')
+            .css('marker-end', 'url(#Arrow)')
+            .css('opacity', '0.5')
+            .appendTo(this.$el)
+
+        _.bindAll(this, 'render', 'OnMouseDown', 'OnMouseEnter', 'OnMouseLeave', 'OnContextMenu')
+
+        this.arc = new Backbone.Model({arc:10})
+        this.arc.bind('change', this.render, this)
+
+        this.left  = options.left
+        this.right = options.right
+        this.left.position.bind('change', this.render, this)
+        this.right.position.bind('change', this.render, this)
+
+        this.render()
+
+        if (options.parent) {
+            options.parent.$links.append(this.$el)
+        }
+    }
+
+    update() {
+        //this.label.text(name)
+        return
+    }
+
+    render() {
+        if (!this.arc) { return this }
+
+        let arc = this.arc.get('arc')
+        let lx = this.left.position.get('x')
+        let ly = this.left.position.get('y')
+        let rx = this.right.position.get('x')
+        let ry = this.right.position.get('y')
+
+        // calculate the angle between 2 nodes
+        let ang = Math.atan2(rx - lx, ry - ly)
+
+        // bound the offset to about half the circle
+        let offset = Math.max(-1.5, Math.min(1.5, arc / 100))
+
+        // draw to the edge of the node
+        lx +=  30 * Math.sin(ang + offset)
+        ly +=  30 * Math.cos(ang + offset)
+        rx += -33 * Math.sin(ang - offset)
+        ry += -33 * Math.cos(ang - offset)
+
+        // calculate the the position for the quadratic bezier curve
+        let xc = ((lx + rx) >> 1) + arc * Math.cos(ang)
+        let yc = ((ly + ry) >> 1) - arc * Math.sin(ang)
+
+        let mx = xc - (arc>>1) * Math.cos(ang)
+        let my = yc + (arc>>1) * Math.sin(ang)
+
+        let rot = -(this.RAD * ang)
+        rot += (rot > 0 && rot < 180) ? -90 : 90
+
+        this.path.attr('d', "M #{lx} #{ly} Q #{xc} #{yc} #{rx} #{ry}")
+        //this.label.attr('x', mx).attr('y', my).attr('transform', "rotate(#{rot}, #{mx} #{my})")
+
+        return this
+    }
+
+// Events
+
+    Drag(event) {
+        let [x,y] = context.a.Point(event)
+
+        let from_x = this.left.position.get('x')
+        let from_y = this.left.position.get('y')
+        let to_x   = this.right.position.get('x')
+        let to_y   = this.right.position.get('y')
+
+        let d = (to_x - from_x) * (y - from_y) - (to_y - from_y) * (x - from_x)
+
+        if (d) {
+            d = Math.pow(Math.abs(d), 0.5) * (d > 0) ? -1 : 1
+        }
+
+        if (!this.od && this.od != 0) {
+            this.od = d
+        }
+
+        // will trigger a call to render
+        this.arc.set('arc', Math.max(0, this.oarc + d - this.od))
+    }
+
+    OnMouseDown(event) {
+        this.jitter = 0
+
+        context.a.dragItem = this
+        this.oarc = this.arc.get('arc')
+        this.od = null
+
+        return cancelEvent(event)
+    }
+
+    MouseUp(event) {
+        if (this.jitter > 3) {
+            this.path.css('stroke-width', '3px')
+        }
+    }
+
+    OnMouseEnter() {
+        if (!context.a.dragItem) {
+            this.path.css('stroke-width', '6px')
+        }
+    }
+
+    OnMouseLeave() {
+        if (!context.a.dragItem) {
+            this.path.css('stroke-width', '3px')
+        }
+    }
+
+    LeftClick(event) {
+        if (event.shiftKey) {
+            this.arc.set('arc', 0)
+        }
+    }
+
+    OnContextMenu(event) {
+    }
+}
+
+module.exports = Link
+

package/js/Node.js

@@ -0,0 +1,90 @@
+'use strict'
+
+const _        = require('underscore')
+const Backbone = require('backbone')
+
+const { cancelEvent, $SVG } = require('./Utils.js')
+const context               = require('./Context.js')
+const BaseObject            = require('./BaseObject.js')
+
+
+class Node extends BaseObject {
+    el() {
+        return $SVG('g').attr('class', 'node')
+    }
+
+    initialize(options) {
+        _.bindAll(this, 'OnMouseDown', 'OnMouseUp', 'OnContextMenu', 'render')
+
+        this.$circle = $SVG('circle')
+            .attr('r', options.position.get('radius'))
+            .css('fill', options.position.get('fill'))
+            .appendTo(this.$el)
+
+        this.$label = $SVG('text')
+            .attr('dy', '0.5em')
+            .text(options.label)
+            .appendTo(this.$el)
+
+        super.initialize(options)
+
+        this.render()
+    }
+
+    render() {
+        this.$circle
+            .attr('cx', this.position.get('x'))
+            .attr('cy', this.position.get('y'))
+        this.$label
+            .attr('x', this.position.get('x'))
+            .attr('y', this.position.get('y'))
+        return this
+    }
+
+    OnMouseEnter(event) {
+        if (!context.a.dragItem) {
+            this.$circle.attr('class', 'hover')
+        }
+        return cancelEvent(event)
+    }
+
+    OnMouseLeave(event) {
+        if (!context.a.dragItem) {
+            this.$circle.removeAttr('class')
+        }
+        return cancelEvent(event)
+    }
+
+    Drag(event) {
+        let x = (event.clientX / context.a.scale) - this.x1
+        let y = (event.clientY / context.a.scale) - this.y1
+
+        if (this.offset) {
+            this.offset.x = this.ox1 + x
+            this.offset.y = this.oy1 + y
+
+            if (this.offset.x < 0) {
+                this.offset.x = 0
+                x = this.parent.position.get('x')
+            }
+            else if (this.offset.x > this.parent.position.get('w')) {
+                this.offset.x = this.parent.position.get('w')
+                x = this.parent.position.get('x') + this.parent.position.get('w')
+            }
+            if (this.offset.y < 0) {
+                this.offset.y = 0
+                y = this.parent.position.get('y')
+            }
+            else if (this.offset.y > this.parent.position.get('h')) {
+                this.offset.y = this.parent.position.get('h')
+                y = this.parent.position.get('y') + this.parent.position.get('h')
+            }
+        }
+
+        this.position.set({x:x,y:y})
+
+        return cancelEvent(event)
+    }
+}
+
+module.exports = Node

package/js/Types.js

@@ -0,0 +1,9 @@
+'use strict'
+
+const Backbone = require('backbone')
+
+class Position extends Backbone.Model {}
+class Arc extends Backbone.Model {}
+
+exports.Position = Position
+exports.Arc      = Arc

package/js/Utils.js

@@ -0,0 +1,16 @@
+'use strict'
+
+const $ = require('jquery')
+
+
+exports.cancelEvent = function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    return false
+}
+
+exports.normalizeWheel = function(event) {
+    if (event.wheelDelta) return event.wheelDelta / 120
+    if (event.detail)     return event.detail     /  -3
+    return 0
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@shawcx/avispa",
+  "version": "1.0.0",
+  "description": "SVG + Websockets",
+  "main": "js/Avispa.js",
+  "sass": "scss/Avispa.scss",
+  "style": "css/Avispa.css",
+  "scripts": {
+    "build": "npx sass scss/Avispa.scss css/Avispa.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shawcx/avispa.git"
+  },
+  "author": "Matthew Shaw",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/shawcx/avispa/issues"
+  },
+  "homepage": "https://github.com/shawcx/avispa#readme",
+  "dependencies": {
+    "backbone": "^1.4.1",
+    "jquery": "^3.6.3",
+    "underscore": "^1.13.6"
+  },
+  "devDependencies": {
+    "sass": "^1.58.2"
+  }
+}

package/scss/Avispa.scss

@@ -0,0 +1,73 @@
+
+$mono: "Andale Mono", AndaleMono, monospace;
+
+g.group {
+    //TODO: elements .user-select();
+
+    rect {
+        cursor: pointer;
+        fill: #fff;
+        opacity: 0.75;
+        stroke: #999;
+        stroke-width: 1px;
+    }
+
+    rect.hover {
+        stroke: #333;
+        stroke-width: 2px;
+    }
+
+    text {
+        cursor: pointer;
+        font: bold 8pt $mono;
+        fill: #000;
+        text-anchor: left;
+    }
+}
+
+g.node {
+    circle {
+        cursor: pointer;
+        fill: #fff;
+        stroke: #999;
+        stroke-width: 1px;
+    }
+
+    circle:hover {
+        stroke: #333;
+        stroke-width: 2px;
+    }
+
+    text {
+        cursor: pointer;
+        font: bold 8pt $mono;
+        fill: #000;
+        text-anchor: middle;
+    }
+}
+
+g.link {
+    line {
+        fill: none;
+        stroke: #666;
+        stroke-width: 3px;
+        stroke-linecap: round;
+    }
+
+    path {
+        fill: none;
+        //opacity: 0.5;
+        stroke: #999;
+        stroke-width: 3px;
+        stroke-linecap: round;
+        cursor: pointer;
+        stroke-dasharray: 8,4;
+    }
+
+    text {
+        font: bold 6pt $mono;
+        fill: #666;
+        cursor: pointer;
+        text-anchor: middle;
+    }
+}