Comment utiliser Layui pour développer un concepteur d'organigrammes modifiables

Comment utiliser Layui pour développer un concepteur d'organigrammes prenant en charge la possibilité de modification

Introduction :
Avec le développement rapide de l'informatisation, les organigrammes sont de plus en plus utilisés dans diverses industries. Cependant, la sélection d'éditeurs d'organigrammes actuellement sur le marché est limitée et la plupart sont payants. Cet article explique comment utiliser le framework Layui pour développer un concepteur d'organigrammes modifiables et fournit des exemples de code spécifiques.

1. Introduction à Layui :
Layui est un framework front-end simple et facile à utiliser qui fournit une multitude de composants et d'interfaces pour créer rapidement une interface Web. Il se caractérise par sa légèreté, sa modularité, sa réactivité, etc., ce qui est très adapté au développement rapide d'applications Web simples.

2. Idées de conception :

1. Conception de la structure HTML :
   Nous devons d'abord concevoir la structure HTML du concepteur d'organigramme, y compris la barre d'outils à gauche et la zone de canevas à droite. La barre d'outils est utilisée pour sélectionner différents éléments de l'organigramme, et la zone de canevas est utilisée pour afficher et modifier l'organigramme.

L'exemple de code est le suivant :

<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. Initialisation de la barre d'outils et du canevas :
   Ensuite, utilisez le mécanisme de modularisation JavaScript de Layui pour initialiser la barre d'outils et le canevas. Il est à noter que pour implémenter les fonctions glisser-déposer et de connexion de l'organigramme, nous devons introduire la bibliothèque jsPlumb.

L'exemple de code est le suivant :

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. Réalisation du glisser et de la connexion des nœuds :
   Grâce à l'interface fournie par jsPlumb, nous pouvons réaliser les fonctions de glisser et de connexion des nœuds. Une fois le nœud créé, nous pouvons appeler la méthode makeSource pour le rendre déplaçable et la méthode makeTarget pour le rendre connectable. 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

L'exemple de code est le suivant :

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);
});

Implémentez la ligne de connexion entre les nœuds :

En utilisant la méthode connect du moteur jsPlumb, nous pouvons implémenter la connexion ligne entre les nœuds. Cliquez avec le bouton droit sur le nœud et un menu apparaîtra pour que l'utilisateur sélectionne le nœud cible auquel se connecter.


🎜L'exemple de code est le suivant : 🎜rrreee🎜 3. Résumé : 🎜Cet article présente comment utiliser Layui pour développer un concepteur d'organigrammes modifiables. Grâce à des exemples de code HTML et JavaScript, nous avons implémenté des fonctions telles que l'initialisation de la barre d'outils, le glisser et la connexion de nœuds, ainsi que la connexion de lignes entre les nœuds. Les lecteurs peuvent encore améliorer et étendre le concepteur d'organigrammes en fonction de leurs besoins. J'espère que cet article sera utile aux lecteurs qui utilisent Layui pour le développement d'organigrammes. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!