@js_ru
JavaScript — русскоговорящее сообщество

Рекомендуем сразу отключить уведомления Правила: http://bit.ly/our_etiquette См. также: @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

3006 members

Архив канала @js_ru 22 января 2017 г.

06:41:48 ПП
User 258987045
тут есть те, кто шарит в саблайм тексте?
07:07:00 ПП
User 151091411
User 258987045
тут есть те, кто шарит в саблайм тексте?
не, только те кто в нем кодят, и это не я
07:08:16 ПП
User 258987045
мб в вебшторме шаришь?
07:11:56 ПП
User 151091411
у меня атом
07:12:07 ПП
User 151091411
и мне его штатных функций за глаза хватает
07:12:12 ПП
User 151091411
ну пару плагинов еще добавил
07:12:39 ПП
User 258987045
я прост решил реакт потыкать
07:12:47 ПП
User 258987045
а саблайм как мразь
07:12:53 ПП
User 258987045
синтаксис не подсвечивает
07:13:10 ПП
User 258987045
вебшторм еще чото делает
07:13:13 ПП
User 258987045
но такое себе
07:13:41 ПП
07:13:54 ПП
User 151091411
попробуй атом :)
07:14:23 ПП
User 258987045
он норм?
07:14:50 ПП
User 151091411
его фейсбук пишет, как и реакт :)
07:14:57 ПП
User 60122561
User 258987045
синтаксис не подсвечивает
ну так ПЛАГИНАМИ нужно обмазать
07:15:21 ПП
User 258987045
там сложная система с плагинами
07:15:24 ПП
User 258987045
час гуглировал
07:15:30 ПП
User 258987045
так и не понял в чем суть
07:15:36 ПП
User 258987045
проще скачать атом, как я уже понял ))
07:15:50 ПП
User 60122561
https://packagecontrol.io/installation
07:15:58 ПП
User 60122561
ставишь эту шкуку и там изи дальше все
07:16:07 ПП
User 258987045
я скачал ее
07:16:10 ПП
User 258987045
а куда ее ставить
07:16:40 ПП
User 60122561
тебе консоль открыть в саблайме нужно и скопировать пасту слева
07:16:45 ПП
User 60122561
The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console.
07:16:58 ПП
User 60122561
оно само все сделает
07:17:04 ПП
User 258987045
а файл нужно куда-то пихать?
07:17:06 ПП
User 258987045
или нет?
07:17:08 ПП
07:17:24 ПП
User 60122561
User 258987045
или нет?
(но атом лучше если что, а вскод еще лучше)
07:18:15 ПП
User 258987045
грустно осозновать, но чот ничего не меняется
07:23:27 ПП
User 258987045
скачал атом и кайфую
07:23:28 ПП
08:20:31 ПП
User 32530886
User 151091411
его фейсбук пишет, как и реакт :)
не фейсбук, а гитхаб
08:46:53 ПП
User 182928241
Facebook делает Nuclide, пакет пакетов для атома, что бы под реакт и реакт-натив удобно будет
08:47:36 ПП
User 182928241
@rion_iv Раз ищешь редактор, то попробуй натянуть Nuclide на Atom, отпишись, как и что, а то интересно посмотреть ;-)
08:48:14 ПП
User 32530886
Народ, я хочу рендерить, что-то вроде графа со связями и нодами, но без реакта и ангуляра. Нужно много контроля, нужно рисовать сплайны, как вариант svg-шные path.

Может есть что-то готовое, чтобы хендлить клики, драги и рендерить?
08:48:47 ПП
User 76662447
Год назад не было
08:48:53 ПП
User 76662447
Я руками рисовал
08:49:13 ПП
User 76662447
Ну, в плане, код пилил с нуля
08:49:22 ПП
User 76662447
точнее оно то есть всё, но не юзабельное
08:49:47 ПП
User 263453492
рендерить графы? оно?
http://nvd3.org/
08:49:51 ПП
User 32530886
@ZeroBias  как думаешь, есть смысл заюзать kefirjs для упрощения хендлинга ивентов?
08:50:02 ПП
User 32530886
Сергей 
граф != график
08:50:41 ПП
User 76662447
Хз, вообще что-то реактивное конечно напрашивается там
08:50:50 ПП
User 76662447
User 263453492
рендерить графы? оно?
http://nvd3.org/
08:50:53 ПП
08:51:24 ПП
User 32530886
у меня есть несколько связанных нод, кучей линий, и когда двигаешь, надо перерасчитывать их связи и т.п.
08:51:37 ПП
08:51:38 ПП
08:52:20 ПП
User 32530886
короче вот эта тема
08:52:22 ПП
08:52:47 ПП
User 32530886
@ZeroBias те гифки, что ты скинул, это что?
08:53:02 ПП
User 76662447
Это то, что я делал
08:53:18 ПП
User 76662447
С нуля на d3
08:53:20 ПП
User 32530886
покажешь код?
08:53:47 ПП
User 76662447
1. Он закрытый
2. Он люто, наглухо упоротый
08:53:51 ПП
User 32530886
и есть ли смысл писать на ts...
08:54:00 ПП
User 32530886
User 76662447
1. Он закрытый
2. Он люто, наглухо упоротый
ну ладно... буду пробовать сам
08:54:17 ПП
User 76662447
Хз, ts тут тебе особо не поможет, так как тут чисто динамика дико замороченная
08:54:34 ПП
User 76662447
Я там в паре мест учебник тригонометрии открывал
08:55:18 ПП
User 76662447
Вообще если это не твой первый проект на реактивных библиотеках, то прям гуд подойдёт
08:56:02 ПП
User 309237230
Дмитрий
08:56:05 ПП
User 309237230
Что с ником?
08:56:10 ПП
User 76662447
Просто иначе есть очень большой шанс сильно навертеть
08:56:24 ПП
User 76662447
User 309237230
Что с ником?
shit happens
08:57:47 ПП
User 76662447
User 32530886
ну ладно... буду пробовать сам
Вообще, я только код светить не могу, на консультации nda не распространяется 😄
08:58:23 ПП
User 32530886
это радует))
 Буду благодарен за консультации
08:58:28 ПП
08:58:35 ПП
User 32530886
на d3 подобные ноды сложно отрисовать?
08:58:44 ПП
User 32530886
или там пофиг, классами и css можно завертеть всё
08:59:12 ПП
User 76662447
Не, саму линию технически нарисовать очень просто. У меня она вон аж пунктирная
08:59:51 ПП
User 76662447
Сложность в том, что это на самом деле группа точек (1-3 с каждой стороны отрезка)
09:00:06 ПП
User 32530886
ну на d3 сплайнами всё просто я так понял не сложно
09:00:13 ПП
User 76662447
И тут только руками считать, где и как они должны располагаться
09:00:14 ПП
User 32530886
User 76662447
Сложность в том, что это на самом деле группа точек (1-3 с каждой стороны отрезка)
почему с точками сложно?
09:00:32 ПП
User 32530886
а заюзать для этого css/flexbox/getBoundingRect нельзя?
09:00:40 ПП
User 263453492
https://www.jasondavies.com/animated-bezier/
09:00:47 ПП
User 76662447
Я по хардкору угорал, у меня чистый svg от и до
09:02:20 ПП
User 76662447
User 32530886
почему с точками сложно?
Ну посмотри как у меня себя линия ведет. Я этот алгоритм два дня рисовал на бумаге) Вот там сплайн по двум(четырём) точкам идёт — начало линии и на небольшом расстоянии от нее
09:03:03 ПП
User 32530886
блин, придется заморочиться...
09:03:10 ПП
User 76662447
Реальное положение этих двух точек зависит от взаимного расположения блоков, и учитывает довольно большое количество параметров))
09:03:15 ПП
User 32530886
я думал, отрендерить на d3 Будет проще чем голяком нарисовать
09:03:31 ПП
User 76662447
Не, отрендерить довольно просто
09:03:53 ПП
User 76662447
Но у тебя тут уже начинается бизнес-логика визуализации схемы, если можно так выразиться
09:05:56 ПП
User 76662447
Вообще d3 тут очень во многом круто помогает. Вот этот сплайн по двум точкам, как пример. Плюс всякие палитры и т.д. Но считать, увы, не сильно поможет)
09:06:06 ПП
User 32530886
я подумываю сделать два списка:
все ноды и связи-сплайны

при изменении положения ноды, отыскать ее связи и вызвать render на каждой
09:06:34 ПП
User 263453492
интересно стало, тоже попробую сделать
09:06:40 ПП
User 32530886
то есть как в реакте, рендерить вид на основе данных
но не уверен, что будет с производительностью
09:06:59 ПП
User 76662447
User 32530886
я подумываю сделать два списка:
все ноды и связи-сплайны

при изменении положения ноды, отыскать ее связи и вызвать render на каждой
Во, первый нетривиальный вопрос))
09:07:04 ПП
User 76662447
У меня так было
09:07:34 ПП
User 76662447
Короче, на поиск ноды при неправильном подходе начинало тратиться жуткое количество времени
09:07:52 ПП
User 32530886
у меня список вида list: Map<nodeId, node>
09:09:07 ПП
User 76662447
По идее, нужен ещё мап связей на ноды
09:10:45 ПП
User 32530886
ну это список самих связей, он выглядит примерно так:
type Connection = { from: nodeId, to: nodeId, input: inputName, output: outputName }
connections: Map<ConnectionId, Connection>
09:11:37 ПП
User 32530886
и в каждой ноде я имею
inputs: Map<inputname, Connection>

outputs: Map<outputname, Set<Connection>
09:11:53 ПП
User 32530886
эта вот фигня уже умеет компилиться в js
09:11:58 ПП
User 32530886
но с вью пока трабла
09:12:03 ПП
User 76662447
Короче, сложность в том, что тебе нужны данные в самом разном представлении — нормализованные, по моделям, по связям, по каким-то ещё критериям. Чтобы просто делать getLinks( nodeId ), getLinked( connectionID ) И всё желательно должно быть согласовано
09:13:20 ПП
User 32530886
можно сделать
const node = context.getNode(nodeId)
const inlets = node.getInlets()
const outlets = node.getOutlets()
09:14:23 ПП
User 32530886
правда есть ещё те самые белые соединения, которые определяют поток исполнения кода
это отдельная штука, но наверное есть смысл впилить их в inlets/outlets
09:14:31 ПП
User 76662447
Вопрос в трудозатратности. У тебя весь пересчёт данных может происходить десятки и сотни раз в секунду
09:15:39 ПП
User 32530886
ну вот это зависит от скорости Map и Set
09:17:25 ПП
User 76662447
User 32530886
ну это список самих связей, он выглядит примерно так:
type Connection = { from: nodeId, to: nodeId, input: inputName, output: outputName }
connections: Map<ConnectionId, Connection>
1. Connection не всегда заканчивается нодой
09:18:07 ПП
User 32530886
а чем ещё
09:18:43 ПП
09:18:59 ПП
User 76662447
Курсором
09:19:46 ПП
User 32530886
типа когда создаешь связь
09:19:54 ПП
09:20:08 ПП
User 32530886
в том списке только финальные связи, которые будут использованы при компиляции графа
09:20:21 ПП
User 32530886
так сказать рабочие данные
09:21:09 ПП
User 32530886
завтра подступлюсь к проекту снова
09:21:10 ПП
User 32530886
спасибо!
09:21:20 ПП
09:22:13 ПП
09:22:15 ПП
User 32530886
пример посложнее
09:22:41 ПП
User 263453492
вроде тоже самое что и у Димы
09:23:25 ПП
User 76662447
ожидания / реальность, как говорится 😄
09:28:42 ПП
User 76662447
User 32530886
Факапы:
1. Параметрическая ширина контейнера
2. Нода в указателе на строку
3. Параметрическая ширина каждой строки

В результате координата ноды False в Branch — зависимый параметр от координаты блока, ширины блока, индекса строки, ширины каждой предыдущей строки, ширины текущей строки, делённой пополам и наконец, от смещения заголовком
09:29:04 ПП
09:30:11 ПП
User 76662447
Причём это мы только считаем точки
09:30:42 ПП
User 76662447
Сплайны рисуются из точек, зависимых уже от этих результатов (и ещё примерно от миллиона других)
09:38:11 ПП
User 76662447
Короче, если где-то во фронтенде есть rocket science — то наверняка здесь. Формулировка задачи звучит предательски просто, а когда начинаешь писать и анимировать, то открывается портал в бездну
09:45:33 ПП
User 32530886
User 76662447
Факапы:
1. Параметрическая ширина контейнера
2. Нода в указателе на строку
3. Параметрическая ширина каждой строки

В результате координата ноды False в Branch — зависимый параметр от координаты блока, ширины блока, индекса строки, ширины каждой предыдущей строки, ширины текущей строки, делённой пополам и наконец, от смещения заголовком
2 не понял
09:46:17 ПП
User 76662447
У тебя нода описывается не координатой а данными типа строка[2]
09:46:30 ПП
User 32530886
Размер ноды?
09:47:48 ПП
User 76662447
Пардон, inlets/outlets так описываются)
09:48:09 ПП
09:49:07 ПП
User 76662447
Короче, каждый блок — это объект с упорядоченным списком соединений. Изначально у тебя в данных есть просто соединение и его индекс, всё остальное считаешь на лету
09:49:49 ПП
User 76662447
Вот, и список того, от чего это зависит я выше привёл))
09:50:10 ПП
User 32530886
Выглядит сложно
09:50:36 ПП
User 32530886
Но я не хочу всё руками считать. Что то отдать браузеру на откуп
09:50:48 ПП
09:50:52 ПП
User 76662447
Не получится
09:50:57 ПП
User 32530886
Почему
09:51:13 ПП
User 76662447
Не сможешь контролировать гибкость сплайнов как выше, например
09:51:25 ПП
09:52:56 ПП
User 76662447
То есть многие расчёты требуют абсолютного знания о положениях объектов
09:53:27 ПП
User 76662447
Браузер тут максимум может просто не мешать)
09:54:35 ПП
User 76662447
User 76662447
Посмотри ещё раз на анимацию прыгающего сплайна
09:55:03 ПП
User 76662447
Она возможна потому что мы на лету можем сравнивать относительные координаты блоков и активных точек
09:55:07 ПП
User 4463650
ого, наконец-то тут обсуждают что-то интересное! (простите что влезаю)
09:57:01 ПП
User 76662447
User 32530886
Выглядит сложно
Сложно выглядит тригонометрия в простой просьбе "а добавь ещё коннекшн для прямой ноды"))
09:58:00 ПП
User 76662447
User 76662447
Это вот то, что тут в конце создаётся, после создания коннекшн огибает прямоугольник по борту