Javascript-форум - редактор блоксхем на js

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - редактор блоксхем на js (https://javascript.ru/forum/dom-window/34073-redaktor-blokskhem-na-js.html)

редактор блоксхем на js

есть такая задача :

Цитата:

Создать простой редактор блок-схем:

1. Создание блоков

- Пользователь выделяет регион на экране, по размерам этого региона
создаётся блок (только прямоугольные блоки)
- У пользователя должна быть возможность подписать блок
- Подписи должны быть внутри блока
- Должна быть возможность перемещать блоки

2. Создание связей между блоками

- У пользователя должны быть возможность указывать связь между блоками
- Связь отображается в виде линии
- Линии могут пересекаться между собой и проходить через другие блоки
- При перемещении блоков, связь между блоками не должна нарушаться

без использования сторонних фреймворков
(накрайняк jquery)
куда рыть
примеров в нете не нашел

Цитата:

Описание (допущения, ограничения, инструкция и т.п.)

нужна инструкция, как оформить талмуты
что такое : допущения, ограничения, инструкция

Блоки это обычные html div,

используем
jquery - общий функционал
jquery ui dragable - для перемещения блоков
jquery ui resize - для изменения размеров блоков

при перемещении блока нужно отловить событии и переместить все связанные линии следом.
при удалении блока нужно отловить событие и удалить все связанные через таргет или source линии.

связи реализуются силами SVG,
один из примеров SVG линий из библиотеки raphael http://raphaeljs.com/graffle.html

схема описывается как граф. (использовать обьекты или массивы для описания нод и рёбер, это скорее дело вкуса)

model={
    node:{
         "1":{x:10,y:10,width:50,height:20,text:"я первый блок"},
         "2":{x:110,y:110,width:50,height:20,text:"я второй блок"}
    },

    edge:{
         "3":{source:"1", target:"2" }
    }
}