AutoCAD у браузері на Angular: як я створюю KulmanLab і чому DXF — це 80% мого болю

Привіт, DOU! Мене звати Володимир, і я належу до тих розробників, які не просто змінили професію, а конвертували свій попередній досвід у код. Сьогодні я — Java Backend Developer. У моєму дипломі написано «Інженер-будівельник», і роки, проведені за кресленнями на «домашніх» кульманах та в AutoCAD, зрештою вилилися у власний хобі-проєкт — KulmanLab.com.

Від цивільної інженерії до саморобного CNC

Мій шлях в IT розпочався, коли я усвідомив: робота інженера-будівельника — це нескінченна рутина типових задач, що вимагає колосальної відповідальності. Матеріальна компенсація — то взагалі окрема історія. На останньому курсі я почав вивчати Java і майже за рік отримав першу омріяну роботу backend-розробника.

Проте інженерна жилка нікуди не зникла. Я захопився CNC-верстатами й навіть зібрав власний на базі контролера Ruida. Підійшов до справи з максималізмом: обрав потужну CO2-трубку, через що і весь верстат вийшов доволі габаритним.

Кожен, хто стикався з лазерною різкою чи фрезеруванням, знає цей біль: шлях від ідеї до готового виробу часто пролягає через «монструозний» софт. Вам потрібно або купувати дорогу ліцензію на AutoCAD/SolidWorks, або страждати з безкоштовними аналогами, що мають жахливий UX. Я поставив собі за мету створити інструмент, який відкривається за секунду, не вимагає реєстрації та дозволяє підготувати файл для верстата просто у браузері.

Філософія проєкту: Сила статичних сторінок та IndexedDB

Головний принцип KulmanLab — максимальна автономність. Проєкт хоститься на Firebase і працює як чиста статична сторінка.

Чому без бекенду?

• Privacy-first: ваші креслення — це ваша власність. Вони не зберігаються на моєму сервері й не передаються мережею. Уся обробка відбувається локально.
• Zero cost maintenance: відсутність серверної логіки дозволяє проєкту існувати без рекламних банерів та підписок. Єдині витрати стосуються купівлі домену.
• Offline-first: за допомогою IndexedDB я реалізував систему автозбереження. Навіть якщо ви випадково закриєте браузер або зникне світло, файли та вся історія змін залишаються в локальному сховищі. Це ваша персональна «хмара» на місці. Щойно ви відкриваєте новий DXF-файл або створюєте проєкт із нуля — робота починається миттєво, а доступ до всіх попередніх файлів зберігається в будь-який момент.

Щоб не вигадувати UX з нуля, я обрав AutoCAD-стиль: команди можна викликати за допомогою клавіатури, а підказки відображаються в терміналі внизу сторінки. Такий підхід може здатися не надто інтуїтивним для новачків, але він значно пришвидшує роботу, адже відпадає потреба щоразу шукати потрібну кнопку на панелі інструментів. З проектом можна ознайомитися kulmanlab.com або просто переглянувши GIF:

Технічний челендж: Геометрія та перформанс

Три роки тому, коли я тільки починав, мене захопили прикладні геометричні задачі: як знайти точку перетину двох ліній, лінії та еліпса тощо. Я шукав математичні фунції фігур, виводив системи рівнянь і реалізовував це в коді. Можливість одразу бачити результат обчислень на фронтенді неймовірно драйвила. Мабуть, це було те, що мені бракувало як backend розробнику.

Для розробки я обрав зв’язку Canvas + Angular. Чому саме Angular? Я був і є далеким від мейнстримного фронтенд-стеку. Мій бекенд-бекграунд підказував, що TypeScript візуально близький до Java, а компонентний підхід Angular дозволяє легко ізолювати кожну «кнопку-команду». Двостороннє зв’язування (bidirectional binding) значно спростило відображення змін під час редагування елементів. Знаю, що такий «грубий» вибір стеку може викликати дискусії, але тоді я витратив на це рішення лише 20 хвилин і одразу перейшов до справи. Найбільше я боявся застрягнути на етапі пошуку «ідеального інструменту» і втратити запал. На щастя, ось уже 3 роки я витрачаю по декілька годин на тиждень і зберігаю високий інтерес до свого хобі.

На старті я очікував, що можливості браузера швидко стануть вузьким місцем (bottleneck). Адже коли на екрані багато об’єктів (ліній, дуг, сплайнів), усе має працювати плавно. Проте виявилося, що простір для оптимізації — практично безмежний. Зараз я переконаний: ноутбук середньої потужності цілком може «перетравлювати» до 1 мільйона елементів без критичних фризів. Після серії базових оптимізацій вже зараз можна працювати з 100 000 обєктів.

Найцікавіший виклик — це Grips (точки керування) та Snapping (об’єктні прив’язки). У такому софті не можна вказати точку «приблизно» — система має миттєво знаходити центр кола, крайню точку сплайна або перетин ліній. Щоб це працювало швидко на великих проєктах, я впровадив просторове індексування. Замість перебору всіх 100 000 об’єктів при кожному русі миші, система шукає у відсортованих масивах за X та Y координатами. Це дозволяє стабільно тримати 60 FPS навіть на складних кресленнях.

Для аналітики я використовую Google Analytics із кастомними подіями. Це дозволяє розуміти, які інструменти популярні, не порушуючи приватності вмісту самих файлів користувачів.

DXF: Формат, що прийшов із пекла

Багато хто вважає, що розпарсити DXF — це і є головна проблема. Насправді це найпростіша частина. Справжнє пекло починається на етапі експорту: коли потрібно зібрати валідний файл, який без помилок прочитає AutoCAD або примхливий контролер CNC-верстата.

Нижче — шматок валідного файлу. Формат складається із записів key-value, де кожен елемент займає окремий рядок. Наприклад, ключ 4, значення — пусте, далі ключ 1001 і значення AcadAnnotative.

0
STYLE
5
DC
330
3
100
AcDbSymbolTableRecord
100
AcDbTextStyleTableRecord
2
Annotative
70
0
40
0.0
41
1.0
50
0.0
71
0
42
0.2
3
arial.ttf
4

1001
AcadAnnotative
1000
AnnotativeData
1002
{
1070
1
1070
1
1002
}

Як бачите, в Autodesk не бачать жодних проблем у дублюванні однакових ключів для одного об’єкта, а порожні рядки як значення — це взагалі «стандарт». Порядок записів — важливий, але не завжди:) Формат виглядає максимально хаотичним і непередбачуваним.

Чому це складно? Головна підступність DXF — у так званих групових кодах. Один і той самий код може означати координату X для лінії, радіус для кола або назву шару, залежно від контексту та секції. До того ж AutoCAD надзвичайно чутливий до порядку цих кодів. Варто переплутати послідовність запису параметрів у секції HEADER або TABLES — і файл перетворюється на сміття, яке не відкриє жоден редактор.

Ще один виклик — підтримка Splines (сплайнів). Якщо звичайна лінія описується двома точками, то сплайни потребують контрольних точок (CV), вузлів (knots) та ваг. Документація Autodesk описує це лише поверхнево, а на практиці доводиться «реверс-інжинірити» файли, створені в AutoCAD, щоб зрозуміти, чому ваш сплайн у браузері виглядає ідеально, а після експорту перетворюється на хаотичну криву.

Можливості KulmanLab сьогодні: від MVP до робочого інструменту

Що вже працює:

• Повна підтримка 2D-примітивів: лінійні відрізки, кола, дуги, еліпси та полілінії. Недостатню увагу приділено тексту, адже коректне відображення шрифтів у CAD-системах — це окремий квест. Працюватиму над цим в майбутньому.
• Складні сплайни: це була моя маленька перемога. Я реалізував два режими побудови кривих — Fit (проходження чітко через задані точки) та Control Vertex (CV) (керування кривою за допомогою контрольного полігона). Це критично важливо для моделювання складних контурів під лазерну різку.
• Інструменти трансформації: класичний набір, без якого неможливе проектування — Move, Copy, Scale, Mirror та Rotate. Усі вони працюють з урахуванням об’єктних прив’язок.
• Структурування проєкту: реалізовано повноцінну роботу з шарами (Layers). Ви можете керувати видимістю, кольорами та типами ліній, що дозволяє працювати зі складними кресленнями, де потрібно відокремити контури різу від ліній гравіювання.
• Точність та аналітика: система автоматично знаходить точки перетину об’єктів та дозволяє проводити прецизійне масштабування — базові речі для підготовки креслення до виробництва.

Що далі? (Roadmap) Проєкт розвивається паралельно з моєю основною роботою, тож плани амбітні:

1. Вдосконалення Snapping: зробити об’єктні прив’язки ще більш «розумними» та швидкими (зокрема, додати полярне відстеження).
2. Розширення функціоналу: додавання інструментів для проставлення розмірів (Dimensions) та виноски (Leaders).
3. Експорт у PDF: хоча основний фокус — це DXF для виробництва, можливість швидко зберегти креслення в PDF для друку чи звіту є критично необхідною.
4. Покращення UX: я постійно аналізую кастомні події з Google Analytics, щоб зрозуміти, де користувачі «спотикаються», і зробити інтерфейс зручнішим.

Головні юзкейси: Для кого і навіщо?

KulmanLab не намагається вбити AutoCAD. Моя мета — створити швидкий «швейцарський ніж» для тих, кому потрібно виконати конкретну задачу тут і зараз, без очікування, поки завантажиться важка IDE для креслення.

Я бачу два основних напрямки використання:

1. CNC-спільнота та лазерна різка: Це майстри та ентузіасти, яким потрібно швидко відкрити DXF-файл, перевірити габарити, підправити контур або видалити зайві елементи перед відправкою на верстат.
2. Студенти та технічна освіта: Уявіть ситуацію: потрібно швидко накидати інженерну схему для курсової чи лабораторної роботи. Замість того, щоб шукати «крякнутий» софт чи отримувати навчальну ліцензію на один семестр, студент може зайти в браузер, створити схему й одразу експортувати її у форматі PNG/JPEG високої роздільної здатності. Це значно швидше та простіше.

Чому це зручно?

• Zero-latency: Ви відкриваєте сайт і за секунду вже працюєте.
• Універсальність експорту: Крім «сирого» DXF, ви отримуєте чітке графічне зображення для вставки в текстові документи (Word/Google Docs).
• Відсутність бар’єрів: Не потрібно реєструватися, підтверджувати пошту чи прив’язувати карту.

AI як каталізатор та погляд у майбутнє

Розробка KulmanLab триває вже три роки, але саме останні пів року стали вирішальними. Поява потужних AI-асистентів дозволила мені значно пришвидшити розробку. Для соло-розробника це стало справжнім «підсилювачем», який перетворив затяжний процес на стрімкий шлях до релізу.

У планах ще багато роботи:

• Впровадження інструментів для проставлення розмірів (Dimensions) та виносних написів.
• Розширення бібліотеки стандартних елементів.
• Покращення роботи привязок.
• Підтримка додаткових форматів (SVG/PDF) .

Я вірю, що надмірна універсальність — це шлях до компромісів, які роблять софт перевантаженим і незручним. Тому KulmanLab залишається вірним своїй ідеї: тільки 2D, тільки швидкість, тільки браузер. Жодної обов’язкової реєстрації, жодних рекламних банерів — лише чистий інструмент для роботи.

Спробувати інструмент: kulmanlab.com

Буду радий почути фідбек від колег-розробників та інженерів у коментарях! Чи стикалися ви з DXF у своїх проєктах? Які інструменти використовуєте для швидкого редагування креслень?

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті