Connecting arrows for block elements

    Description

    Small js library (12kb) (github) designed to help connect block elements by arrows on your web page. May be used for informational, demonstration purposes, for construction of graphs or diagrams. Arrows plotting going on canvas located on a common parent.


    Using

    Example 1

    canvas arrows for block elements canvas arrows for block elements

    Methods

    Method Parameters Description
    $cArrows(commonParentID, [options])
    • commonParentID (string) – common parent for all interconnected blocks
    • options (object) (optional) – common settings for all drawn arrows;
    Initializes 'canvas', for subsequent drawing arrows;
    Returned value: module instance for drawing arrows (this);
    .updateOptions(newOptions)
    • newOptions – a new instance of the settings
    Sets a new settings for drawing arrows;
    Returned value: this;
    .arrow(from, to, [options])
    • from (string) – draw arrows from elements selector;
    • to (string) – draw arrows to elements selector;
    • options (object) (optional) – options for currently arrows;
    Draws an arrow (arrows) from-to blocks selectors.
    Returned value: this;
    * each arrow is placed in the internal storage.
    .arrows(arrowArray)
    • arrowArray – array of arrows {from, to, [options]} [];
    Draws arrows from an array similar to .arrow();
    Returned value: this;
    .clear() Clears canvas painted by arrows;
    Returned value: this;
    .draw() Paints arrows on canvas (were previously placed in the internal storage arrow() method);
    Returned value: this;
    .redraw() Redraws the arrows on canvas, (like clear().draw());
    Returned value: this;

    Settings

    options = {[base], [arrow], [render]}

    Parameter Type Default value Description
    base object Basic module settings container
    base.canvasZIndex int -10 z-index of creating canvas
    base.alertErrors bool true Needs to show error messages.
    base.putToContainer bool true Put metadata of created arrows in internal storage (needs to redraw: redraw(), draw() methods).
    base.canvasClass string Set Class of created canvas element.
    base.canvasId string Set Id of created canvas element.
    arrow object Settings of arrows type and view.
    arrow.connectionType string 'rectangleAuto' Connection type, of the following values:
    • 'rectangleAuto' - from the edge of rectangle (block), the angle is calculated automatically;
    • 'center' - from the center of the block;
    • 'ellipseAuto' - from the edge of the ellipse (circle), the angle is calculated automatically;
    • 'side' - from the side, you must specify the next parameters arrow.sideFrom, arrow.sideTo, available values: 'top', 'right', 'bottom', 'left';
    • 'rectangleAngle' - from the side of the rectangle specified in degrees (0-360), angle specified in the additional fields arrow.angleFrom, arrow.angleTo;
    • 'ellipseAngle' - from the side of the ellipse specified in degrees (0-360), angle specified in the additional fields arrow.angleFrom, arrow.angleTo;
    arrow.arrowType string 'arrow' Specifies the type of arrows:
    • 'line' - line;
    • 'arrow' - arrow;
    • 'double-headed' - double-headed arrow;
    arrow.arrowSize int 9 Arrow size in pixels;
    render CanvasContext Сanvas drawing settings, is standard canvas context propertys:
    render.lineWidth int 2 Line width;
    render.strokeStyle color '#2D6CA2' Arrow color;
    render.* Other possible values are defined in canvas context:
    • shadowColor
    • shadowBlur
    • shadowOffsetX
    • shadowOffsetY
    • lineJoin
    • all propertys

    Connection types

    Example 2

    rectangleAuto
    center
    ellipseAuto
    side: 'right'
    rectangleAngle: 0
    ellipseAngle: 45
    rectangleAuto
    center
    ellipseAuto
    side: 'left'
    rectangleAngle: 180
    ellipseAngle: 225

    Example 3

    CEO
    Vladimir Evstegneev
    COO
    Ruslan Dobrolubov
    Sales
    Stepan Fedotov
    Konstantin Shishkin
    Finances
    Mariya Nikolaeva
    Elena Abashina
    Munira Abdinazarova
    IT
    Mikhail Soloviev
    Tasya Hlebnikova
    Logistic
    Leonid Voroncov

    License: GNU GPL

    Download GitHub Donate

    comments:

    • avatar
      5/18/2014 from Рамиль
      почему у меня не перетаскивается?
    • avatar
      5/19/2014 from michael
      Привет Рамиль! =) За перетаскивание отвечает jQuery Draggable, нужно подключить плагин и добавить всего один обработчик на перетаскивание, пример можешь увидеть в исходном коде странице после тега DEMO SCRIPTS
    • avatar
      6/22/2015 from Анна
      Добрый день. Хотелось бы при щелчке на стрелку удалять её. Каким образом можно это сделать? Если удалять из массива стрелок и перерисовывать, как найти именно нужную стрелку?
    • avatar
      5/20/2016 from Александр
      Очень круто сделано! Работать с arrows.js интуитивно удобно, он легкий, и функционал на высоте! Ман ты просто красава!
    • avatar
      2/9/2017 from alex
      А как удалять определенные стрелки? Допустим, по клику. Заранее спасибо!
    • avatar
      8/29/2017 from Victor
      Привет. Все круто, не хватает только одной функции - удалить стрелку или полностью перезаписать массив стрелок. при переобъявлении .arrows массив стрелок накладывается, а не перезаписывается, пришлось убирать ненужную стрелку на лету через хак: arrowsDrawer.CanvasStorage[2].splice(i, 1);
    • avatar
      9/27/2017 from Aleksey
      Добрый день! Пытаюсь интегрировать в Битрикс 24, но не прорисовываются стрелки. Если удалить на странице require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); то все прорисовывается и отображается. Как понять что в header.php мешает прорисовке стрелок ?
    • avatar
      9/27/2017 from aleksey
      Выяснил, что стрелки прячутся под background-color. Как их сделать поверх ?
    • avatar
      10/3/2017 from Алексей
      Приветствую! Пытаюсь интегрировать в APEX, но похоже та же проблема, что и у aleksey - стрелки не прорисовываются (видимо где-то прячутся).
    • avatar
      1/26/2018 from dr.death
      Хотелось бы ломанные-прямоугольные стрелки

    leave comment: