Онлайн-додаток для малювання okso.app (та що з ним робити)

Про додаток

Нещодавно я запустив мінімалістичний онлайн-додаток для малювання okso.app.

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

Вийшло ось що (https://okso.app)

Онлайн-додаток для малювання

Ось YouTube-версія GIF-файлу з okso.app демо про всяк випадок.

Ієрархічна структура ескізів

Ще я хотів надати можливість організувати ескізи в ієрархічну структуру «картинка-в-картинці», бо інші подібні додатки типу Excalidraw або Tldraw дають можливість створювати лише плоский список із малюнками.

Ієрархічна структура полегшує навігацію, та дозволяє не так сильно стресувати при пошуку у разі якщо таких малюнків багато.

До того ж та імплементація «картинка-в-картинці», яка виконана в okso.app надає можливість використовувати такі візуальні прийоми, як «кодінг інформації за кольором» (щось червоне, а щось чорне) та «кодінг за розміром» (більший розмір — більший акцент). Крім того, за допомогою ліній та стрілок можна показати як один ескіз залежить від іншого.

На прикладі нижче показано, що користувач може переходити з оного ескізу/сторінки в інший, натиснувши на посилання

Ієрархічна структура ескізів

Приклад: Ескізи структур даних

Першою концепцією, яку я спробував пояснити за допомогою простих ієрархічних ескізів, були структури даних.

Вийшов ось такий Data Structure Sketches інтерактивний ескіз

Ескіз Структур Даних

Ось YouTube-версія GIF-файлу з ескізом Структур Даних про всяк випадок.

Звичайно, охоплено не всі структури даних. І, звичайно, це не вичерпний матеріал, а скоріше шпаргалка, яка створить візуальні підказки та асоціації для наступних структур даних:

  • Зв'язаний список
  • Двобічно зв'язаний список
  • Черга
  • Стек
  • Хеш-таблиця (з вирішенням хеш-колізій)
  • Дерево (включаючи бінарне дерево пошуку)
  • Граф

Кожну сторінку (а точніше кожне посилання на сторінку) на ескізі можна натиснути, тому ви можете заглибитися в структуру даних, яка вас цікавить. Наприклад, «Heap → Max Heap», «Heap → Min Heap», або «Heap → Array Representation».

Ескізи розділені на так звані сторінки, щоб їх було легше сприймати, щоб користувачі зосереджувалися на одній концепції за раз.

Кожна сторінка містить посилання на приклади JavaScript коду який реалізує певну структуру даних.

Ось кілька прикладів ескізів

Двобічно зв'язаний список

Двізв'язаний список

Дерево

Дерево

Хеш-таблиця

Хеш-таблиця

Trie

Trie

Граф

Граф

Повний список ви можете знайти в ескізі Структури Даних.

Проблеми

Додаток знаходиться в Беті. Є багато недопрацьованих моментів. Одна з проблем, яку мобільні юзери, мабуть помітять першою, це некоректне збільшення канвасу. Інша проблема — швидкість роботи додатка, наприклад, при збільшенні/зменшенні або перетаскуванні канвасу. Але це в роботі, буду фіксити.

Зворотній зв'язок

Буде цікаво почути в коментах, як вам додаток (в його ранній стадії), може будуть якісь цікаві ідеї для нього, або занйдені баги.

Ті кому цікавий подальший розвиток додатку можуть підписатися на апдейти продукту, або зафаловити OkSo в Twitter.

👍ПодобаєтьсяСподобалось14
До обраногоВ обраному5
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Вузький шрифт не завжди читається добре. Було б непогано додати кілька шрифтів різної ширини. Додати лінії з готовими стрілками на кінці. Бо ставити ще по 2 штрихи кожного разу не зручно, як і редагувати потім це все. Додати українську мову для збільшення присутності української мови в Інтернеті =)

Додати лінії з готовими стрілками на кінці.

стрілки є — можна вибрати в меню справа або хоткей «A»

Дякую за фідбек

Так, я планую додати (feedback.okso.app/feedback) підтримку інших шрифтів також.

Стрілки вже є готов. В Menu > Preferences > Tools є перелік додаткових форм/shapes, серед яких є Прямокутник, Овал та Стрілка.

Локалізацї також в плані, треба буде додати

Дуже класно зроблено! Приєднуюся до бажаючих почитати про реалізацію(:

Дуже круто! Було б классно перетворювати фріхенд на геометричну фігуру, коли намалював щось, і робиш холд ЛКМ. Так зроблено в Goodnotes, дуже зручно.

Також помітив падіння FPS з ввімкненим Grid в Firefox на MacOS

Дякую за ідеї!

Додав конвертацію фріхенда в фігуру в роадмап 👍🏻

Про FPS то зараз найбільша проблема для мене. Пробую вирішити...

Круто
Особливо сподобалось згладжування ліній під час малювання і те, що кожен об’єкт після того, як його намалювали, стає власне об’єктом і його можна крутити, масштабувати та видалити.

Ідеї щодо того, що можна було б додати
— масштабування із збереженням пропорцій/aspect ratio
— групування/розгрупування об’єктів
— редагування ламаних і/або сплайнів
— розшарювання малюнку з іншими людьми
— конектори між об’єктами — такі собі «липкі лінії»

З того, що знайшов — як поредагувати маленьку стрілку? Якщо стрілка велика, то при кліку з’являються кружечки/хендли для перетягування, але якщо стрілка мала, то тих хендлів нема.

Так, згладжування ліній працює круто завдяки perfect-freehand (тут є демка цієї ліби)

Також так, редагування кожного об'єкта то зручно. Весь малюнок/скетч — це звичайний JSON (наприклад файл data-structures.okso). Та над об'єктами того JSON-у вже проводити маніпуляції.

Дякую за ідеї!

  • Масштабування із збереженням пропорцій вже можливе якщо зажати Shift і тягнути
  • Групування — так, це в планах, треба буде зробити 👍🏻
  • Редагування кривих — це теж гарна ідея, але наразі із perfect-freehand кривими це не дуже вийде, треба буде новий Curve Shape додати
  • Розшарювання малюнку — це теж цікава ідея і вона в плані. Прикольно б було ще розширити скетч, вставити картинку, наприклад, в блог, та щоб при апдейті малюнку в okso.app всі зображення в блогах теж оновилися автоматично.
  • конектори між об‘єктами зараз є у вигляді стрілок, але так, вони не конфігуруються — це цікаво було б додати
  • І так, дійсно, для маленьких об‘єктів хендли пропадають (мені здається якщо сильно збільшити малюнок, то вони можуть з’являтися, але так, цей флоу можна покращити

Дуже крутий додаток. Чи можна буде очікувати у майбутньому технічні статі по реалізації ?

Конкретних планів зараз немає, але виглядає доволі цікавим написати статтю про імплементацію, корнер-кейси з перформансом (якщо мені ще вдасться їх вирішити), переваги Progressive Web App, як хендлити апдейти в React стейті якщо вони дуже часті і в реал-таймі (наприклад як оновлення стейту компонентів під час руху курсора), та інше...

А зараз, якщо коротко, то технічно проект використовує наступне:

  • TypeScript
  • react (поки що 17-й)
  • @tldraw/core — SVG canvas
  • perfect-freehand — гарні ліні при малюванні від руки (digital ink), тут є прикольна демка
  • @state-designer/react — прикольна штука, спробував хендлити стейт додатку, як стейт-машини
  • idb-keyval — зручний враппер для роботи із IndexedDB
  • browser-fs-access — враппер для доступу к файлам
  • workbox-core — для PWA
  • baseui — як оснонвий стайлінг фреймворк
  • react-icons — дуже багато різних іконок
  • @radix-ui/react-dropdown-menu — непогане спливаюче меню із можливістю мати під-меню
  • webfontloader — зручний пакет, дозволяє кастомні фонти підгружати та чекати, поки вони будуть доступні
  • ...

офігенно! дякую автору!

Чудово. Навіть у беті — досить зручно. Спробую використовувати при поточному навчанні. Дякую.

Підписатись на коментарі