Child pages
  • Cablecat. Коммутация. JS логика

Skip to end of metadata
Go to start of metadata

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'
  };
  • No labels