Cara menggunakan Layui untuk membangunkan pereka bentuk carta alir yang boleh diedit

Cara menggunakan Layui untuk membangunkan pereka bentuk carta alir yang menyokong kebolehsuntingan

Pengenalan:
Dengan perkembangan pemformatan yang pesat carta alir semakin digunakan dalam pelbagai industri. Walau bagaimanapun, pemilihan editor carta alir pada masa ini di pasaran adalah terhad, dan kebanyakannya memerlukan pembayaran. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk membangunkan pereka bentuk carta alir yang boleh diedit dan menyediakan contoh kod khusus.

1. Pengenalan kepada Layui:
Layui ialah rangka kerja bahagian hadapan yang ringkas dan mudah digunakan yang menyediakan pelbagai komponen dan antara muka untuk membina antara muka Web dengan cepat. Ia dicirikan oleh ringan, modulariti, responsif, dsb., dan sangat sesuai untuk membangunkan aplikasi web mudah dengan cepat.

2. Idea reka bentuk:

1. reka bentuk struktur HTML:
   Mula-mula kita perlu mereka bentuk struktur HTML pereka bentuk carta alir, termasuk alatan pada lajur kiri dan kawasan kanvas di sebelah kanan. Bar alat digunakan untuk memilih elemen carta alir yang berbeza, dan kawasan kanvas digunakan untuk memaparkan dan mengedit carta alir.

Kod sampel adalah seperti berikut:

<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. Initialkan bar alat dan kanvas:
   Seterusnya, gunakan mekanisme modulisasi JavaScript Mulakan bar alat dan kanvas. Perlu diingatkan bahawa untuk merealisasikan fungsi seret dan lepas serta sambungan carta alir, kita perlu memperkenalkan perpustakaan jsPlumb.

Kod sampel adalah seperti berikut:

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. Untuk merealisasikan menyeret dan menyambungkan nod:
   Melalui antara muka yang disediakan oleh j kita boleh mencapai fungsi menyeret dan menyambung Nod. Selepas nod dicipta, kita boleh memanggil kaedah makeSource untuk menjadikannya boleh diseret dan kaedah makeTarget untuk menjadikannya boleh disambungkan. 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);
});

Laksanakan talian sambungan antara nod:

Menggunakan enjin jsPlumb Kaedah connect, kita boleh merealisasikan talian sambungan antara nod. Klik kanan pada nod, dan menu akan muncul untuk pengguna memilih nod sasaran untuk disambungkan.


#🎜🎜#Kod sampel adalah seperti berikut: #🎜🎜#rrreee#🎜🎜# 3. Ringkasan: #🎜🎜#Artikel ini memperkenalkan cara menggunakan Layui untuk membangunkan pereka bentuk carta alir yang boleh diedit. Melalui contoh kod HTML dan JavaScript, kami telah melaksanakan fungsi seperti pemulaan bar alat, menyeret dan menyambungkan nod, dan menyambung talian antara nod. Pembaca boleh menambah baik dan mengembangkan lagi pereka bentuk carta alir mengikut keperluan mereka. Saya harap artikel ini dapat membantu pembaca yang menggunakan Layui untuk pembangunan carta alir. #🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan pereka bentuk carta alir yang boleh diedit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!