Skip to content

Instantly share code, notes, and snippets.

@acidsound

acidsound/fakeErwin.coffee

Last active August 29, 2015 13:57
Show Gist options
  • Save acidsound/9624644 to your computer and use it in GitHub Desktop.
Save acidsound/9624644 to your computer and use it in GitHub Desktop.
Download ZIP
d3 rect drag with link link
Raw
fakeErwin.coffee
@vis = null
Meteor.startup ->
@vis = d3.select("svg")
.attr("width", 960)
.attr("height", 500)
@dragmove= (d,i)->
console.log d.x, d.y
_.extend Template.main,
rendered:->
drawEntity = (rect)->
x = rect.x
y = rect.y
width = rect.width
height = rect.height
v = rect.v
vis.append("g").append("rect")
.attr("id", "box#{v}")
.attr("x", x)
.attr("y", y)
.attr("width", width)
.attr("height", height)
.attr("stroke", "#000000")
.attr("stroke-width", 1)
.attr("fill", "#fff")
.attr("cursor", "default")
.call(d3.behavior.drag().on("drag", (d)->
d3.select(@).style "fill", "#855"
d3.select(@).attr("x", parseFloat(d3.select(@).attr("x")) + d3.event.dx)
d3.select(@).attr("y", parseFloat(d3.select(@).attr("y")) + d3.event.dy)
if d3.select("[data-source=#{@id}]")[0][0]
d3.select("[data-source=#{@id}]").attr("stroke", "#008")
d3.select("[data-source=#{@id}]").attr("x1", parseFloat(d3.select("[data-source=#{@id}]").attr("x1")) + d3.event.dx)
d3.select("[data-source=#{@id}]").attr("y1", parseFloat(d3.select("[data-source=#{@id}]").attr("y1")) + d3.event.dy)
if d3.select("[data-dest=#{@id}]")[0][0]
d3.select("[data-dest=#{@id}]").attr("stroke", "#008")
d3.select("[data-dest=#{@id}]").attr("x2", parseFloat(d3.select("[data-dest=#{@id}]").attr("x2")) + d3.event.dx)
d3.select("[data-dest=#{@id}]").attr("y2", parseFloat(d3.select("[data-dest=#{@id}]").attr("y2")) + d3.event.dy)
d3.select(@).attr("cursor", "move")
).on("dragend", ->
if d3.select("[data-source=#{@id}]")[0][0]
d3.select("[data-source=#{@id}]").attr("stroke", "#800")
d3.select("[data-dest=#{@id}]").attr("stroke", "#800")
d3.select(@).style "fill", "#fff"
d3.select(@).attr("cursor", "default")
))
Entities = (v: k, x: Math.random()*900, y: Math.random()*300, width: Math.random()*100+50, height: Math.random()*100+50 for k in [1..10])
Entities.reduce (v1, v2)->
vis.append("g").append("line")
.attr("id", "line#{v2}")
.attr("data-source", "box#{v1.v}")
.attr("data-dest", "box#{v2.v}")
.attr("x1", v1.x + v1.width/2)
.attr("y1", v1.y + v1.height/2)
.attr("x2", v2.x + v2.width/2)
.attr("y2", v2.y + v2.height/2)
.attr("stroke", "#800")
.attr("stroke-width", 1)
.attr("class", "link")
v2
drawEntity v for v in Entities
Raw
fakeErwin.html
<head>
<title>erwinz</title>
</head>
<body>
{{> main}}
</body>
<template name="main">
<h1>Fake Erwin</h1>
<svg>
</svg>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment