dflex-js / dflex Goto Github PK

After a dragged element is let go by mouseup event, the z-index: 99 and position: relative are removed from the style attribute, but the transform property is still there.

Yes, it's set to translate3d(0px, 0px, 0px), but it still messes up stacking context in cases where you have e.g. a dropdown inside those draggable elements. I fixed it temporarily with this code after dflexDnD.endDragging():

  setTimeout(()=>{
    dndCompRef.current.style.transform="";
  }, 50);

Which is of course just a hack. Instantly removing the attribute synchronously is somehow not working, probably overwritten later.

Maybe this is something that's intended for some reason I don't see yet. If it's not intended, I'd appreciate a quick "yes, this is a bug" from @jalal246 (or someone else more familiar with this codebase), maybe this is suited for my first OSS contribution :)

This method represents the core of Base/Draggable and should be tested correctly.

https://github.com/jalal246/dflex/blob/bdc3d06b58185c67703284588c34b91a76eb0955/packages/dnd/Draggable/Draggable.js#L60-L72

Dark mode breaks text contrast on multiple areas:

• Header Github hover & Docs when active
• Front page hero text
• Active pages on docs
• Footer link hover

In the large list demo, drag the item 2 and move to the bottom of the list.
Then, while still dragging, scroll the container. The dragged item is not following the scroll, and it's becoming crazy.

Hello,

I tried running the playground locally and noticed all sorts of weird issues. Are some of these not expected to work? The /grid example was worse, I couldn't get it to sort at all, and often ended up in states like this:

The root example

<ContainerBasedEvent
  isHorizontal={false}
  isIncludeOneContainer={false}
/>

only works if the vertical space is enough to fit the whole list. Otherwise it throws Uncaught TypeError: this._innerThresholdInViewport is null. I saw similar error in my own application, where if I didn't have more than 10 items in the list, I'd get an error that this._outerThresholdInViewport was null (but it was called this.V but tracing the code looked like this method. Then I noticed a variable private static _MAX_NUM_OF_SIBLINGS_BEFORE_DYNAMIC_VISIBILITY = 10; so if you have fewer elements than that, then _outerThresholdInViewport will always stay null.

For more context, I'm attempting to implement sorting without React. My project is a Rails app using Stimulus JS. I've probably wired up some things wrong, but since many of the demos in the playground seemed off too, I wondered if maybe some things are still in flight. Is this project in a production ready state? Thanks!

This issue is dedicated to creating a template for the Vue framework.

I used create-react-app to create react playgrounds which I usually use to develop DFlex. But looking to publish a template for Vue, something like this repo: https://github.com/dflex-js/react-draggable-starter.

For the sake of productivity, creating a starter form scratch can be simpler than open PR directly to this rep. Both, of course, are welcomed 🎉🎉🎉

Make sure basic functionalities work perfectly before releasing alpha.

Starting with threshold:

https://github.com/jalal246/dflex/blob/bdc3d06b58185c67703284588c34b91a76eb0955/packages/dnd/Base/Base.js#L111

Defining where elements can be dropped would be awesome.

Add end to end test with Cypress covering PR #110

jsdom doesn't do any rendering, so getBoundingClientRect() always returns 0,0,0,0. That won't change (even foreseeable long-term). You can try to mock the function to emulate the results you'd expect. Also see #653.

Originally posted by @Sebmaster in jsdom/jsdom#1590 (comment)

Since AbstractDraggable updates translate values immediately:

https://github.com/jalal246/dflex/blob/bdc3d06b58185c67703284588c34b91a76eb0955/packages/draggable/src/AbstractDraggable.js#L117-L118

While assigning current done only once in constructor. This is bad!

https://github.com/jalal246/dflex/blob/bdc3d06b58185c67703284588c34b91a76eb0955/packages/coreInstance/src/CoreInstance.js#L82-L83

Add more meaningful name. Instead of end().

Should update readme and playgrounds followed with template.

https://github.com/jalal246/dflex/blob/bdc3d06b58185c67703284588c34b91a76eb0955/packages/draggable/src/AbstractDraggable.js#L96-L98

Even with this suggestion, puppeteer/puppeteer#1366 (comment) seems like page.mouse.move not working correctly.

Related issue: puppeteer/puppeteer#4690 (comment)

I would like to be able to drag item number 1 to below item number 1000 by dragging down. I would like to drag item number 1000 to above item number 1 by dragging the item up. Right now It does not have the option to scroll.

Bonus, make the speed variable based on distance of the drag from bottom of screen. The further the faster.

Going up works well but going the opposite direction is still buggy

Some basic vue example:

<template>
  <div
    :id="id"
    ref="elRoot"
    class="DragAndDrop"
    @mousedown.stop.prevent="onMouseDown"
  ></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { Draggable, store } from '@dflex/draggable'
import cuid from 'cuid'

export default defineComponent({
  name: 'DragAndDrop',
  components: {},

  setup() {
    const id = `draggable-button.${cuid.slug()}`
    let draggedEvent: Draggable
    const elRoot = ref()

    const onMouseDown = (event: MouseEvent) => {
      draggedEvent = new Draggable(id, { x: event.clientX, y: event.clientY })

      document.addEventListener('mouseup', onMouseUp)
      document.addEventListener('mousemove', onMouseMove)
    }

    const onMouseMove = (event: MouseEvent) => {
      if (!draggedEvent) return

      draggedEvent.dragAt(event.clientX, event.clientY)
    }

    const onMouseUp = () => {
      if (draggedEvent) {
        draggedEvent.endDragging()

        document.removeEventListener('mouseup', onMouseUp)
        document.removeEventListener('mousemove', onMouseMove)
      }
    }

    onMounted(() => {
      store.register(id)
    })

    return {
      id,
      elRoot,
      onMouseDown,
      onMouseMove,
    }
  },
})
</script>

<style lang="scss">
.DragAndDrop {
  $block: &;

  width: 200px;
  height: 100px;
  border: 2px solid fuchsia;
  border-radius: 10px;
  background-color: rgba(fuchsia, 0.1);
}
</style>

As soon as the onMouseDown is fired, there is an error:

can't access property "x", translate is undefined

It happens with 3.6.0 but works fine with 3.5.4. I was trying to create a reproduction on Codesandbox but for some reason I can't add @dflex/draggable as a dependency there…

the list in this scenario is not responding

Video of the behavour:

When dragging an element from one scrollable container to another scrollable container, the dragged element is covered by the elements in the receiving container on release. The reason seems to be that the dropped element somehow persists the position: absolute CSS property in the receiving container.

If I make the containers shorter, i.e. non-scrollable, then the dragged element is properly placed in the container.

Remove todo add tests:

https://github.com/jalal246/dflex/blob/master/packages/draggable/readme.md#test

Dear @jalal246 ,

Could you please update the documentation and the release note pages with the new features you added lately?

I was away for some time and lost grip of the functionality of DFlex, so now it would be more difficult for me to gather all the new things you added. I would rather prefer to refer to the docs.

Thank you!

Currently, there is an example for React and Vue. But no implementation for Svelte.

See: https://github.com/jalal246/dflex/tree/master/packages/draggable/playgrounds

In the restricted demo, when dragging a restricted element (for example the "restricted bottom" element), to the left, the next element will jump up to take its place, even if the dragged element is still visible, causing the next element to become hidden/invisible to the user.

It's not very convenient to use.

I encountered a bug while testing the live demo of this library. The bug occurs when a list item is dragged and dropped exactly at the top of other list item in a specific manner. It seems like the dflex is creating additional unknown nodes to the list. Screenshots:

I have the following Vue component:

<template>
  <component :is="tag" style="touch-action: none" @pointerdown="onPointerDown">
    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </component>
</template>

<script setup>
import { onUnmounted } from 'vue'
import { store, DnD } from '@dflex/dnd'

const props = defineProps({
  tag: { type: [String, Object], required: true },
  id: { type: String, required: true }
})

store.register({ id: props.id })
onUnmounted(() => {
  store.unregister(props.id)
})
let dndSession = null

function onPointerDown (event) {
  event.currentTarget.setPointerCapture(event.pointerId)
  event.currentTarget.addEventListener('pointermove', onPointerMove)
  event.currentTarget.addEventListener('pointerup', onPointerUp)
  dndSession = new DnD(props.id, { x: event.clientX, y: event.clientY })
}
function onPointerMove (event) {
  // dndSession.dragAt(event.clientX, event.clientY)
}
function onPointerUp (event) {
  event.currentTarget.removeEventListener('pointermove', onPointerMove)
  event.currentTarget.removeEventListener('pointerup', onPointerUp)
  dndSession.endDragging()
  dndSession = null
}
</script>

When I click on the element (pointerdown) I get the following error:

Am I doing something wrong?

The homepage says that "animated transformation with each interaction" can be done with dflex; however, the demo doesn't have any animation. Can animations be added to the demo or to a separate demo?

Sandbox for the bug: https://codesandbox.io/p/sandbox/holy-hill-fy6sy2

Expected: dragging should show console logs for $onDragOutContainer, $onDragOutThreshold, $onDragOver, $onDragLeave events.

Even when subscribing to layout/mutation, none of the drag events are fired.

@jalal246, this bug is currently blocking me from using DFlex as I need the events in order to update my state.

Related discussion: #737

I have cloned the repo and run npm install to setup the project but got this error:

D:\Projects\External\dflex>npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: dflex-monorepo@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.4.9" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2" from [email protected]
npm ERR! node_modules/vite-plugin-replace
npm ERR!   dev vite-plugin-replace@"^0.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\......\AppData\Local\npm-cache\_logs\2023-10-03T13_05_02_947Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\......\AppData\Local\npm-cache\_logs\2023-10-03T13_05_02_947Z-debug-0.log

What am I doing wrong? I want to run the playgrounds - how can I do that?

typo bug causes this:

https://github.com/jalal246/dflex/blob/962f73c5d63ffab7d89bd4656c93e811ca02091a/packages/dom-gen/package.json#L4

it should be dist instead of src

Everything works as long as all the elements are initialized from the beginning.

As soon as I add an element on runtime via javascript (and then also successfully register in the store), the next mousedown event logs this obsfuscated error and doesn't allow any drag and drop operations (not the old elements and also not the new ones).

The logged, obfuscated error:

Uncaught TypeError: h2 is undefined
    st dflex-dnd.mjs:1
    it dflex-dnd.mjs:1
    et dflex-dnd.mjs:1
    gt dflex-dnd.mjs:1
    onMouseDown DnDComponent.tsx:83
    React 23
    hydrate entry.client.tsx:7
    startTransition React
    hydrate entry.client.tsx:6
    requestIdleCallback handler* entry.client.tsx:17
2 dflex-dnd.mjs:1:27428

I used the example code that has this nice DnDComponent for React. I also found out the line in the component that's triggering the error:

        dflexDnD = new DnD(id, { x: clientX, y: clientY }, opts); //<-- this is line 83

I also noticed that the JavaScript-added element doesn't follow the data-index count of the other elements, but starts from 0 again (each additional javascript-added element then counts up 1, 2, 3 from there on again).

If I do

        console.log(store.getContainerByID(id));
        dflexDnD = new DnD(id, { x: clientX, y: clientY }, opts);

The logged container looks normal, same as before I dynamically add an element at runtime (where everything still worked). So the store does indeed contain this newly added element. Also when I add an element via javascript and then save and reload the page, everything works again, until I add another element.

What may I have forgotten to do? Unfortunately, my whole code is way too long, but the core part is mapping a list with each element mapping to a DnDComponent. As soon as I add one item to that list via JavaScript, it seems to mess up something.

I tried to read as much as possible in the codebase about how the new DnD constructor is, but nothing jumped my eye.

Drag & Drop (DnD) has a React playground, you can see it here.

But since it's in Pure JS it would nice if it has another template for Vue and other frameworks.