Реализовать редактор элементов для игры (javascript, canvas)

Необходимый функционал:

• Указать радиус взаимодействия точек
  • ползунок на канвасе в масштабе 1:1 (чтобы сразу можно было оценить масштаб фигуры)
• Добавить точку
  • точка отображается в виде круга (диаметр 20..30 пикселей)
• Действия с точкой
  • возможность перемещать точку
  • удалить точку 
    • также удаляются линии связи с этой точкой (линии связи смотри ниже)
  • зафиксировать точку (нельзя двигать, не меняет положение при расчетах)
  • рядом с точкой отображается значок что точка зафиксирована
  • отобразить радиус
    • окружность пунктиром (радиус - “радиус взаимодействия точек” см. выше)
    • радиус автоматически отображается при наведении на точку
  • добавить линию связи
    • указывается вторая точка с которой устанавливается связь
    • связь отображается в виде линии между точками 
• Действия с линией связи
  • удалить связь
  • зафиксировать длину (при перемещении точки меняется угол)
  • зафиксировать угол (при перемещении точки меняется длина)
  • рядом с линий отображается:
    • включенные опции фиксации 
    • процент соответствия длины линии заданному радиусу взаимодействия точек
    • цветовой индикатор соответствия длины
      • зеленый: более 99.5%
      • желтый: более 98%
      • оранжевый: более 95%
      • красный: менее 95%
• Выровнять связи
  • Процесс:
    • Выбирается целевая точка которую необходимо переместить
    • Все связи этой точки должны быть свободными (угол и длина)
    • Выбираются 2 опорные точки относительно которых необходимо выровнять позицию
    • На пересечении окружностей (по “радиусу взаимодействия точек”) предлагается два варианта размещения (смотри доп материалы рис 1)
      • При клике на предложенное размещение целевая точка перемещается в него
    • Предложить линию перемещения
      • линия перпендикулярна линии проведенной между опорными точками
      • линия проходит через центр линии между опорными точками
      • при клике на линию целевая точка перемещается на нее 
        • при перемещении целевой точки она перемещается только по линии перемещения
• Экспорт
  • экспорт координат и связей точек в формате JSON

{

dots: [

    {

        id [int],

        x [float],

        y [float]

},

...

],

links: [

    [dot_id_1, dot_id_2],

        ...

]

}

• Требования и пожелания к оформлению:
  • черный фон
  • удобный и понятный интерфейс взаимодействия с элементами управления
  • значки и элементы управления не налазят друг на друга и легко читаются