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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

: )

 

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

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

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

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

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

 

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

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

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

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

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

ее бой

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

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

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

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

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

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

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

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

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

Весь 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 минут тупо сидел и думал как это все сделать, пока не дошло что надо пилить реверс-функцию, и когда её запилил то ахуел от того, насколько это просто было.

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

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

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

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

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

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

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

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

SHAG VLEVO SHAG VPRAVO - RASSTREL

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

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

суез

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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

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

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

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