Vue を使用してフローチャートを作成するにはどうすればよいですか?

インターネットの発展に伴い、業務フローチャートや回路図などのフローチャートの作成が必要なアプリケーションが増えています。 Vue.js は非常に人気のあるフロントエンド フレームワークであり、優れた対話性と保守性を提供するため、複雑なフローチャート アプリケーションを構築するために広く使用されています。

この記事では、Vue を使用してフローチャート作成を実装する方法を紹介します。これには次の手順が含まれます。

1. 必要な依存関係をインストールする
2. 基本的なコンポーネント構造を作成する
3. ドラッグ アンド ドロップ機能の実装
#接続線の実装
4. #ノード編集の実装
#エクスポート フローチャート
5. ##必要な依存関係のインストール
6. まず、vue-draggable-resizable ライブラリをインストールする必要があります。これは、要素のドラッグとスケーリング機能を実現できる非常に使いやすい Vue プラグインです。 npm を使用してインストールできます。

7. npm install vue-draggable-resizable --save

基本的なコンポーネント構造を作成します

フローチャートを編集するには、Vue コンポーネントを使用する必要があります。すべてのフローチャート要素を含む FlowChart コンポーネントを作成する必要があります。各ノードは、フローチャートのステップを表すノード コンポーネントです。接続線は、さまざまなノードを接続するために使用される接続コンポーネントです。
2. まず、FlowChart.vue ファイル内に抽象 FlowChart コンポーネントを作成して、すべてのノードと接続線を含める必要があります。

<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 组件插槽，用于插入节点 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 组件插槽，用于插入连接线 -->
      <slot name="connections"></slot>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'FlowChart'
}
</script>

FlowChart コンポーネント内のノードと接続線をそれぞれ次のように配置します。 2つのスロット。

次に、フローチャートのノードと接続線を表すノード コンポーネントと接続コンポーネントを作成する必要があります。

Node.vue:

<template>
  <draggable-resizable :w="width" :h="height" :x="x" :y="y">
    <div class="node">
      <!-- 节点的内容 -->
      <div class="node-content">
        <slot></slot>
      </div>
    </div>
  </draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  name: 'Node',
  components: {
    VueDraggableResizable
  },
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 50
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  }
}
</script>

Connection.vue:

<template>
  <svg class="connection">
    <!-- SVG 路径元素，用于绘制连接线 -->
    <path :d="path"></path>
  </svg>
</template>

<script>
export default {
  name: 'Connection',
  props: {
    start: Object,
    end: Object
  },
  computed: {
    path () {
      // 计算连接线的路径
      const startX = this.start.x + this.start.width / 2
      const startY = this.start.y + this.start.height / 2
      const endX = this.end.x + this.end.width / 2
      const endY = this.end.y + this.end.height / 2
      return `M ${startX} ${startY} L ${endX} ${endY}`
    }
  }
}
</script>

vue-draggable-resizable コンポーネントを使用してノードのドラッグとスケーリングを実装します。ノードの幅、高さ、x、y、およびその他の属性を渡す必要があります。接続線は SVG パス要素を使用して描画され、パスはノードの位置とサイズに基づいて計算する必要があります。

ドラッグ アンド ドロップ機能の実装

ノードのドラッグ アンド ドロップ機能を実現するには、 v-on:drag, v-on を追加する必要があります。 Node コンポーネントの -on:resize イベント リスナーの :dragstop および v。これらはそれぞれ、ノードのドラッグ、ドラッグ終了、サイズ変更に対応します。

3. <draggable-resizable
     :w="width"
     :h="height"
     :x="x"
     :y="y"
     v-on:drag="onDrag"
     v-on:dragstop="onDragStop"
     v-on:resize="onResize"
   >
     <!-- 节点的内容 -->
   </draggable-resizable>
   
   <script>
   export default {
     name: 'Node',
     methods: {
       onDrag (pos) {
         // 拖拽事件处理函数
         this.$emit('move', {
           x: pos.x,
           y: pos.y
         })
       },
       onDragStop (pos) {
         // 结束拖拽事件处理函数
         this.$emit('endMove', {
           x: pos.x,
           y: pos.y
         })
       },
       onResize (size) {
         // 调整大小事件处理函数
         this.$emit('resize', {
           width: size.width,
           height: size.height
         })
       }
     }
   }
   </script>

これらのイベント処理関数の $emit メソッドを介してイベントを親コンポーネントに送信し、ノードの位置とノードのリアルタイム更新を実現します。サイズ。 FlowChart コンポーネントでは、これらのイベントをリッスンしてノード情報を更新する必要があります:

<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>
  </div>
</template>

<script>
import Node from './Node.vue'
import Connection from './Connection.vue'

export default {
  name: 'FlowChart',
  components: {
    Node,
    Connection
  },
  data () {
    return {
      showConnection: false,
      start: null, // 起点节点
      end: null // 终点节点
    }
  },
  methods: {
    onNodeMove (node, pos) {
      // 节点拖拽时的事件处理函数
      node.x = pos.x
      node.y = pos.y
    },
    onNodeEndMove (node, pos) {
      // 节点结束拖拽时的事件处理函数
      node.x = pos.x
      node.y = pos.y
      this.showConnection = false
      this.start = null
      this.end = null
    },
    onNodeResize (node, size) {
      // 节点调整大小时的事件处理函数
      node.width = size.width
      node.height = size.height
    },
    connectNodes (start, end) {
      // 连接两个节点
      this.showConnection = true
      this.start = start
      this.end = end
    }
  }
}
</script>

ノードのドラッグ、ドラッグ終了、調整に応答するために、onNodeMove、onNodeEndMove、onNodeResize の 3 つのイベント処理関数を定義しました。 。 サイズ。 connectNodes 関数は 2 つのノードを接続するために使用されます。

接続線の実装

FlowChart コンポーネントで、showConnection 変数と 2 つの変数 start と end を定義して、接続線の情報を保存します。接続線を描画するには、マウス イベントを通じてこの情報を更新する必要があります。
4. まず、v-on:mousedown イベントと v-on:mouseup イベントのリッスンを Node コンポーネントに追加する必要があります。これらのイベントは、ユーザーがノードを選択したかどうかを検出するために使用されます。

<draggable-resizable
  :w="width"
  :h="height"
  :x="x"
  :y="y"
  v-on:drag="onDrag"
  v-on:dragstop="onDragStop"
  v-on:resize="onResize"
  v-on:mousedown="onMouseDown"
  v-on:mouseup="onMouseUp"
>
  <!-- 节点的内容 -->
</draggable-resizable>

<script>
export default {
  name: 'Node',
  methods: {
    ...
    onMouseDown () {
      // 鼠标按下时选中当前节点
      this.$emit('select', this)
    },
    onMouseUp () {
      // 鼠标松开时取消选中
      this.$emit('unselect')
    }
  }
}
</script>

onMouseDown イベント ハンドラー関数で親コンポーネントに select イベントを送信し、現在のノードを選択します。 FlowChart コンポーネントでは、次のイベントをリッスンする必要があります:

<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>
  </div>
</template>

<script>
import Node from './Node.vue'
import Connection from './Connection.vue'

export default {
  name: 'FlowChart',
  components: {
    Node,
    Connection
  },
  data () {
    return {
      showConnection: false,
      start: null, // 起点节点
      end: null // 终点节点
    }
  },
  methods: {
    ...
    onSelectNode (node) {
      // 选中节点时的事件处理函数
      if (this.start) {
        // 已选择起点，连接当前节点
        this.end = node
        this.connectNodes(this.start, this.end)
      } else {
        // 选择起点
        this.start = node
      }
    },
    onUnselectNode () {
      // 取消选中节点时的事件处理函数
      this.start = null
      this.end = null
      this.showConnection = false
    }
  }
}
</script>

onSelectNode イベント ハンドラー関数で開始点ノードが現在選択されているかどうかを判断し、選択されている場合は現在のノードを接続します。そうでない場合は、現在のノードを開始点として使用します。 onUnselectNode イベント ハンドラーで、ノードの選択を解除し、接続線情報をリセットします。

ノード編集の実装

ノード編集を実装するには、Node.vue に編集ボタンを追加し、そのクリック イベントをリッスンする必要があります:

5. <template>
     <draggable-resizable ...>
       <div class="node">
         <div class="node-content" v-on:click="$emit('edit')">
           <!-- 节点的内容 -->
         </div>
         <button class="edit-button" v-on:click="$emit('edit')">
           编辑
         </button>
       </div>
     </draggable-resizable>
   </template>
   
   <script>
   export default {
     name: 'Node'
   }
   </script>
   
   <style>
   .edit-button {
     position: absolute;
     bottom: 5px;
     right: 5px;
   }
   </style>

次に、FlowChart.vue で編集イベントをリッスンし、選択したノードに入力ボックスを表示します。

<template>
  <div class="flowchart">
    <div class="nodes">
      <!-- 将节点插入到插槽中 -->
      <slot name="nodes"></slot>
    </div>
    <svg class="connections">
      <!-- 将连接线插入到插槽中 -->
      <slot name="connections"></slot>
      <!-- 鼠标跟随的连接线 -->
      <Connection v-if="showConnection"
                  :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                  :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
    </svg>

    <!-- 编辑区域 -->
    <div class="edit-panel" v-if="selectedNode">
      <h3>编辑节点</h3>
      <form v-on:submit.prevent="saveNode">
        <label for="node-label">节点名称</label>
        <input id="node-label" type="text" v-model="nodeLabel">
        <button type="submit">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowChart',
  data () {
    return {
      showConnection: false,
      start: null, // 起点节点
      end: null, // 终点节点
      selectedNode: null, // 选中的节点
      nodeLabel: '' // 当前节点的标签
    }
  },
  methods: {
    ...
    onSelectNode (node) {
      // 选中节点时的事件处理函数
      if (this.start) {
        // 已选择起点，连接当前节点
        this.end = node
        this.connectNodes(this.start, this.end)
        this.selectedNode = null
      } else {
        // 选择起点
        this.start = node
      }
    },
    onUnselectNode () {
      // 取消选中节点时的事件处理函数
      this.start = null
      this.end = null
      this.showConnection = false
      this.selectedNode = null
    },
    onEditNode (node) {
      // 编辑节点时的事件处理函数
      this.selectedNode = node
      this.nodeLabel = node.$slots.default[0].text.trim()
    },
    saveNode () {
      // 保存节点编辑后的信息
      this.selectedNode.$slots.default[0].text = this.nodeLabel
      this.selectedNode = null
    }
  }
}
</script>

<style>
.edit-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-shadow: -1px 0 10px rgba(0, 0, 0, 0.3);
}
</style>

onSelectNode イベント ハンドラー関数に this.selectedNode = null を追加して、ノードの編集ボックスを非表示にします。 。 onEditNode イベント ハンドラーでは、編集イベントを親コンポーネントに送信して、選択したノードを編集するための入力ボックスを表示します。編集したノードの情報をsaveNodeイベントハンドラ関数で保存します。

フローチャートのエクスポート

最後に、FlowChart.vue にエクスポート ボタンを追加して、現在のフローチャートを JSON 形式にエクスポートできます:

6. <template>
     <div class="flowchart">
       <div class="nodes">
         <!-- 将节点插入到插槽中 -->
         <slot name="nodes"></slot>
       </div>
       <svg class="connections">
         <!-- 将连接线插入到插槽中 -->
         <slot name="connections"></slot>
         <!-- 鼠标跟随的连接线 -->
         <Connection v-if="showConnection"
                     :start="{x: start.x + start.width / 2, y: start.y + start.height / 2, width: start.width, height: start.height}"
                     :end="{x: end.x + end.width / 2, y: end.y + end.height / 2, width: end.width, height: end.height}"/>
       </svg>
   
       <!-- 编辑区域 -->
       ...
   
       <!-- 导出按钮 -->
       <button class="export-button" v-on:click="exportFlowchart">导出</button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'FlowChart',
     methods: {
       ...
       exportFlowchart () {
         // 导出流程图
         const nodes = []
         const connections = []
         this.$slots.nodes.forEach(vnode => {
           const node = vnode.componentInstance
           nodes.push({
             x: node.x,
             y: node.y,
             width: node.width,
             height: node.height,
             label: node.$slots.default[0].text.trim()
           })
         })

以上がVue を使用してフローチャートを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。