|
|
Inkpodのマップ上に置かれている要素をマップ・オブジェクト呼びます。アプリから、マップ・オブジェクトを追加する事ができます。
マップ・オブジェクトには、ノード・オブジェクトと関連・オブジェクトがあります。関連・オブジェクトは、ノード・オブジェクト同士をつなぐ線の形をしたオブジェクトです。線の端がノード・オブジェクトにつながります。ただし、線の端をノード・オブジェクトに接続せず、独立した状態にすることもできます。
それぞれの場合について、マップ・オブジェクトを追加する方法を説明します。
なお、グループ化オブジェクトという特別なマップ・オブジェクトもありますが、それはグループ化の節で説明します。
モデル(PMapModel)のcreateNodeObject() メソッドで、ノード・オブジェクトを作成し、それをモデルのaddObject() メソッドで追加するのが基本の手順になります。createNodeObject() で返されるオブジェクトに設定されているシェイプの形や色は、ユーザーが選択しているシェイプの形やスタイルに左右されます。
コンテキストメニューに、「オブジェクトの追加」というメニュー項目を作成します。背景を右クリックしメニューを選ぶと、右クリックした位置に新しいオブジェクトが追加されます。
function extendUI(event) {
inkpod.ui.actions.addAction({
id : "SAMPLE_ADD_OBJECT",
text : "オブジェクトの追加",
action : function(frame, event) {
var model = frame.model;
var object = model.createNodeObject();
object.shape.text = "sample";
object.shape.location = frame.contextMenuClickPoint;
model.addObject(object);
}
});
inkpod.ui.backgroundPopupMenu.addMenuItem("SAMPLE_ADD_OBJECT");
}
function init()
{
inkpod.ui.addUIExtensionListener(extendUI);
}
function dispose()
{
}
plugin = {
init : init,
dispose : dispose
}PMapModelのcreateNodeObject()メソッドで、オブジェクトを作成します。オブジェクトのテキストを変更するために、object.shapeのtextプロパティを書きかえています。また、オブジェクトの位置を右クリックした位置に変更するために、object.shapeのlocationプロパティも書きかえています。コンテキストメニューを開くために右クリックした位置は、frameのcontextMenuClickPointプロパティから読み出せます。位置やテキストを設定した後、modelのaddObject()メソッドで、作成したオブジェクトをマップ上に追加しています。
オブジェクトの位置やサイズ、色など、オブジェクトの外観に関する値は、objectのshapeプロパティがら読み出せるPObjectShapeオブジェクトのプロパティで、取得と設定ができます。オブジェクトの追加の時、あらかじめアプリで色などを設定しておくことができます。
モデル(PMapModel)のcreateRelationObject() メソッドで、関連・オブジェクトを作成し、それをモデルのaddObject() メソッドで追加するのが基本の手順になります。createRelationObject() の第１、第２引数にノード・オブジェクトを渡すと、それぞれ、始点と終点に接続されます。createRelationObject() で返されるオブジェクトに設定されているシェイプの形や色は、ユーザーが選択しているシェイプの形やスタイルに左右されます。
２つのオブジェクトをつなぐ関連オブジェクトを追加するサンプルです。サンプルでは、右クリックのメニューから「オブジェクトと関連オブジェクトの追加」を選択すると、２つのオブジェクトと、それらをつなぐ関連オブジェクトが追加されます。
function extendUI(event) {
inkpod.ui.actions.addAction({
id : "SAMPLE_ADD_RELATION_OBJECT",
text : "オブジェクトと関連オブジェクトの追加",
action : function(frame, event) {
var model = frame.model;
var point = frame.contextMenuClickPoint;
var object1 = model.createNodeObject();
object1.shape.text = "from";
object1.shape.location = point;
var object2 = model.createNodeObject();
object2.shape.text = "to";
point.x += (object1.shape.width + 100);
object2.shape.location = point;
object1 = model.addObject(object1);
object2 = model.addObject(object2);
var relationObject = model.createRelationObject(object1, object2);
model.addObject(relationObject);
}
});
inkpod.ui.backgroundPopupMenu.addMenuItem("SAMPLE_ADD_RELAION_OBJECT");
}
function init()
{
inkpod.ui.addUIExtensionListener(extendUI);
}
function dispose()
{
}
plugin = {
init : init,
dispose : dispose
}まず、始点と終点となるノード・オブジェクトを２つ作成しています。２つのノード・オブジェクトを引数として、PMapModelのcreateRelationobject() メソッドを呼び出し、ノード・オブジェクトと接続した関連・オブジェクトを作ります。最後に、ノード・オブジェクト、関連・オブジェクトの順で追加しています。この順序は重要です。関連・オブジェクトを追加するとき、つながっているノード・オブジェクトがすでに追加されている必要があります。
関連・オブジェクトは、ノード・オブジェクトとつながっていない状態で作ることもできます。
モデル(PMapModel)のcreateRelationObject() メソッドで、関連・オブジェクトを作成し、それをモデルのaddObject() メソッドで追加するのが基本の手順になります。createRelationObject() を引数無しで呼び出すか、２つの引数にnullを渡すことで、ノード・オブジェクトとつながっていない関連・オブジェクトを作れます。ノード・オブジェクトと接続していない場合、始点と終点の位置は、それぞれshapeプロパティのlineStartPoint, lineEndPointプロパティで設定します。
独立した関連オブジェクトを追加するサンプルです。右クリックのメニューから「関連オブジェクトの追加」を選択すると、右方向に水平な、長さ100の関連オブジェクトが追加されます。関連線が、直線、かぎ型、曲線のどれになるかはユーザーの選択状態に依存します。
function extendUI(event) {
inkpod.ui.actions.addAction({
id : "SAMPLE_ADD_RELATION_OBJECT2",
text : "関連オブジェクトの追加",
action : function(frame, event) {
var model = frame.model;
var point = frame.contextMenuClickPoint;
var relationObject = model.createRelationObject();
relationObject.shape.lineStartPoint = point;
point.x += 100;
relationObject.shape.lineEndPoint = point;
model.addObject(relationObject);
}
});
inkpod.ui.backgroundPopupMenu.addMenuItem("SAMPLE_ADD_RELATION_OBJECT2");
}
function init()
{
inkpod.ui.addUIExtensionListener(extendUI);
}
function dispose()
{
}
plugin = {
init : init,
dispose : dispose
}
createRelationObject()を引数無しで呼び出して、ノード・オブジェクトとつながっていない関連・オブジェクトを作ります。線の始点と終点を指定するために、オブジェクトのshapeプロパティに対して、lineStartPointプロパティ、lineEndPointプロパティを設定します。ここでは、右クリック位置を基点として、水平に100の長さの関連線を引いています。