Skip to content

Instantly share code, notes, and snippets.

@ariutta

ariutta/index.html

Created March 2, 2014 05:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ariutta/9302360 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ariutta/9302360 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body {
font: 10px sans-serif;
}
/*
.drag-handle {
fill: transparent;
fill-opacity: 1;
stroke: transparent;
stroke-width: 0;
}
*/
.drag-handle {
fill: transparent;
stroke: transparent;
stroke-width: 10px;
}
.drag-handle:hover {
fill: transparent;
stroke: transparent;
stroke-width: 15px;
}
.grab {
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
</style>
<body>
<div id="diagram"></div>
<p>
Input:
</p>
<p id="input">
</p>
<p>
Output:
</p>
<p id="output">
</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
'use strict';
var dragging = false;
var diagramData = {"viewport":[{"height":21,"id":"fbf","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":128.74774509060222,"y":125.66666666666669},{"height":21,"id":"b69","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":51.49997456868482,"x":348.0000254313152,"y":150.5},{"height":21,"id":"e28","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":396.1666666666667,"y":184.66666666666666},{"height":21,"id":"d4e","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":664,"y":141.83333333333334},{"height":21,"id":"cc2","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":159.16666666666666,"y":315.3333333333333},{"height":21,"id":"b8d","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":446,"y":317.8333333333333},{"height":21,"id":"e9a","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":287.5000254313151,"y":314.8333333333333},{"height":21,"id":"d70","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":358.99999999999994,"y":343.4833272298177},{"height":21,"id":"daf","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":207.33333333333334,"y":397.9833272298177},{"height":21,"id":"f52","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":281.33333333333303,"y":435.83333333333314},{"height":21,"id":"cb6","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":303.33333333333354,"y":493.5},{"height":21,"id":"a40","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":305.33333333333354,"y":605.3333333333334},{"height":21,"id":"a69","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":525.1666666666669,"y":447.1666666666669},{"height":21,"id":"a7f","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":468.16666666666674,"y":536},{"height":21,"id":"ab1","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61.00000000000008,"x":630.6666666666666,"y":422.83333333333354},{"height":21,"id":"e7e","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61.00000000000008,"x":630.6666666666666,"y":402.83333333333354},{"height":21,"id":"a92","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":690.6666666666666,"y":402.83333333333354},{"height":21,"id":"aa0","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61.00000000000008,"x":690.6666666666666,"y":422.83333333333354},{"height":21,"id":"ba4","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":525.1666666666669,"y":427.1666666666669},{"height":20,"id":"a2a","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":94.33333333333333,"x":268.3333435058594,"y":218.49999491373697},{"height":20,"id":"e91","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":70.16666666666663,"x":280.83333333333337,"y":104.33333333333333},{"height":20,"id":"e98","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":69.33333333333333,"x":197.16666666666669,"y":623.6666666666666},{"height":21,"id":"cb32b","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":66,"x":50.24774572638509,"y":71},{"height":21,"id":"bfc36","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":46,"x":127,"y":94},{"height":21,"id":"ba1b2","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":86,"x":470,"y":218},{"height":21,"id":"e00d0","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":56,"x":410.5,"y":113.5},{"height":21,"id":"aceb7","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":75.5,"x":559,"y":194},{"height":21,"id":"fc934","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":81,"x":654.5,"y":218},{"height":21,"id":"ef70b","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":33.016666666666666,"x":134.48333333333335,"y":361.48333333333335},{"height":21,"id":"cea19","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":33.016666666666666,"x":298.99167989095054,"y":361.48333333333335},{"height":21,"id":"b20a2","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":33.016666666666666,"x":414.48333333333335,"y":382.48333333333335},{"height":21,"id":"d8ba4","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":33.016666666666666,"x":385.98333333333335,"y":446.48333333333335},{"height":21,"id":"bb1eb","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":125.33333333333348,"y":554.9999999999997},{"height":21,"id":"a658e","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":125.33333333333348,"y":574.9999999999997},{"height":21,"id":"a8000","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":413.1666666666668,"y":605.333333333334},{"height":20,"id":"a2188","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":69.33333333333333,"x":508.6666666666667,"y":621.6666666666666},{"height":21,"id":"ccc26","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61.00000000000008,"x":630.6666666666666,"y":442.83333333333354},{"height":21,"id":"ae20e","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61.00000000000008,"x":690.6666666666666,"y":442.83333333333354},{"height":21,"id":"fdc15","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":50,"x":572.25,"y":314},{"height":21,"id":"b209b","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":47,"x":582.5,"y":95.5},{"height":21,"id":"d7db1","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":69,"x":48.74774572638509,"y":174},{"height":21,"id":"a2c50","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":68,"x":127,"y":218},{"height":21,"id":"e9de6","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":51.75225427361491,"x":40.24774572638509,"y":245},{"height":21,"id":"d8c9e","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":44,"x":202,"y":181},{"height":21,"id":"a47e8","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":54.75,"x":497.75,"y":113.75},{"height":21,"id":"f1bbc","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":103,"x":430.5,"y":75.5},{"height":21,"id":"ea69f","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":50,"x":572.25,"y":294},{"height":20,"id":"d2a61","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":69.33333333333333,"x":359.1666666666667,"y":541.1666666666666},{"height":21,"id":"bbbff","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":61,"x":525.1666666666669,"y":467.16666666666697},{"height":21,"id":"d07b8","renderableType":"node","style":"stroke: #0000ff; fill:#ffffff;","width":81,"x":556,"y":519},{"height":21,"id":"a990e","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":81,"x":348.17550402772156,"y":665.7912447684622},{"height":21,"id":"d71f9","renderableType":"node","style":"stroke: #000000; fill:#ffffff;","width":81,"x":348.17550402772156,"y":685.7912447684621},{"id":"b5913","renderableType":"edge","hasAnchoredDependencies":["c1688"],"anchors":[{"id":"a2c25","position":"0.532258064516129"}],"points":[{"x":82.74774572638509,"y":91},{"x":82.74774572638509,"y":174}],"style":"stroke: #008040;"},{"id":"b1c07","renderableType":"edge","points":[{"x":127,"y":104},{"x":109.70007311442089,"y":135.46407922232476,"anchor":"ebe5a","element":"c1688"}],"style":"stroke: #ff0000;"},{"id":"f6437","renderableType":"edge","hasAnchoredDependencies":["id4aefea78"],"anchors":[{"id":"a4d13","position":"0.6010452755119678"}],"points":[{"x":315.000010172526,"y":218.49999491373697},{"x":315.4166666666667,"y":123.33333333333333}],"style":"stroke: #008040;"},{"id":"d65e1","renderableType":"edge","hasAnchoredDependencies":["id561097a3"],"anchors":[{"id":"c907c","position":"0.5984615016237494"}],"points":[{"x":361.66667683919263,"y":227.99999491373697},{"x":470,"y":228}],"style":"stroke: #008040;"},{"id":"f3edf","renderableType":"edge","hasAnchoredDependencies":["id740045bc"],"anchors":[{"id":"e76f1","position":"0.5095694152942244"}],"points":[{"x":465.5,"y":123.5},{"x":497.75,"y":123.75}],"style":"stroke: #008040;"},{"id":"d870f","renderableType":"edge","hasAnchoredDependencies":["idb248dd5c","id52ac424a","idb3964d3f"],"anchors":[{"id":"edbc5","position":"0.4"}],"points":[{"x":605.5,"y":115.5},{"x":674.5,"y":218}],"style":"stroke: #008040;"},{"id":"b61b3","renderableType":"edge","points":[{"x":315.00001322428386,"y":361.48333333333335},{"x":315.000010172526,"y":237.49999491373697}],"style":"stroke: #008040;"},{"id":"e011c","renderableType":"edge","points":[{"x":150.49166666666667,"y":361.48333333333335},{"x":291.6666768391927,"y":237.49999491373697}],"style":"stroke: #008000;"},{"id":"bb407","renderableType":"edge","hasAnchoredDependencies":["idb92332b0"],"anchors":[{"id":"ec3e3","position":"0.46638477808330747"}],"points":[{"x":298.99167989095054,"y":371.48333333333335},{"x":166.5,"y":371.48333333333335}],"style":"stroke: #008000;"},{"id":"b2711","renderableType":"edge","hasAnchoredDependencies":["id3adcd55e"],"anchors":[{"id":"d552e","position":"0.4"}],"points":[{"x":414.48333333333335,"y":392.48333333333335},{"x":331.0083465576172,"y":371.48333333333335}],"style":"stroke: #008000;"},{"id":"d0da5","renderableType":"edge","hasAnchoredDependencies":["id54146f13"],"anchors":[{"id":"f7c1d","position":"0.4"}],"points":[{"x":393.9875,"y":446.48333333333335},{"x":323.0041798909505,"y":381.48333333333335}],"style":"stroke: #008000;"},{"id":"e790f","renderableType":"edge","points":[{"x":422.4875,"y":402.48333333333335},{"x":409.99583333333334,"y":446.48333333333335}],"style":"stroke: #008000;"},{"id":"ba6c7","renderableType":"edge","hasAnchoredDependencies":["id64bad4e5"],"anchors":[{"id":"f13ee","position":"0.701099450276439"}],"points":[{"x":556,"y":529},{"x":409.99583333333334,"y":466.48333333333335}],"style":"stroke: #008000;"},{"id":"a82d3","renderableType":"edge","hasAnchoredDependencies":["id7a2680f1"],"anchors":[{"id":"b11b2","position":"0.4"}],"points":[{"x":418,"y":456.48333333333335},{"x":556,"y":529}],"style":"stroke: #008000;"},{"id":"c1688","renderableType":"edge","hasAnchoredDependencies":["b1c07"],"anchors":[{"id":"ebe5a","position":"0.41407983129230874"}],"points":[{"x":128.74774509060222,"y":135.66666666666669},{"x":82.74774572638509,"y":135.17741935483872,"anchor":"a2c25","element":"b5913"}],"style":"stroke: #000000;"},{"id":"b4769","renderableType":"edge","points":[{"x":350.33333333333354,"y":605.3333333333334},{"x":376.25000000000006,"y":560.1666666666666}],"style":"stroke: #000000;"},{"id":"id6a4e25b5","renderableType":"edge","points":[{"x":433,"y":604.75},{"x":393.33333333333337,"y":560.1666666666666}],"style":"stroke: #000000;"},{"id":"id2abec5f6","renderableType":"edge","hasAnchoredDependencies":["id208b4fc4"],"anchors":[{"id":"aebc6","position":"0.49763813984634164"}],"points":[{"x":393.33333333333337,"y":541.1666666666666},{"x":393.9875,"y":466.48333333333335}],"style":"stroke: #006600;"},{"id":"id129bdce0","renderableType":"edge","points":[{"x":418,"y":456.48333333333335},{"x":338.3333435058593,"y":237.49999491373697}],"style":"stroke: #006600;"},{"id":"idba67fe43","renderableType":"edge","hasAnchoredDependencies":["id5e009fa2"],"anchors":[{"id":"fef65","position":"0.4929575239801747"}],"points":[{"x":82.74774572638509,"y":194},{"x":127,"y":228}],"style":"stroke: #006600;"},{"id":"id5e009fa2","renderableType":"edge","points":[{"x":78.31193643159628,"y":245},{"x":96.86430236148772,"y":219.71972515639618,"anchor":"fef65","element":"idba67fe43"}],"style":"stroke: #000000;"},{"id":"ide4c980d3","renderableType":"edge","hasAnchoredDependencies":["idb782318c"],"anchors":[{"id":"f144f","position":"0.4"}],"points":[{"x":194,"y":228},{"x":268.3333435058594,"y":227.99999491373697}],"style":"stroke: #006600;"},{"id":"idb782318c","renderableType":"edge","points":[{"x":223.5,"y":201},{"x":223.73333740234375,"y":227.9999979654948,"anchor":"f144f","element":"ide4c980d3"}],"style":"stroke: #000000;"},{"id":"id4aefea78","renderableType":"edge","points":[{"x":348.0000254313152,"y":160.5},{"x":315.25043958984065,"y":161.30052258458906,"anchor":"a4d13","element":"f6437"}],"style":"stroke: #000000;"},{"id":"id561097a3","renderableType":"edge","points":[{"x":426.1666666666667,"y":204.66666666666666},{"x":426.5000000939003,"y":227.9999979576696,"anchor":"c907c","element":"d65e1"}],"style":"stroke: #000000;"},{"id":"id740045bc","renderableType":"edge","points":[{"x":481.5,"y":95.5},{"x":481.93361364323874,"y":123.62739235382355,"anchor":"e76f1","element":"f3edf"}],"style":"stroke: #000000;"},{"id":"idb248dd5c","renderableType":"edge","points":[{"x":664,"y":151.83333333333334},{"x":633.1,"y":156.5,"anchor":"edbc5","element":"d870f"}],"style":"stroke: #000000;"},{"id":"id52ac424a","renderableType":"edge","points":[{"x":538.0625,"y":133.75},{"x":633.1,"y":156.5,"anchor":"edbc5","element":"d870f"}],"style":"stroke: #006633;"},{"id":"idb3964d3f","renderableType":"edge","points":[{"x":633.1,"y":156.5,"anchor":"edbc5","element":"d870f"},{"x":614.875,"y":194}],"style":"stroke: #006633;"},{"id":"id208b4fc4","renderableType":"edge","points":[{"x":363.33333333333354,"y":503.5},{"x":393.6588716164828,"y":504.0013915891424,"anchor":"aebc6","element":"id2abec5f6"}],"style":"stroke: #000000;"},{"id":"id54146f13","renderableType":"edge","points":[{"x":341.33333333333303,"y":445.83333333333314},{"x":365.5941719563802,"y":420.48333333333335,"anchor":"f7c1d","element":"d0da5"}],"style":"stroke: #000000;"},{"id":"id3adcd55e","renderableType":"edge","points":[{"x":388.99999999999994,"y":363.4833272298177},{"x":381.09333862304686,"y":384.08333333333337,"anchor":"d552e","element":"b2711"}],"style":"stroke: #000000;"},{"id":"idb92332b0","renderableType":"edge","points":[{"x":237.33333333333337,"y":397.9833272298177},{"x":237.19957716712497,"y":371.48333333333335,"anchor":"ec3e3","element":"bb407"}],"style":"stroke: #006633;"},{"id":"id7a2680f1","renderableType":"edge","points":[{"x":513.1666666666669,"y":457.16666666666697},{"x":473.2,"y":485.49,"anchor":"b11b2","element":"a82d3"}],"style":"stroke: #000000;"},{"id":"id64bad4e5","renderableType":"edge","points":[{"x":468.16666666666674,"y":546},{"x":439.6880504456605,"y":505.82823846118526,"anchor":"f13ee","element":"ba6c7"}],"style":"stroke: #000000;"},{"id":"id3ee32f14","renderableType":"edge","points":[{"x":388.17550402772156,"y":657.7912447684621},{"x":350.33333333333354,"y":625.3333333333334}],"style":"stroke: #000000;"},{"id":"id3976b167-9266-4125-8c83-739b1b86f34a","renderableType":"edge","points":[{"x":555,"y":228},{"x":596.75,"y":282}],"style":"stroke: #000000;"},{"id":"ida81c40a5-026e-4e39-a9a6-694b8533f105","renderableType":"edge","points":[{"x":214.25,"y":623.6666666666666},{"x":193.33333333333348,"y":574.9999999999997}],"style":"stroke: #000000;"},{"id":"id834a20bc-e8fc-44d4-8b60-6913b1dd1465","renderableType":"edge","points":[{"x":508.66666666666674,"y":631.1666666666666},{"x":458.1666666666668,"y":625.333333333334}],"style":"stroke: #000000;"},{"id":"d9a19","renderableType":"edge","points":[{"x":388.17550402772156,"y":657.7912447684621},{"x":428.1666666666668,"y":625.333333333334}],"style":"stroke: #000000;"},{"id":"d6e4f","renderableType":"edge","points":[{"x":596.25,"y":214},{"x":596.75,"y":282}],"style":"stroke: #000000;"},{"id":"cd80c","renderableType":"edge","points":[{"x":654.5,"y":228},{"x":596.75,"y":282}],"style":"stroke: #000000;"}]};
var inputJsonString = JSON.stringify(diagramData);
d3.select('#input').text(inputJsonString);
var dragSegment, selectedPoint, selectedEdge, selectedEdgeElement, dragPointX, dragPointY;
var getDragSegment = function(d, selectedDragHandleIdentity) {
selectedEdge = d3.select('#' + d.id);
selectedEdgeElement = selectedEdge[0][0];
var numberOfItems = selectedEdgeElement.pathSegList.numberOfItems;
if (selectedDragHandleIdentity === 'target') {
selectedPoint = d.points[d.points.length - 1];
dragSegment = selectedEdgeElement.pathSegList.getItem(numberOfItems - 1);
}
else {
selectedPoint = d.points[0];
dragSegment = selectedEdgeElement.pathSegList.getItem(0);
}
};
var drag = d3.behavior.drag()
.on("dragstart", function(d) {
dragging = true;
dragPointX = d3.event.sourceEvent.x;
dragPointY = d3.event.sourceEvent.y;
})
.on("drag", dragmove)
.on("dragend", function(d) {
dragging = false;
selectedEdge.attr('d', function(d) {
return calculatePathData(d).d;
});
diagramData.viewport = d3.select('#viewport').datum();
var outputJsonString = JSON.stringify(diagramData);
d3.select('#output').text(outputJsonString);
d3.select('svg').attr('class',null);
init();
});
function updateEdgeData(edgeElement, d) {
var edgeElementLength = edgeElement.getTotalLength(),
//edgeElementLength = edgeElement.getTotalLength() - 185.9791717529297,
anchorPoint,
anchorPoints = {},
elementToUpdate,
pointsToUpdate,
pointToUpdate;
if (d.hasOwnProperty('anchors')) {
d.anchors.forEach(function(anchor) {
anchorPoints[anchor.id] = edgeElement.getPointAtLength(edgeElementLength * anchor.position);
});
d.hasAnchoredDependencies.forEach(function(elementId) {
elementToUpdate = diagramData.viewport.filter(function(element) {
return element.id === elementId;
})[0];
pointsToUpdate = elementToUpdate.points.filter(function(point) {
return point.hasOwnProperty('anchor');
});
pointsToUpdate.forEach(function(pointToUpdate) {
anchorPoint = anchorPoints[pointToUpdate.anchor];
if (!!anchorPoint) {
pointToUpdate.x = anchorPoint.x;
pointToUpdate.y = anchorPoint.y;
}
});
var nextEdge = d3.select('#' + elementId);
var nextEdgeElement = nextEdge[0][0];
updateEdgeData(nextEdgeElement, elementToUpdate);
});
}
update();
}
function dragmove(d) {
dragPointX = d3.event.x;
dragPointY = d3.event.y;
dragSegment.x = dragPointX;
dragSegment.y = dragPointY;
selectedPoint.x = dragPointX;
selectedPoint.y = dragPointY;
diagramData.viewport = d3.select('#viewport').datum();
updateEdgeData(selectedEdgeElement, d);
}
var svg = d3.select('#diagram').append('svg')
.attr('width', 900)
.attr('height', 900)
.attr('style', 'border:1px solid black');
var viewport = svg.selectAll('#viewport')
.data([diagramData.viewport])
.enter()
.append('g')
.attr('id', 'viewport');
var calculatePathData = function(d) {
var d,
firstPathSegString,
pathData = {};
if (d.hasOwnProperty('points')) {
d.points.map(function(point, index) {
var targetEdge, targetEdgeElement, targetEdgeElementLength, anchor, anchorPoint;
if (!point.hasOwnProperty('x')) {
targetEdge = d3.select('#' + point.element);
targetEdgeElement = targetEdge[0][0];
targetEdgeElementLength = targetEdgeElement.getTotalLength();
anchor = targetEdge.datum().anchors.filter(function(anchor) {return anchor.id === point.anchor;})[0];
anchorPoint = targetEdgeElement.getPointAtLength(targetEdgeElementLength * anchor.position);
point.x = anchorPoint.x;
point.y = anchorPoint.y;
}
if (index > 0) {
d += ' L ' + point.x + ' ' + point.y;
}
else {
d = firstPathSegString = 'M ' + point.x + ' ' + point.y;
}
});
}
pathData.d = d;
pathData.firstPathSegString = firstPathSegString;
return pathData;
};
var update = function(callback){
var renderableTypeToSvgElementMappings = {
'node':'rect',
'edge':'path'
};
var elements = viewport.selectAll('.element')
.data(function(d) {
return d;
})
.attr('id', function(d) {
return d.id;
})
.attr('class', function(d) {
var cssClassString = 'element ' + d.renderableType;
return cssClassString;
});
elements.enter()
.append(function(d) {
var childElementName = renderableTypeToSvgElementMappings[d.renderableType];
var child = document.createElementNS('http://www.w3.org/2000/svg', childElementName);
return child;
})
.attr('id', function(d) {
return d.id;
})
.attr('class', function(d) {
var cssClassString = 'element ' + d.renderableType;
return cssClassString;
});
elements.attr({
style: function(d) { return d.style; },
x: function(d) { return d.x; },
y: function(d) { return d.y; },
width: function(d) { return d.width; },
height: function(d) { return d.height; },
d: function(d) {
return calculatePathData(d).d;
}
});
elements.exit().remove();
if (!!callback) {
callback(elements);
};
};
var init = function() {
var viewport = d3.select('#viewport');
update(function(elements) {
elements.each(function(d){
var element = d3.select(this);
var sourceHandle, sourceHandle2, targetHandle, targetHandle2, sourcePoint, targetPoint, points;
if (d.renderableType === 'edge') {
var edge = d3.select('#' + d.id);
var edgeElement = edge[0][0];
var edgeLength = edgeElement.getTotalLength();
var distanceAlongEdge = Math.min(25, edgeLength/3);
points = d.points;
sourcePoint = points[0];
targetPoint = points[points.length - 1];
sourceHandle = viewport.selectAll('#' + d.id + '-source-handle')
.data([ d ])
.enter()
.append('path')
.attr('id', d.id + '-source-handle')
sourceHandle2 = d3.select('#' + d.id + '-source-handle')
.attr('d', function(d) {
var firstPoint = d.points[0];
var point0 = edgeElement.getPointAtLength(0);
var point1 = edgeElement.getPointAtLength(distanceAlongEdge);
return 'M ' + point0.x + ' ' + point0.y + ' L ' + point1.x + ' ' + point1.y;
})
.attr('class', 'drag-handle')
.on('mouseover', function(d) {
d3.select(this).attr('class','drag-handle grab');
})
.on('mousedown', function(d) {
getDragSegment(d, 'source');
d3.select('#' + d.id).attr('class', 'element edge-selected');
d3.select('svg').attr('class', 'grabbing');
d3.select(this).attr('class','drag-handle grabbing');
})
.on('mouseup', function(d) {
d3.select('#' + d.id).attr('class', 'element edge');
d3.select('svg').attr('class',null);
d3.select(this).attr('class','drag-handle');
})
.call(drag);
targetHandle = viewport.selectAll('#' + d.id + '-target-handle')
.data([ d ])
.enter()
.append('path')
.attr('id', d.id + '-target-handle');
targetHandle2 = d3.select('#' + d.id + '-target-handle')
.attr('d', function(d) {
var lastPoint = d.points[d.points.length - 1];
var point0 = edgeElement.getPointAtLength(edgeLength);
var point1 = edgeElement.getPointAtLength(edgeLength - distanceAlongEdge);
return 'M ' + point0.x + ' ' + point0.y + ' L ' + point1.x + ' ' + point1.y;
})
.attr('class', 'drag-handle')
.on('mouseover', function(d) {
d3.select(this).attr('class','drag-handle grab');
})
.on('mousedown', function(d) {
getDragSegment(d, 'target');
d3.select('#' + d.id).attr('class', 'element edge-selected');
d3.select('svg').attr('class', 'grabbing');
d3.select(this).attr('class','drag-handle grabbing');
})
.on('mouseup', function(d) {
d3.select('#' + d.id).attr('class', 'element edge');
d3.select('svg').attr('class',null);
d3.select(this).attr('class','drag-handle');
})
.call(drag);
}
});
});
};
init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment