Merge pull request #566 from mkszepp/fix-grid-negative-container-margin

Fix grid direction, when group element has negative margin
adopted-ember-addons · Jul 12, 2024 · 126048e · 126048e
2 parents 4a3148c + ace3371
commit 126048e
Show file tree

Hide file tree

Showing 6 changed files with 276 additions and 23 deletions.
diff --git a/addon/src/modifiers/sortable-group.js b/addon/src/modifiers/sortable-group.js
@@ -814,12 +814,12 @@ export default class SortableGroupModifier extends Modifier {
     // As a negative number will be positive, we need to fake position from non dragged element
     if (a.isDragging && position.ax <= 0) {
       position.ax = 0;
-      position.bx += 1;
+      position.bx = 1;
     }
 
     if (b.isDragging && position.bx <= 0) {
       position.bx = 0;
-      position.ax += 1;
+      position.ax = 1;
     }
 
     return position;

diff --git a/test-app/app/controllers/index.js b/test-app/app/controllers/index.js
@@ -70,4 +70,10 @@ export default class ModifierController extends Controller {
     set(this, 'model.itemsGrid', newOrder);
     set(this, 'model.dragged', draggedModel);
   }
+
+  @action
+  updateGrid2(newOrder, draggedModel) {
+    set(this, 'model.itemsGrid2', newOrder);
+    set(this, 'model.dragged', draggedModel);
+  }
 }
diff --git a/test-app/app/routes/index.js b/test-app/app/routes/index.js
@@ -3,13 +3,16 @@ import Route from '@ember/routing/route';
 export default class Index extends Route {
   model() {
     const itemsGrid = [];
+    const itemsGrid2 = [];
     for (let i = 1; i <= 26; i++) {
       itemsGrid.push(`Item ${i}`);
+      itemsGrid2.push(`Item ${i}`);
     }
 
     return {
       items: ['Zero', 'One', 'Two', 'Three', 'Four'],
       itemsGrid: itemsGrid,
+      itemsGrid2: itemsGrid2,
     };
   }
 }
diff --git a/test-app/app/styles/app.css b/test-app/app/styles/app.css
@@ -100,7 +100,36 @@
   width: 70px;
 }
 
-.grid-demo .sortable-item,
+.grid-demo .row {
+  display: flex;
+  flex-wrap: wrap;
+}
+.grid-demo .row .row {
+  margin-left: -5px;
+  margin-right: -5px;
+}
+
+.grid-demo .row > .col {
+  padding: 0;
+}
+
+.grid-demo .col {
+  width: 100%;
+  min-height: 1px;
+  padding-right: 5px;
+  padding-left: 5px;
+  padding-bottom: 15px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.grid-demo .col-120 {
+  width: 120px;
+  flex: 0 0 auto;
+}
+
+.grid-demo .sortable-item .card,
+.grid-demo-2 .sortable-item,
 .horizontal-demo .sortable-item,
 .horizontal-doc-auto-scroll-demo .sortable-item {
   display: inline-block;
@@ -110,12 +139,35 @@
   margin: 0 4px;
 }
 
-.grid-demo ol {
+.grid-demo .sortable-item.is-dragging .card,
+.grid-demo-2 .sortable-item.is-dragging,
+.horizontal-demo .sortable-item.is-dragging {
+  background: hsl(197, 100%, 35%);
+}
+
+.grid-demo .sortable-item.is-dropping .card,
+.grid-demo-2 .sortable-item.is-dropping,
+.horizontal-demo .sortable-item.is-dropping {
+  background: hsl(197, 100%, 40%);
+  z-index: 10;
+}
+
+.grid-demo .sortable-item .card {
+  width: 100%;
+  height: 120px;
+  background-color: hsl(197, 100%, 45%);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.grid-demo-2 ol {
   display: flex;
   flex-wrap: wrap;
 }
 
-.grid-demo .sortable-item {
+.grid-demo-2 .sortable-item {
   width: 120px;
   height: 120px;
   margin: 4px;
@@ -125,16 +177,6 @@
   justify-content: center;
 }
 
-.grid-demo .sortable-item.is-dragging,
-.horizontal-demo .sortable-item.is-dragging {
-  background: hsl(197, 100%, 35%);
-}
-.grid-demo .sortable-item.is-dropping,
-.horizontal-demo .sortable-item.is-dropping {
-  background: hsl(197, 100%, 40%);
-  z-index: 10;
-}
-
 .table-demo table {
   position: relative;
   border-collapse: separate;

diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
@@ -68,21 +68,49 @@
       </ol>
     </section>
 
-    <section class='grid-demo'>
-      <h3>Grid</h3>
+    <section class="grid-demo">
+      <div class="row">
+        <div class="col">
+          <h3>Grid</h3>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="row" data-test-grid-demo-group
+          {{sortable-group
+            direction='grid'
+            onChange=this.updateGrid
+            itemVisualClass=this.itemVisualClass
+            handleVisualClass=this.handleVisualClass
+            groupName='grid'
+          }}>
+            {{#each @model.itemsGrid as |item|~}}
+              <div class="col-120" data-test-grid-demo-handle tabindex={{'0'}} {{sortable-item model=item groupName='grid'}}>
+                <div class="card">
+                  <ItemPresenter @item={{item}} />
+                </div>
+              </div>
+            {{~/each}}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class='grid-demo-2'>
+      <h3>Grid demo 2 (no negative margin on group)</h3>
 
       <ol
-        data-test-grid-demo-group
+        data-test-grid-demo-2-group
         {{sortable-group
           direction='grid'
-          onChange=this.updateGrid
+          onChange=this.updateGrid2
           itemVisualClass=this.itemVisualClass
           handleVisualClass=this.handleVisualClass
-          groupName='grid'
+          groupName='grid-2'
         }}
       >
-        {{#each @model.itemsGrid as |item|~}}
-          <li data-test-grid-demo-handle tabindex={{'0'}} {{sortable-item model=item groupName='grid'}}>
+        {{#each @model.itemsGrid2 as |item|~}}
+          <li data-test-grid-demo-2-handle tabindex={{'0'}} {{sortable-item model=item groupName='grid-2'}}>
             <ItemPresenter @item={{item}} />
           </li>
         {{~/each}}