From 07f22ff6325b88c2d0235bd2fff03cfbdc7411df Mon Sep 17 00:00:00 2001 From: Gareth Clubb Date: Tue, 17 Sep 2024 09:37:44 +0100 Subject: [PATCH 1/3] feat: useLayers setting to disable z-index usage --- DragSelect/__tests__/functional/settings.spec.js | 15 +++++++++++++++ DragSelect/__tests__/quicktest.html | 2 +- DragSelect/src/methods/hydrateSettings.ts | 1 + DragSelect/src/modules/Drag.ts | 14 ++++++++------ DragSelect/src/modules/SelectedSet.ts | 4 ++-- DragSelect/src/types.ts | 2 ++ 6 files changed, 29 insertions(+), 9 deletions(-) diff --git a/DragSelect/__tests__/functional/settings.spec.js b/DragSelect/__tests__/functional/settings.spec.js index b02bc587..489d05a2 100644 --- 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/__tests__/quicktest.html b/DragSelect/__tests__/quicktest.html index 3a0524b2..65302a10 100644 --- a/DragSelect/__tests__/quicktest.html +++ b/DragSelect/__tests__/quicktest.html @@ -166,7 +166,7 @@ diff --git a/DragSelect/src/methods/hydrateSettings.ts b/DragSelect/src/methods/hydrateSettings.ts index af5b68c4..51b67a72 100644 --- a/DragSelect/src/methods/hydrateSettings.ts +++ b/DragSelect/src/methods/hydrateSettings.ts @@ -242,4 +242,5 @@ export const hydrateSettings = (settings: Settings, withFallback, 'ds-dropzone-inside' ), + ...hydrateHelper('useLayers', settings.useLayers, withFallback, true), } as Required>) diff --git a/DragSelect/src/modules/Drag.ts b/DragSelect/src/modules/Drag.ts index f7be07e4..af6895fd 100644 --- a/DragSelect/src/modules/Drag.ts +++ b/DragSelect/src/modules/Drag.ts @@ -174,12 +174,14 @@ export default class Drag { } 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 index fd96f9d4..ab2f6e9b 100644 --- a/DragSelect/src/modules/SelectedSet.ts +++ b/DragSelect/src/modules/SelectedSet.ts @@ -37,7 +37,7 @@ export default class SelectedSet extends Set { 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 extends Set { 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 index ca8e4c85..1d447258 100644 --- a/DragSelect/src/types.ts +++ b/DragSelect/src/types.ts @@ -101,6 +101,8 @@ export type Settings = { 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 = Readonly< From afe618d2645731ef729d55b1b7283eca3af2d778 Mon Sep 17 00:00:00 2001 From: Gareth Clubb Date: Tue, 17 Sep 2024 09:39:00 +0100 Subject: [PATCH 2/3] chore: adding back trailing comma on quicktest --- DragSelect/__tests__/quicktest.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/DragSelect/__tests__/quicktest.html b/DragSelect/__tests__/quicktest.html index 65302a10..3a0524b2 100644 --- a/DragSelect/__tests__/quicktest.html +++ b/DragSelect/__tests__/quicktest.html @@ -166,7 +166,7 @@ From 72faff60fb4952d3d90cca1c448fef27755d4e4e Mon Sep 17 00:00:00 2001 From: Gareth Clubb Date: Tue, 17 Sep 2024 09:44:23 +0100 Subject: [PATCH 3/3] docs: updating documentation for useLayers --- www/docs/API/Settings.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/www/docs/API/Settings.mdx b/www/docs/API/Settings.mdx index 230ebcfc..ba9f971a 100644 --- 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, }); ```