コネクタシェイプ

コネクタシェイプは、線や矢印、および定義済みの接続ポイントを使用して、2つ以上のシェイプを接続するために使用されます。SpreadJSは、ワークシート上でコネクタシェイプを作成・カスタマイズするための機能を組み込みで提供しています。コネクタを使用することで、ダイアグラムやフローベースのレイアウトにおいて、シェイプ間の関係を視覚的に表現できます。

コネクタの種類

SpreadJS は次のコネクタ種類をサポートしています:

直線コネクタ: 直線で図形を接続します。
カギ線コネクタ: 角度の付いた線分で図形を接続します。
曲線コネクタ: 曲線で図形を接続します。

また、コネクタに適用する矢印スタイルも次のようにカスタマイズできます:

通常の矢印（矢印の先端なし）
基本矢印（両端が尖っている）
開いた矢印
ステルス矢印
楕円矢印
ひし形矢印

次の画像はコネクタシェイプを示しています:

接続モデル

コネクタシェイプは、定義済みの接続ポイントを介して図形に接続されます。。各コネクタには次が含まれます:

始点
終点

これらの端点は、特定の図形および特定の接続ポイントインデックスにバインドできます:

connectorShape.startConnector({ name: shape1.name(), index: 3 });
connectorShape.endConnector({ name: shape2.name(), index: 2 });

コネクタの操作とスナップ挙動

SpreadJS は、ワークシート上でコネクタを扱う際の組み込みの操作ロジックを提供します。

端点の表示

コネクタが選択されている場合:
- 接続済みの端点は、塗りつぶされた緑色の円として表示されます。
- 未接続の端点は、白い円として表示されます。
ドラッグ中は、視認性を高めるため端点の円は一時的に非表示になります。
ドラッグ終了後、端点インジケーターが復元されます。

自動スナップ

コネクタの端点を有効な接続ポイントの近くまでドラッグすると:

コネクタは最も近い接続ポイントに自動的にスナップします。
これにより接続精度とユーザー効率が向上します。

スナップ中は:

視覚的フィードバックとして、ターゲット接続ポイントに緑色のハイライト（グロー）効果が表示されます。
マウスを離す前に最終的なルーティングを確認できるよう、コネクタのパスがリアルタイムでプレビューされます。

ハイライトの色と半径は現在固定で、カスタマイズできません。

例: コネクタシェイプの追加

次の例は、2 つの図形の間にコネクタを追加する方法を示します:

// ワークシートにコネクタ図形を追加
window.onload = function ()
{
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   var sheet = spread.getActiveSheet();

   // 2 つの図形を追加
   var shape1 = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 150, 100, 100, 100);
   var shape2 = sheet.shapes.add("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 700, 100, 100, 100);

   // コネクタを追加
   var connectorShape = sheet.shapes.addConnector(
       "myConnectorShape",
       GC.Spread.Sheets.Shapes.ConnectorType.straight,
       250, 150, 700, 150
   );

   // スタイルを設定
   var oldStyle = connectorShape.style();
   oldStyle.line.color = 'red';
   oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dot;
   oldStyle.line.width = 10;
   oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
   oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
   oldStyle.line.beginArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
   oldStyle.line.beginArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.narrow;
   oldStyle.line.beginArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.short;
   oldStyle.line.endArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
   oldStyle.line.endArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.medium;
   oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.medium;
   connectorShape.style(oldStyle);

   // 接続ポイントをバインド
   connectorShape.startConnector({ name: shape1.name(), index: 3 });
   connectorShape.endConnector({ name: shape2.name(), index: 2 });
};

制限事項

SpreadJS は次のシナリオをサポートしていません:

フリーフォームのコネクタのルーティングはサポートされていません。
コネクタのレイアウトは Excel と異なる場合があります。
「曲がり矢印（BentArrow）」コネクタを使用する場合、Excelでは表示が切り取られる（クリップされる）ことがありますが、SpreadJSでは塗りつぶしが維持されて表示されます。
特定の図形（吹き出し、四角形吹き出し、楕円吹き出し、雲形吹き出しなど）のサイズを変更すると、表示が切り取られる場合があります。
「立方体」や「斜めストライプ」などの図形において、コントロールポイントを極端な値に調整すると、予期しない結果になることがあります。