Программирование, т. 7

[Lorde - Sober ll]

Бля я щас на работе такой драг&дропчик с реордерингом и анимациями запилил, просто биба стоит

Никаких либ, вместе с реактом (правда там все движения делаются вне реакта, ибо реакт пидор во всем что касается реалтайм интерактива)

Просто блядь ВЕБ-ИИСУС НАХУЙ

Вечером мб пару гифок запилю, я там за ласт 3-4 недели просто ахуеть как наебашил

ээ братан ты же хуесосил драг-н-дроп, че за дела

[Rooster]

Но разрабатывать то днд можно

[...]

 

Бля я щас на работе такой драг&дропчик с реордерингом и анимациями запилил, просто биба стоит

Никаких либ, вместе с реактом (правда там все движения делаются вне реакта, ибо реакт пидор во всем что касается реалтайм интерактива)

Просто блядь ВЕБ-ИИСУС НАХУЙ

Вечером мб пару гифок запилю, я там за ласт 3-4 недели просто ахуеть как наебашил

ээ братан ты же хуесосил драг-н-дроп, че за дела

 

ну он же не для себя 

: )

[suez]

 

Бля я щас на работе такой драг&дропчик с реордерингом и анимациями запилил, просто биба стоит

Никаких либ, вместе с реактом (правда там все движения делаются вне реакта, ибо реакт пидор во всем что касается реалтайм интерактива)

Просто блядь ВЕБ-ИИСУС НАХУЙ

Вечером мб пару гифок запилю, я там за ласт 3-4 недели просто ахуеть как наебашил

ээ братан ты же хуесосил драг-н-дроп, че за дела

 

Во 1 тут другой днд, во 2 это фича реквест от босса, а для босса напрямую я всегда ебашу как батя 

[FeelTheHatred]

Бля я щас на работе такой драг&дропчик с реордерингом и анимациями запилил, просто биба стоит

Никаких либ, вместе с реактом (правда там все движения делаются вне реакта, ибо реакт пидор во всем что касается реалтайм интерактива)

Просто блядь ВЕБ-ИИСУС НАХУЙ

Вечером мб пару гифок запилю, я там за ласт 3-4 недели просто ахуеть как наебашил

ее бой

 

давай гифочек

[suez]

В общем вот, это пока только пример днд, заснял только кусок экрана, ибо 60фпс гиф в фуллскрине убивала мне плавное движение курсора, лол

Это днд реордеринг с анимацией, шифтингом всех элементов, которых зацепило сменой позиции элемента (я вначале предлагал просто делать свап элементов, но решили что людям лучше подавай фулл шифтинг).

Заодно в этой гифке можно увидеть функционал "зума", который на самом деле меняет циферку в css классе .s--${itemsInGridRow}--in-row, на основе которого я в sass ебашу магию и выставляю все элементы в нужную сетку. То что вы видите, это Grid View, в обычном вью там все блоки 1 под другим в полную ширину (до 790 пикселей) и в полноценной аппе там будут чарты (а вместо этих схематичных превью картинок чартов будут их downScaled версии).

Позже ебану еще гифки из новой аппы.

Изменено 20 июля 2017 пользователем suez

[FeelTheHatred]

бля нехуя тема

напомни у тебя какая зарплата щас? 

Долго пилил? много кода вышло?

бля просто охуеть круто

Изменено 20 июля 2017 пользователем FeelTheHatred

[suez]

Весь js код для этого реордеринга уложился в ~90 строчек. Причем половина кода делает построение клона сетки, где все элементы расположены с position absolute и расставлены с помощью transform: translate, чтобы потом можно было просто поменять эти самые координаты транслейта и элементы сдвинутся с css анимацией без какого-либо геморроя.

Самая интересная часть была с тем, чтобы детектить что передвигаемый блок находится в рамках хитбокса одной из зон. То есть я не делал 2d Collision Detection, сравнивания циферки этого блока со всеми остальными (ибо пиздец затратно), вместо этого я вначале написал функцию, которая на основе индекса элемента (и переменной itemsInGridRow) определяла где этот самый элемент должен был находится, и затем я тупо написал функцию, которая делала все с обратной логикой (ну там понятное дело не настолько все прямолинейно, но оказалось просто пиздец как легко).

Вот собственно эти 2 метода (код я еще не рефакторил, завтра буду этим заниматься):

  calcItemAbsPosition = (index) => {
    const { width, height } = this.firstPreviewRect;
    const x = (width + this.previewSideGap) * (index % this.state.itemsInGridRow);
    const y = (height + this.previewVertGap) * Math.floor(index / this.state.itemsInGridRow);
    return { x, y };
  }

  determineDraggedIndex = (x, y) => {
    const { width, height } = this.draggedPreviewRect;
    const halfW = width / 2;
    const halfH = height / 2;
    /* eslint-disable */
    if (x < (halfW * -1) - 1 ||
        x > this.itemsRect.width + (halfW) + 1 - width ||
        y < (halfH * -1) - 1 ||
        y > this.itemsRect.height + halfH + 1 - height) {
      return;
    }
    const xIndex = Math.round(x / (width + this.previewSideGap));
    const yIndex = Math.round(y / (height + this.previewVertGap)) * this.state.itemsInGridRow;
    return xIndex + yIndex;
  }

бля нехуя тема

напомни у тебя какая зарплата щас? 

Долго пилил? много кода вышло?

бля просто охуеть круто

5500 сгд, 237к дерева по текущему курсу (правда бессмысленно конвертировать, но привычку не побороть)

Сегодня в 3 часа дня сел пилить, в 6.45 все было готово (это я еще 2 раза ходил пожрать между делом).

Большую часть времени убил на расстановку элементов, вылизывание css чтобы все отображалось как надо во всех возможных сценариях + наверное 30-60 минут тупо сидел и думал как это все сделать, пока не дошло что надо пилить реверс-функцию, и когда её запилил то ахуел от того, насколько это просто было.

[Lorde - Sober ll]

как же я люблю фронтовые байки

[suez]

У нас там кстати есть компонент DataFactory, я про него тут раньше писал, что там творится пиздец со всеми этими рекурсивными хуйнями. В общем с этим всем уже давно проблем нет, но там просто настолько неебически разросся функционал всего этого раздела, что у нас сейчас реакт компонент уже занимает 500 строк и graphQl контейнер к нему еще наверное 200+       (и это при учете того что там внутри юзается уже куча компонентов, которые инкапсулируют тонны логики).

Им сейчас второй фронтендер занимается, я даже прикосаться к этому пиздец не хочу, там нужен просто адовый рефакторинг с выносом хотя бы 3-5+ доп компонентов из всей этой каши, иначе нам скоро придется заводить отдельный репозиторий для этого раздела 

Изменено 20 июля 2017 пользователем suez

[dont be shy]

suez, какие шаги нужно предпринять чтобы тоже так бацать?( мб есть какие советиусы

[Nikki Sixx]

Ебашить надо блять

А не шаги предпринимать

Предприниматель

[suez]

suez, какие шаги нужно предпринять чтобы тоже так бацать?( мб есть какие советиусы

SHAG VLEVO SHAG VPRAVO - RASSTREL

нужно тупо сидеть хуярить вещи

не понимаешь как - садишься и изучаешь (и думаешь головой заодно что и как изучать)

[madvlaydin]

суез

вот у тебя написано консолебог

а в плейстейшон ты играешь?

[TheWorldSpinningForYa]

жду этот днд на кодпене

 

 

но на самом деле уже было готовое http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=6dgpqb

Изменено 20 июля 2017 пользователем TheWorldSpinningForYa

[suez]

Вот только там 1к строчек кода, + надо будет ебаться с тем чтобы прикрутить как надо (ибо у меня там не совсем все примитивно) и так далее. Я бы на одни только попытки кастомизации этой еботы потратил бы часа 2 наверное, лул.

Первое правило любого нормального серьезного проекта - доджить по максимуму любые зависимости. В первую очередь все эти UI либы, написанные хуй знает кем, в которых добавлена поддержка браузеров аж до ие8, вагон кастомизаций (90% из которых тебе никогда не понадобятся) и так далее. В итоге присобачиваешь к себе на проект такой вот Blackbox, из которого тебе нахуй 70% кода вообще не надо, а потом эти фигню еще надо обновлять, следить чтобы после обновлений ничего не ломалось и так далее.

У меня вот на старом фронте почти все UI хуйни сделаны на основе либ, которые были популярны на момент запиливания проекта (аля 2013-2014), запилено все офк не мной. Дак вот, там вообще хуй чо покастомизируешь, любой шаг в сторону и тебе надо ебаться с кривым апи либы и городить костыли вокруг неё, чтобы добиться каких-то примитивных фишек (но не примитивных для особо слабых умом создателей либ).

В общем Rich UI почти не совместим с использованием готовых решений, только все ноги себе прострелишь в длинном забеге.

Изменено 20 июля 2017 пользователем suez

[madvlaydin]

сдается мне суез макконелла читал 

[Rooster]

Оскорбления чувств жквери богов в треде

[suez]

жду этот днд на кодпене

 

 

но на самом деле уже было готовое http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=6dgpqb

Бля вголос, заглянул в код, там для захвата ноды элемента юзается ReactDom.findDomNode(this)

Этот подход в категории warnings еще с февраля, тебе eslint даже не разрешит такое в своем коде юзать, ибо сейчас все юзают ref={}

В общем вот тебе изейший пруф того, что все эти либы надо доджить если ты не верблюд. У меня ушла минута времени чтобы найти настолько очевидный фейл. А ведь этот файл (sortableContainer) в последний раз апдейтили 18 дней назад.

[ElGobedano]

Вот так читаешь телегу с js а там кроме слов angular , redux нет низуя и суез чисто из другого мира с его йода анимацией