JS логика рисования коммутации представлена скриптом commutation.js.
Для отрисовки на canvas'e используется библиотека Raphael.js (https://github.com/DmitryBaranovskiy/raphael/)
Внутри логика отрисовки разделена по функционалу на отдельные объекты:
| ACableDrawer | Отрисовка кабелей и волокон кабеля |
|---|---|
| AInformation | Вывод дополнительной информации о волокнах |
| ACableColorPalette | Работа с цветовой схемой кабеля |
| ALinkManager | Хранение и управление соединениями между волокнами |
| ALinkDrawer | Отрисовка соединений волокон |
| Link | Функция-конструктор для соединения. Отвечает за отрисовку соединения |
Входные данные
Структура входных данных для кабеля:
var cable = {
id : 'string',
image : {
modules : int,
fibers : int,
color : 'string'
},
meta : {
name : 'string', // Localized name for cable
position : 'enum', // 'bottom', 'top', 'left', 'right'
fibers : { id : fiberObject }
}
}
Структура объекта волокна:
var fiberObject = {
id : int,
connected: {
name : 'string',
length: 'string'
};
Константы и опции
scale По умолчанию равна 2.
SCHEME_OPTIONS = {
SCALE : scale,
CABLE_WIDTH : 25 * scale,
CABLE_HEIGHT_MARGIN : 5 * scale,
MODULE_WIDTH : 5 * scale,
FIBER_WIDTH : 5 * scale,
FIBER_HEIGHT : 25 * scale,
FIBER_MARGIN : 5 * scale,
ROUTER_WIDTH : 25 * scale,
ROUTER_HEIGHT_MARGIN: 5 * scale,
CANVAS_BASE_SIZE : 65,
CABLE_COLOR : 'black',
ROUTER_COLOR : 'green',
FONT : 'Roboto',
FONT_SIZE : 13,
FONT_COLOR : 'black'
};