grailsとjsPlumbでコネクター上にダイヤモンド形を描画するには、以下の手順を実行します。
1. ApplicationResources.groovyでモジュールを宣言
modules = {
application {
resource url:'js/application.js'
}
// jsPlumbのモジュールを宣言
jsplumb {
dependsOn 'jquery-ui'
resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
}
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。
jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。
2. main.gspに以下のようにr:requireを使用してリソースを導入します。
<g:layoutHead/>
<!-- jsPlumbを使用 -->
<r:require module="jsplumb"/>
<r:layoutResources />
</head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
<div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
</div>
<div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
</div>
</div>
<script type="text/javascript">
$(function(){
// レンダーモードを設定
jsPlumb.setRenderMode(jsPlumb.CANVAS);
// unload処理
$("body").unload(function(){
jsPlumb.unload();
});
jsPlumb.Defaults.Container = "jsplumb";
// endpointの作成と配置
$("#node0").css("left", $("#jsplumb").position().left + 10);
$("#node0").css("top", $("#jsplumb").position().top + 40);
var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault", endpoint:["Blank"]});
$("#node1").css("left", $("#jsplumb").position().left + 240);
$("#node1").css("top", $("#jsplumb").position().top + 140);
var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault", endpoint:["Blank"]});
// endpointsを接続(overlaysでdiamondを指定する)
jsPlumb.connect({
source:node0, target:node1,
overlays:[["Diamond", {location:0.5, width:30, length:30}]]
});
});
</script>
出力画面
動作環境
grails 2.0.1
関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html