Рисование блок-схемы на основе jsplumb+vue

Vue.js

Без лишних слов, давайте начнем с визуализаций:

демонстрационный адрес:код-роуд fly.GitHub.IO/ отвес-в UE…

На данный момент поддерживаемые функции: 

  • Перетаскивание узлов (1. Перетащите левый узел на холст, чтобы добавить узел; 2. Перетащите узел на холст)
  • Добавьте провода между узлами
  • Холст поддерживает масштабирование (зум колесиком, сочетания клавиш +, - масштабирование)
  • Общее панорамирование холста
  • Узел, удаление соединения (правый клик по узлу для удаления, двойной щелчок по соединению для удаления)
  • Редактирование узла (дважды щелкните узел, отредактируйте имя узла)
  • Руководства по выравниванию узлов

Функции последующей поддержки:

  • Функция выбора кадра, когда вы нажимаете Ctrl, вы можете нажать
  • Добавить функцию плавательной дорожки (размер плавательной дорожки можно изменить)

Проект возникает из проекта внутри компании, и необходимо нарисовать блок-схему. До этого у меня было аналогичное требование, используя G6-редактор, но так как официальная документация G6 слишком грубая, а high-level версия не high-source, то весь процесс болезненный, и большинство функций свои .Попробовал немного. Все второй раз, чтобы удовлетворить этот спрос, после некоторого анализа и сравнения я решил отказаться от G6 и выбрал jsplumb. Подводя итог, jsplumb имеет следующие преимущества:

  1. Бесплатно и доступно по лицензии MIT. непосредственно изсайт jsPlumb на гитхабеЗагрузите фреймворк, который также можно установить через npm. (На официальном сайте jsplumb есть бесплатная и платная версии, но бесплатная версия уже может удовлетворить мои потребности)
  2. Узлы рисуются сами по себе, стиль самоуправляемый, гибкость высокая. как рисовать, как рисовать
  3. Точно контролируемые параметры элементов диаграммы и соединений

Предварительная подготовка:

  1. Установить зависимости

    npm install jsplumb --save npm install panzoom --save

Представить на соответствующей странице:

import { jsPlumb } from "jsplumb"
import panzoom from "panzoom"

Среди них panzoom может реализовать функции масштабирования и панорамирования холста.

  2. Инициализировать холст

fixNodesPosition, путем расчета положения узла, каждый раз при загрузке данных блок-схема может отображаться в центре в целом. Вы должны дождаться рендеринга всех узлов перед созданием экземпляра jsplumb, иначе возникнет проблема с ненахождением узлов.

mounted() {    this.jsPlumb = jsPlumb.getInstance();    this.fixNodesPosition()    this.$nextTick(() => {      this.init();    });  }


init() {    this.jsPlumb.ready(() => {      // 导入默认配置      this.jsPlumb.importDefaults(this.jsplumbSetting);      //完成连线前的校验      this.jsPlumb.bind("beforeDrop", evt => {        let res = () => { } //此处可以添加是否创建连接的校验， 返回 false 则不添加；         return res      })      // 连线创建成功后，维护本地数据      this.jsPlumb.bind("connection", evt => {        this.addLine(evt)      });      //连线双击删除事件      this.jsPlumb.bind("dblclick",(conn, originalEvent) => {        this.confirmDelLine(conn)      })      //断开连线后，维护本地数据      this.jsPlumb.bind("connectionDetached", evt => {        this.deleLine(evt)      })      this.loadEasyFlow();      // 会使整个jsPlumb立即重绘。      this.jsPlumb.setSuspendDrawing(false, true);    });    this.initPanZoom();  },

В процессе инициализации вы можете добавить события проверки к таким действиям, как создание и удаление соединения.

JSPLumbSetting — это базовая конфигурация для jsplumb:

jsplumbSetting = {  grid: [10, 10],  //节点移动时的最小距离  // 动态锚点、位置自适应  Anchors: [    "TopCenter",    "RightMiddle",    "BottomCenter",    "LeftMiddle"  ],  Container: "flow",  //画布容器id  // 连线的样式 StateMachine、Flowchart,有四种默认类型：Bezier（贝塞尔曲线），Straight（直线），Flowchart（流程图），State machine（状态机）  Connector: ["Flowchart", { cornerRadius: 5, alwaysRespectStubs: true, stub: 5 }],  // 鼠标不能拖动删除线  ConnectionsDetachable: false,  // 删除线的时候节点不删除  DeleteEndpointsOnDetach: false,  // 连线的端点  // Endpoint: ["Dot", {radius: 5}],  Endpoint: [    "Rectangle",    {      height: 10,      width: 10    }  ],  // 线端点的样式  EndpointStyle: {    fill: "rgba(255,255,255,0)",    outlineWidth: 1  },  LogEnabled: false, //是否打开jsPlumb的内部日志记录  // 绘制线  PaintStyle: {    stroke: "#409eff",    strokeWidth: 2  },  HoverPaintStyle: { stroke: "#ff00cc", strokeWidth: 2},  // 绘制箭头  Overlays: [    [      "Arrow",      {        width: 8,        length: 8,        location: 1      }    ]  ],  RenderMode: "svg"}

Git-адрес проекта:GitHub.com/code-road Флорида…

Справочный документ:GitHub.com/Ван Дуань По ах…

                   jsplumbtoolkit.com

Шекспир сказал, товарищ, который не любит после прочтения, не является хорошим товарищем.

Вам также может понравиться:

Категории