metafizzy / metafizzy/packery

React with Packery some strange issues

Open
#559 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.3k
Forks
324
PR merge metrics
No merged PRs in 30d

Description

I am dealing with 2 major issues with packery.

a. The layout does incorrect calculations.
b. Mobile scrolling, enable / disable packery to allow scroll.

--
Unable to submit Codepen but I am using React 16 with Packery but there are some strange issues happening. Can you possibly give us a hint on where we should start debugging.
https://drive.google.com/file/d/158G_n-HDQ03EtlX5V9VQPFN-r0Z7dlUZ/view

Since packery stops all scrolling in mobile. How to disable packery on elements. The Draggabliy disable event does not enable scrolling so we had to destroy the entire packery but can we retain the layout when we disable packery ?

`const initiliasePackery = () =>{

var grid = document.querySelector('.dashboard');
if(gpackery){
gpackery.layout();
}else{
var pckry = new Packery( grid, {
percentPosition: true,
gutter:0,
stagger:30
});

if(pckry){

let ndraggies = [];
pckry.items.forEach( function( item ) {
var draggie = new Draggabilly( item.element,{
containment:'.dashboard-wrapper',
});
draggie.disable();
ndraggies.push(draggie);
pckry.bindDraggabillyEvents( draggie );
});
setDraggies(ndraggies);
grid.addEventListener( 'dragItemPositioned', ()=>{
var positions = pckry.Packery( 'getShiftPositions', 'data-widget-id' );
if(Array.isArray(positions)){
let nwidgets = [];
positions.map((widget_id)=>{
nwidgets.push(widgets[widgets.findIndex((w)=>w.id==widget_id)]);
});
console.log('update');
//props.update(nwidgets);
}

});
setPackery(pckry);
}
}
}`

`useEffect(()=>{
if(!move && gpackery && draggies.length){
// console.log('#2');
// draggies.map((draggie)=>{
// //draggie.disable(); NOT WORKING
// draggie.destroy(); NOT WORKING
// gpackery.unbindDraggabillyEvents( draggie );
// });
}

if(move){
if(draggies.length){
draggies.map((draggie)=>{
draggie.enable();
gpackery.bindDraggabillyEvents( draggie );
});
}else{
initiliasePackery();
}
}
},[move]);`

Any suggestion / hint that can help are welcome.

Contributor guide

Open the contributing guide

Research direction

Start with the provided React 16 snippet, especially initiliasePackery and the useEffect that toggles Packery and Draggabilly, then reproduce the behavior from the linked recording. Compare the layout calculation and mobile scrolling paths separately. Done means identifying a reproducible cause for both issues and determining whether Packery can be disabled while retaining the layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.