TahaSh / swapy

✨ A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code https://swapy.tahazsh.com/
MIT License
5.86k stars 114 forks source link

Styles overriden by Swapy/Veloxi #50

Open JamieBShaw opened 1 month ago

JamieBShaw commented 1 month ago

I have an issue where swapy overrides the styles prop for my component, I placed some logs in a local version of snapy and could see that the styles were present, see below:

instance.ts

function addVeloxiDataAttributes(
  root: HTMLElement,
  config = {} as Config
): string {
  const pluginKey = getUniqueId()
  root.dataset.velPluginKey = pluginKey
  root.dataset.velPlugin = 'Swapy'
  root.dataset.velView = 'root'
  root.dataset.velDataConfigAnimation = config.animation
  if (config.continuousMode) {
    root.dataset.velDataConfigContinuousMode = 'true'
  }
  const slots = Array.from(
    root.querySelectorAll('[data-swapy-slot]')
  ) as HTMLElement[]
  slots.forEach((slot) => {
    slot.dataset.velView = 'slot'
  })

  const items = Array.from(
    root.querySelectorAll('[data-swapy-item]')
  ) as HTMLElement[]
  items.forEach((item) => {
    item.dataset.velView = 'item'
    item.dataset.velLayoutId = item.dataset.swapyItem
    console.info('Item style', item.style)
    const handle = item.querySelector('[data-swapy-handle]') as HTMLElement
    if (handle) {
      handle.dataset.velView = 'handle'
    }
  })

  private _createItemElMap() {
    return (
      Array.from(
        this._rootEl.querySelectorAll('[data-swapy-item]')
      ) as HTMLElement[]
    ).reduce((map, el) => {
      **console.info('Creating item map with style', el.style)**
      map.set(el.dataset.swapyItem, el)
      return map
    }, new Map())
  }

However, in the SwapyPlugin.ts file, when logging the items, the styles were no longer applied to the element and the syles object is empty:

SwapyPlugin.ts

function setupItem(item: View) {
    console.info('Setup item', JSON.stringify(item.styles, null, 2))
    const animation = getAnimation()
    item.styles.position = 'relative'
    item.styles.touchAction = 'none'
    item.styles.userSelect = 'none'
    item.styles.webkitUserSelect = 'none'
    item.position.setAnimator(animation.animator, animation.config)
    item.scale.setAnimator(animation.animator, animation.config)
    item.layoutTransition(true)

    const handle = item.getChild('handle')
    if (handle) {
      dragEventPlugin.addView(handle)
    } else {
      dragEventPlugin.addView(item)
    }

    const slot = item.getParent('slot')!.element
    slotItemMap.set(slot.dataset.swapySlot!, item.element.dataset.swapyItem!)
  }

I couldn't tell if this issue is in Swapy or Veloxi