本記事はユーザーからの投稿です。
著者：竹天笑
元のタイトル：Wpf でマインドマップを作成する（続編3-Diagram 描画キャンバス）
元のリンク：https://www.cnblogs.com/akwkevin/p/17288814.html
まずは簡易的な効果図を示します。今回の更新は主に百度脳図を模倣しています。
同様に、まずはソースコードのアドレスです：https://gitee.com/akwkevin/aistudio.-wpf.-diagram
今回の拡張の主な内容：
1. マインドマップ、ディレクトリ構成図、フィッシュボーンダイアグラム、論理構造図、組織図。ファイルメニューの新規作成にあります。
2. マインドマップツールバー（マインドマップモードでのみ表示）
2.1. リンクの挿入
2.2. 画像の挿入
2.3. 備考の挿入
2.4. 優先度の挿入
2.5. 進捗の挿入
2.6. タイプの切り替え
2.7. テーマの切り替え
2.8. ノードの展開、全選択、中央揃え、ウィンドウサイズへの適合など、その他の機能もありますが、ここでは割愛します。
3. 検索機能の追加（マインドマップ以外でも使用可能）
4. 次に、コアとなるソースコード（レイアウト設定）を紹介します。
マインドマップ、ディレクトリ構成図、フィッシュボーンダイアグラム、論理構造図、組織図のレイアウトは、以下のインターフェースを継承しています：
public interface IMindLayout
{
/// <summary>
/// デフォルトのノードスタイル設定
/// </summary>
/// <param name="mindNode"></param>
void Appearance(MindNode mindNode);
/// <summary>
/// ノードスタイル設定
/// </summary>
/// <param name="mindNode"></param>
/// <param name="mindTheme"></param>
/// <param name="initAppearance"></param>
void Appearance(MindNode mindNode, MindTheme mindTheme, bool initAppearance);
/// <summary>
/// 線のタイプ設定
/// </summary>
/// <param name="source"></param>
/// <param name="sink"></param>
/// <param name="connector"></param>
/// <returns></returns>
ConnectionViewModel GetOrSetConnectionViewModel(MindNode source, MindNode sink, ConnectionViewModel connector = null);
/// <summary>
/// レイアウトの更新
/// </summary>
/// <param name="mindNode"></param>
void UpdatedLayout(MindNode mindNode);
}
このうち、UpdatedLayout はレイアウト計測 MeasureOverride と要素配置 ArrangeOverride を含みます。これは Panel の再レイアウトに似ており、まず各ノードのサイズを計算し、その後レイアウトを開始します。以下はマインドマップのソースコードです。他のマップについては、興味があればソースコードをダウンロードしてご確認ください。
public SizeBase MeasureOverride(MindNode mindNode, bool isExpanded = true)
{
var sizewithSpacing = mindNode.SizeWithSpacing;
if (mindNode.Children?.Count > 0)
{
if (mindNode.NodeLevel == 0)
{
var rights = mindNode.Children.Where((p, index) => index % 2 == 0).ToList();
rights.ForEach(p => p.ConnectorOrientation = ConnectorOrientation.Left);
var rightsizes = rights.Select(p => MeasureOverride(p, mindNode.IsExpanded && isExpanded)).ToArray();
var lefts = mindNode.Children.Where((p, index) => index % 2 == 1).ToList();
lefts.ForEach(p => p.ConnectorOrientation = ConnectorOrientation.Right);
var leftsizes = lefts.Select(p => MeasureOverride(p, mindNode.IsExpanded && isExpanded)).ToArray();
sizewithSpacing = new SizeBase(sizewithSpacing.Width + rightsizes.MaxOrDefault(p => p.Width) + +leftsizes.MaxOrDefault(p => p.Width), Math.Max(sizewithSpacing.Height, Math.Max(rightsizes.SumOrDefault(p => p.Height), leftsizes.SumOrDefault(p => p.Height))));
}
else
{
var childrensizes = mindNode.Children.Select(p => MeasureOverride(p, mindNode.IsExpanded && isExpanded)).ToArray();
sizewithSpacing = new SizeBase(sizewithSpacing.Width + childrensizes.MaxOrDefault(p => p.Width), Math.Max(sizewithSpacing.Height, childrensizes.SumOrDefault(p => p.Height)));
}
}
mindNode.DesiredSize = isExpanded ? sizewithSpacing : new SizeBase(0, 0);
mindNode.Visible = isExpanded;
return mindNode.DesiredSize;
}
public void ArrangeOverride(MindNode mindNode)
{
if (mindNode.NodeLevel == 0)
{
mindNode.DesiredPosition = mindNode.Position;
if (mindNode.Children?.Count > 0)
{
var rights = mindNode.Children.Where(p => p.ConnectorOrientation == ConnectorOrientation.Left).ToList();
double left = mindNode.DesiredPosition.X + mindNode.ItemWidth + mindNode.Spacing.Width;
double lefttop = mindNode.DesiredPosition.Y + mindNode.ItemHeight / 2 - Math.Min(mindNode.DesiredSize.Height, rights.SumOrDefault(p => p.DesiredSize.Height)) / 2;
foreach (var child in rights)
{
child.Offset = new PointBase(child.Offset.X - child.RootNode.Offset.X, child.Offset.Y - child.RootNode.Offset.Y);
child.DesiredPosition = new PointBase(left + child.Spacing.Width, lefttop + child.DesiredSize.Height / 2 - child.ItemHeight / 2);
child.Left = child.DesiredPosition.X + child.Offset.X;
child.Top = child.DesiredPosition.Y + child.Offset.Y;
lefttop += child.DesiredSize.Height;
ArrangeOverride(child);
var connector = mindNode.Root?.Items.OfType<ConnectionViewModel>().FirstOrDefault(p => p.SourceConnectorInfo?.DataItem == mindNode && p.SinkConnectorInfoFully?.DataItem == child);
connector?.SetSourcePort(mindNode.FirstConnector);
connector?.SetSinkPort(child.LeftConnector);
connector?.SetVisible(child.Visible);
}
var lefts = mindNode.Children.Where(p => p.ConnectorOrientation == ConnectorOrientation.Right).ToList();
double right = mindNode.DesiredPosition.X - mindNode.Spacing.Width;
double righttop = mindNode.DesiredPosition.Y + mindNode.ItemHeight / 2 - Math.Min(mindNode.DesiredSize.Height, lefts.SumOrDefault(p => p.DesiredSize.Height)) / 2;
foreach (var child in lefts)
{
child.Offset = new PointBase(child.Offset.X - child.RootNode.Offset.X, child.Offset.Y - child.RootNode.Offset.Y);
child.DesiredPosition = new PointBase(right - child.Spacing.Width - child.ItemWidth, righttop + child.DesiredSize.Height / 2 - child.ItemHeight / 2);
child.Left = child.DesiredPosition.X + child.Offset.X;
child.Top = child.DesiredPosition.Y + child.Offset.Y;
righttop += child.DesiredSize.Height;
ArrangeOverride(child);
var connector = mindNode.Root?.Items.OfType<ConnectionViewModel>().FirstOrDefault(p => p.SourceConnectorInfo?.DataItem == mindNode && p.SinkConnectorInfoFully?.DataItem == child);
connector?.SetSourcePort(mindNode.FirstConnector);
connector?.SetSinkPort(child.RightConnector);
connector?.SetVisible(child.Visible);
}
}
mindNode.Offset = new PointBase();//修正後0に戻す
}
else
{
if (mindNode.GetLevel1Node().ConnectorOrientation == ConnectorOrientation.Left)
{
double left = mindNode.DesiredPosition.X + mindNode.ItemWidth + mindNode.Spacing.Width;
double top = mindNode.DesiredPosition.Y + mindNode.ItemHeight / 2 - Math.Min(mindNode.DesiredSize.Height, mindNode.Children.SumOrDefault(p => p.DesiredSize.Height)) / 2;
if (mindNode.Children?.Count > 0)
{
foreach (var child in mindNode.Children)
{
child.Offset = new PointBase(child.Offset.X - child.RootNode.Offset.X, child.Offset.Y - child.RootNode.Offset.Y);
child.DesiredPosition = new PointBase(left + child.Spacing.Width, top + child.DesiredSize.Height / 2 - child.ItemHeight / 2);
child.Left = child.DesiredPosition.X + child.Offset.X;
child.Top = child.DesiredPosition.Y + child.Offset.Y;
top += child.DesiredSize.Height;
ArrangeOverride(child);
var connector = mindNode.Root?.Items.OfType<ConnectionViewModel>().FirstOrDefault(p => p.SourceConnectorInfo?.DataItem == mindNode && p.SinkConnectorInfoFully?.DataItem == child);
connector?.SetSourcePort(mindNode.RightConnector);
connector?.SetSinkPort(child.LeftConnector);
connector?.SetVisible(child.Visible);
}
}
}
else
{
double right = mindNode.DesiredPosition.X - mindNode.Spacing.Width;
double top = mindNode.DesiredPosition.Y + mindNode.ItemHeight / 2 - Math.Min(mindNode.DesiredSize.Height, mindNode.Children.SumOrDefault(p => p.DesiredSize.Height)) / 2;
if (mindNode.Children?.Count > 0)
{
foreach (var child in mindNode.Children)
{
child.Offset = new PointBase(child.Offset.X - child.RootNode.Offset.X, child.Offset.Y - child.RootNode.Offset.Y);
child.DesiredPosition = new PointBase(right - child.Spacing.Width - child.ItemWidth, top + child.DesiredSize.Height / 2 - child.ItemHeight / 2);
child.Left = child.DesiredPosition.X + child.Offset.X;
child.Top = child.DesiredPosition.Y + child.Offset.Y;
top += child.DesiredSize.Height;
ArrangeOverride(child);
var connector = mindNode.Root?.Items.OfType<ConnectionViewModel>().FirstOrDefault(p => p.SourceConnectorInfo?.DataItem == mindNode && p.SinkConnectorInfoFully?.DataItem == child);
connector?.SetSourcePort(mindNode.LeftConnector);
connector?.SetSinkPort(child.RightConnector);
connector?.SetVisible(child.Visible);
}
}
}
}
}
5. 最後に、皆様が使いやすいように、マインドマップコントロール MindEditor をカプセル化しました。JSON形式のデータを直接バインドでき、データが変更されると自動的に読み込んで適用されます。（詳しくは AIStudio.Wpf.DiagramDesigner.Demo をご覧ください）
近日中に継続的に更新予定です。ぜひ 艾竹 (akwkevin) - Gitee.com にお越しください。応援してくださる皆様、スター⭐をお願いします。皆様のご支援が、私のオープンソース活動を燃え上がらせてくれます。