Layui を使用して編集可能なフローチャート デザイナーを開発する方法

Layui を使用して編集可能性をサポートするフローチャート デザイナーを開発する方法

はじめに:
情報化の急速な発展に伴い、フローチャートはあらゆる分野で使用されています。のアプリケーションはますます広範囲に広がっています。ただし、現在市場にあるフローチャート エディタの選択肢は限られており、ほとんどは有料です。この記事では、Layui フレームワークを使用して編集可能なフローチャート デザイナーを開発する方法を紹介し、具体的なコード例を示します。

1. Layui の概要:
Layui は、Web インターフェイスを迅速に構築するための豊富なコンポーネントとインターフェイスを提供する、シンプルで使いやすいフロントエンド フレームワークです。軽量、モジュール性、応答性などの特徴があり、単純な Web アプリケーションを迅速に開発するのに非常に適しています。

2. 設計アイデア:

1. HTML 構造設計:
   まず、左側のツールバーとキャンバスを含む、フローチャート デザイナーの HTML 構造を設計する必要があります。右側のエリアにあります。ツールバーはさまざまなフローチャート要素を選択するために使用され、キャンバス領域はフローチャートを表示および編集するために使用されます。

サンプル コードは次のとおりです。

<div class="toolbar">
  <button class="layui-btn layui-btn-primary" id="start">开始节点</button>
  <button class="layui-btn layui-btn-primary" id="process">流程节点</button>
  <button class="layui-btn layui-btn-primary" id="decision">决策节点</button>
</div>
<div id="canvas"></div>

2. ツールバーとキャンバスを初期化します。
   次に、Layui の JavaScript モジュール化メカニズムを使用して、ツールバーとキャンバスを初期化します。なお、フローチャートのドラッグ＆ドロップや接続機能を実現するには、jsPlumbライブラリを導入する必要があります。

サンプルコードは次のとおりです:

layui.use(['jquery', 'layer'], function(){
  var $ = layui.jquery;
  var layer = layui.layer;

  // 初始化工具栏按钮
  $('#start').click(function(){
    // 创建开始节点元素并在画布中显示
    ...
  });

  $('#process').click(function(){
    // 创建流程节点元素并在画布中显示
    ...
  });

  $('#decision').click(function(){
    // 创建决策节点元素并在画布中显示
    ...
  });

  // 初始化画布
  var canvas = $('#canvas');
  jsPlumb.ready(function(){
    jsPlumb.setContainer(canvas);
    ...
  });
});

3. ノードのドラッグと接続を実現します:
   jsPlumb が提供するインターフェイスを介して、ドラッグとノードの接続を実現できます。ノードの接続機能。ノードが作成されたら、makeSource メソッドを呼び出してノードをドラッグ可能にし、makeTarget メソッドを呼び出して接続可能にします。

サンプル コードは次のとおりです:

// 创建开始节点元素
var start = $('<div class="node start">开始</div>');
canvas.append(start);

jsPlumb.makeSource(start, {
  filter: '.node',
  anchor: 'Continuous',
  connectorStyle: {
    strokeStyle: '#999',
    lineWidth: 2
  },
  connectionType: 'basic',
  extract:{
    "action":"the-action"
  },
  maxConnections: 1,
  onMaxConnections: function(info, e) {
    layer.msg("不能再添加连接了！", {time: 1000});
  }
}).initDraggable();

// 创建流程节点元素
var process = $('<div class="node process">流程节点</div>');
canvas.append(process);

jsPlumb.makeSource(process, {
  filter: '.node',
  anchor: 'Continuous',
  connectorStyle: {
    strokeStyle: '#999',
    lineWidth: 2
  },
  connectionType: 'basic',
  extract:{
    "action":"the-action"
  },
  maxConnections: -1,
  onMaxConnections: function(info, e) {
    layer.msg("不能再添加连接了！", {time: 1000});
  }
}).initDraggable();

// 创建决策节点元素
var decision = $('<div class="node decision">决策节点</div>')
canvas.append(decision);

jsPlumb.makeSource(decision, {
  filter: '.node',
  anchor: 'Continuous',
  connectorStyle: {
    strokeStyle: '#999',
    lineWidth: 2
  },
  connectionType: 'basic',
  extract:{
    "action":"the-action"
  },
  maxConnections: -1,
  onMaxConnections: function(info, e) {
    layer.msg("不能再添加连接了！", {time: 1000});
  }
}).initDraggable();

4. ノード間の接続線を実装します:
   jsPlumb エンジンの connect メソッドを使用します。 、ノード間の接続線を実現できます。ノードを右クリックすると、接続先のターゲット ノードを選択するためのメニューがポップアップ表示されます。

サンプル コードは次のとおりです:

canvas.on('contextmenu', '.node', function(e){
  e.preventDefault();
  var node = $(this);
  var menu = $('<div class="menu"></div>');

  // 获取所有可连接的节点
  var targets = canvas.find('.node').not(node);

  // 创建菜单项
  targets.each(function(){
    var target = $(this);
    var item = $('<div class="menu-item"></div>').text(target.text());
    item.click(function(){
      // 添加连接线
      jsPlumb.connect({
        source: node,
        target: target,
        ... // 连接线的样式和属性设置
      });
      menu.remove();
    });
    menu.append(item);
  });

  // 显示菜单
  menu.css({ top: e.pageY, left: e.pageX });
  canvas.append(menu);
});

3. 概要:
この記事では、Layui を使用して編集機能をサポートするフローチャート デザイナーを開発する方法を紹介します。 HTML と JavaScript のコード例を通じて、ツールバーの初期化、ノードのドラッグと接続、ノード間の線の接続などの機能を実装しました。読者は、ニーズに応じてフローチャート デザイナーをさらに改善および拡張できます。この記事が、フローチャート開発に Layui を使用する読者にとって役立つことを願っています。

以上がLayui を使用して編集可能なフローチャート デザイナーを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。