feat: useLayers setting to manage z-index on dragging (#234)

ThibaultJanBeyer · Sep 17, 2024 · 22f4783 · 22f4783
2 parents a3e73ab + 72faff6
commit 22f4783
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 8 deletions.
diff --git a/DragSelect/__tests__/functional/settings.spec.js b/DragSelect/__tests__/functional/settings.spec.js
@@ -275,4 +275,19 @@ describe('Settings', () => {
     cb = await selectItems(180, 120)
     expect(cb?.sort()).toMatchObject(['one', 'two'])
   })
+
+  it('useLayers swapping should work', async () => {
+    await page.goto(`${baseUrl}/settings.html`)
+    await page.evaluate(() =>
+      ds.setSettings({
+        draggability: true,
+        immediateDrag: true,
+        useLayers: false,
+      })
+    )
+    await moveSelect(page, 140, 85)
+    expect(
+      await page.evaluate(() => document.querySelector('#two').style.zIndex)
+    ).toBe('')
+  })
 })
diff --git a/DragSelect/src/methods/hydrateSettings.ts b/DragSelect/src/methods/hydrateSettings.ts
@@ -242,4 +242,5 @@ export const hydrateSettings = <E extends DSInputElement>(settings: Settings<E>,
     withFallback,
     'ds-dropzone-inside'
   ),
+  ...hydrateHelper('useLayers', settings.useLayers, withFallback, true),
   } as Required<Settings<E>>)
diff --git a/DragSelect/src/modules/Drag.ts b/DragSelect/src/modules/Drag.ts
@@ -174,12 +174,14 @@ export default class Drag<E extends DSInputElement> {
   }
 
   private handleZIndex = (add: boolean) => {
-    this._elements.forEach(
-      (element) =>
-        (element.style.zIndex = `${
-          (parseInt(element.style.zIndex) || 0) + (add ? 9999 : -9998)
-        }`)
-    )
+    if (this.Settings.useLayers) {
+      this._elements.forEach(
+        (element) =>
+          (element.style.zIndex = `${
+            (parseInt(element.style.zIndex) || 0) + (add ? 9999 : -9998)
+          }`)
+      )
+    }
   }
 
   private moveElements = (posDirection: Vect2) => {

diff --git a/DragSelect/src/modules/SelectedSet.ts b/DragSelect/src/modules/SelectedSet.ts
@@ -37,7 +37,7 @@ export default class SelectedSet<E extends DSInputElement> extends Set<E> {
     this.PS.publish('Selected:added:pre', publishData)
     super.add(element)
     element.classList.add(this.Settings.selectedClass)
-    element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + 1}`
+    if (this.Settings.useLayers) element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + 1}`
     this.PS.publish('Selected:added', publishData)
     return this
   }
@@ -51,7 +51,7 @@ export default class SelectedSet<E extends DSInputElement> extends Set<E> {
     this.PS.publish('Selected:removed:pre', publishData)
     const deleted = super.delete(element)
     element.classList.remove(this.Settings.selectedClass)
-    element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) - 1}`
+    if (this.Settings.useLayers) element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) - 1}`
     this.PS.publish('Selected:removed', publishData)
     return deleted
   }

diff --git a/DragSelect/src/types.ts b/DragSelect/src/types.ts
@@ -101,6 +101,8 @@ export type Settings<E extends DSInputElement> = {
   dropZoneTargetClass?: string
   /** [=ds-dropzone-inside] on dropZone that has elements inside after any drop */
   dropZoneInsideClass?: string
+  /** [=true] Whether to use z-index when selecting and dragging an item */
+  useLayers?: boolean
 }
 
 export type DSCallbackObject<E extends DSInputElement> = Readonly<

diff --git a/www/docs/API/Settings.mdx b/www/docs/API/Settings.mdx
@@ -41,6 +41,7 @@ const ds = new DragSelect({
 | `keyboardDrag` | boolean | true    |Whether or not the user can drag with the keyboard (Accessibility).
 | `dragKeys` | { up:string[], down:string[], left:string[], right:string[] } | { up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] } |The keys available to drag element using the keyboard. Any key value is possible ([see MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)).
 | `keyboardDragSpeed` | number | 10  | The speed at which elements are dragged using the keyboard. In pixels per keyDown.
+| `useLayers` | boolean | true    | Whether to apply z-index when dragging and once dragged.
 
 ## Dropping
 | property       | type    | default | description
@@ -113,5 +114,6 @@ new DragSelect({
   refreshMemoryRate: 80,
   usePointerEvents: false,
   zoom: 1,
+  useLayers: true,
 });
 ```