Vue.js で AntV X6 を使用する手順の例

0x0 はじめに

プロジェクトではフローチャートを使用しており、要件が詳細ではないため、フローチャートエディターとして、より柔軟な x6 グラフィックエディターが選択されています。ドキュメントによると、複雑ではないため、これは単なるリファレンスチュートリアルです。

Antv X6 ドキュメント

0x1 インストール

チュートリアルの指示に従って x6 依存関係をインストールし、インスタンス化用の新しいコンテナーを作成します。

<div ref="コンテナRef" クラス="エリアセンターコンテナ" />

定数データ = {
  // ノード: [
    {
      id: 'node1', // 文字列、オプション、ノードの一意の識別子 x: 40, // 数値、必須、ノード位置の x 値 y: 40, // 数値、必須、ノード位置の y 値 width: 80, // 数値、オプション、ノード サイズの幅の値 height: 40, // 数値、オプション、ノード サイズの高さの値 label: 'hello', // 文字列、ノード ラベル },
    {
      id: 'node2', // 文字列、ノードの一意の識別子 x: 160, // 数値、必須、ノード位置の x 値 y: 180, // 数値、必須、ノード位置の y 値 width: 80, // 数値、オプション、ノード サイズの幅の値 height: 40, // 数値、オプション、ノード サイズの高さの値 label: 'world', // 文字列、ノード ラベル },
  ]、
  // エッジ: [
    {
      ソース: 'node1', // 文字列、必須、開始ノード ID
      target: 'node2', // 文字列、必須、ターゲットノード ID
    },
  ]、
}

関数initGraph() {
  constグラフ = 新しいグラフ({
    コンテナ: this.$refs.containerRef,
    グリッド: {
      size: 10, // グリッドサイズ 10px
      visible: true // メッシュの背景をレンダリング},
    スナップライン:
      enabled: true, // アライメント sharp: true
    },
    スクロール:
      有効: true、
      ページ表示: false、
      ページブレーク: false、
      パン可能: true
    }
  })
  // キャンバスを中央に配置する graph.centerContent()

  graph.fromJSON(データ)
}

これは最も単純な例です。上記のさまざまなパラメータについては、ドキュメントの対応する説明を参照してください。

0x2 ノードサイドバー

ドキュメント内のステンシルの例によれば、多くのコードを簡略化できます。カプセル化されたビジネスを直接使用できます。上記のようにコンテナのインスタンス化を記述するだけです。

<el-aside ref="ステンシルRef" class="area-left" />

this.stencil = 新しいStencil({
    タイトル: 「プロセスノードサイドバー」
    対象: グラフ、
    検索: 偽、
    折りたたみ可能: true、
    ステンシルグラフの幅: this.$refs.stencilRef.$el.clientWidth、
    ステンシルグラフの高さ: this.$refs.stencilRef.$el.clientHeight、
    グループ: [
        {
            名前: 'グループ',
            タイトル: 「フローチャートノード」
            折りたたみ可能: false
          }
        ]、
    getDropNode: ノード => {
        cloneNode = node.clone() とします。
        スイッチ (node.shape) {
            'rect'の場合:
                cloneNode = 新しい RectShape()
                壊す
            ケース '円':
                cloneNode = 新しい CircleShape()
                壊す
            'ポリゴン'の場合:
                cloneNode = 新しいポリラインシェイプ()
                壊す
        }
        cloneNode.updateInPorts(グラフ)
        cloneNodeを返す
    }
})
// ノードをロードします this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')