Dgrm.net это редактор блок-схем.
У dgrm.net нет лишних кнопок;
Редактор быстро грузится;
Работает на пк и мобильных;
Умеет открывать png.
Dgrm.net использует SVG. Я разбирался с производительностью SVG и случайно понял как сократить исходный код. В результате кода стало в 2 раза меньше.
Началось со страницы тестирования SVG
Хотелось определить как много SVG фигур может перемещать браузер. Тестовый, одноразовый код писал быстро, не задумываясь о красоте.
В цикле создал круги.
Так выглядело перемещение:
const canvasPosition = { x: 0, y: 0 };
svg.addEventListener('pointermove', evt => {
canvasPosition.x += evt.movementX;
canvasPosition.y += evt.movementY;
canvas.style.transform =
`matrix(0, 0, 0, 0, ${canvasPosition.x}, ${canvasPosition.y})`;
});Листинг 1. Простая функция перемещения элемента <g> canvas. canvas содержит вложенные круги.
Затем добавил zoom. Потом, для тестов на мобильных, добавил поддержку пальцев.
1/4 редактора блок-схем поместилась в одном файле
Получилась тестовая страница которую можно двигать и zoom-ить. Страница работает и на ПК и на мобильных. Весь код в одном файле. Файл занимает всего 4 экрана. 200 строк хватило на 1/4 функционала редактора блок-схем.
Доработанная версия перемещения и zoom-a SVG на GitHub.
На тот момент в dgrm.net было 60 файлов. Сложная структура, лишние абстракции. Грязный тестовый код оказался лучше.
Теперь dgrm.net следует правилу “как можно проще и ближе к платформе”. Файлов стало в два раза меньше, структура проекта упростилась.
Как поддержать проект
Комментарии (12)
Cherezzabo
29.12.2022 09:58Статья показалась тизером к success-story как вы эпично зарефакторили MVP. Как будто бы не хватает каких-то наглядных и конкретных примеров, как было и как стало хорошо в исходном коде. Нет пояснений почему решили отказаться от TypeScript? Или отчего в процессе разработки MVP без использования фреймворков было много бойлерплейт кода и абстракций, от которых удалось впоследствии отказаться?
К слову, у вас в package.json осталась зависимость "typescript": "^4.8.4", которая теперь лишняя в вашем проекте, насколько я понял.
P.S. Что за тулза вначале статьи, которая считает количество строк кода в проекте?
Volkodlak
29.12.2022 10:10PowerShell же, с Count Lines of Code
Alex_BBB Автор
29.12.2022 10:15+1не хватает каких-то наглядных примеров, как было и как стало.
Относитесь как к анонсу о ходе проекта.
Как к анонсам типа:
"Вышел ангуляр 100. Мы отказались от RxJS и вернулись к Promise. Ангуляр стал меньше на 20%".
Или:
"Вышел Афон 20с. Айфон 20с на 3 мм тоньше Айфон 19".Нет пояснений почему решили отказаться от TypeScript?
в package.json осталась зависимость "typescript": "^4.8.4", которая теперь лишняя
Не лишняя. typescript используется при разработке для проверки типов.
В package.json "tscheck": "node_modules\\.bin\\tsc --noEmit -p ./jsconfig.json",Что за тулза вначале статьи, которая считает количество строк кода в проекте?
https://github.com/AlDanial/cloc
vladvul
29.12.2022 10:07что мне не хватает в диаграммах это возможности легко подписывать стрелочки и самое главное точки соединения, чтобы написать например ip адрес снаружи точки присоединения, и имя демона в внутренней стороны блока. Уже две декады жду такую программу!
itGuevara
29.12.2022 11:53+1Не понятна конечная цель редактора dgrm.net. Догнать drawio? Это видимо не скоро. Но чем-то нужно привлечь интерес к dgrm.net. Видимо можно попробовать добавить что-то, чего нет в drawio, а например есть в visio, например, интеграцию с Exсel или google sheets.
Можно добавить специальные шаблоны (нотации), например, VAD или EPC. А "конек" был бы аналог: SmartDesign, ARIS
Alex_BBB Автор
29.12.2022 13:13Идея такая:
Быстро рисовать блок-схемы симпатичного вида. Минимум кнопок.Например Snipping Tool. Удобный инструмент для скриншотов. Не пытается стать Photoshop-ом.
Draw.io не ориентир.
VAD, EPC, BPMN в планах.
>SmartDesign, ARIS
Сделать BPM систему? Dgrm.net это часть BPM системы.
Видео презентация https://vimeo.com/632994077
Демо конструктора форм https://alexeyboiko.github.io/FormDesignerDemo/
Код dgrm.net как раз используется для описания состояний из видео презентации.itGuevara
29.12.2022 13:51Странички Видео презентация и Демо конструктора форм открываются (хром), но в первой - темный экран с видео, а во втором непонятно, какие кнопки жать.
SmartDesign, ARIS, например, для EPC, это когда рядом с "полем отрисовки" есть табличка, в ней набираешь имя функции (в столбце функции) и она автоматом рисует элемент "функция" с указанным именем и наоборот: нарисовал в схеме, а она в таблицу подставляет нарисованное (в соответствующее поле). Также с другими объектами ЕРС: события и т.п.
Т.е. задал алгоритм в табличном виде, а SmartDesign автоматом его отрисовал. Конечно для BPM - системы этого не достаточно, это просто помощь в отрисовке для "очень быстрого и простого создания схем". Идеальным был бы импорт \ экспорт такой таблицы в Excel.
Fen1kz
Было бы неплохо ещё хоть как-то описать что именно вы это сделали.
Ещё не очень понятен результат, код в итоге сократился? Есть метрики какие-то, насколько, например, в файловом в соотношении уменьшился исходный код?
Alex_BBB Автор
Сократился в 2 раза
Файлов стало в 2 раза меньше