tldraw_0/packages/tldraw/src/state/command/move/move.command.spec.ts

import { TLDrawState } from '~state'
import { mockDocument } from '~test'
import { Utils } from '@tldraw/core'
import type { Data } from '~types'

const doc = Utils.deepClone(mockDocument)

doc.pages.page1.shapes['a'] = {
  ...doc.pages.page1.shapes['rect1'],
  id: 'a',
  childIndex: 1,
}
doc.pages.page1.shapes['b'] = {
  ...doc.pages.page1.shapes['rect1'],
  id: 'b',
  childIndex: 2,
}
doc.pages.page1.shapes['c'] = {
  ...doc.pages.page1.shapes['rect1'],
  id: 'c',
  childIndex: 3,
}
doc.pages.page1.shapes['d'] = {
  ...doc.pages.page1.shapes['rect1'],
  id: 'd',
  childIndex: 4,
}
doc.pageStates.page1.selectedIds = ['a']

delete doc.pages.page1.shapes['rect1']
delete doc.pages.page1.shapes['rect2']
delete doc.pages.page1.shapes['rect3']

function getSortedShapeIds(data: Data) {
  return Object.values(data.page.shapes)
    .sort((a, b) => a.childIndex - b.childIndex)
    .map((shape) => shape.id)
    .join('')
}

describe('Move command', () => {
  const tlstate = new TLDrawState()

  it('does, undoes and redoes command', () => {
    tlstate.loadDocument(doc)
    tlstate.setSelectedIds(['b'])
    tlstate.moveToBack()
    expect(getSortedShapeIds(tlstate.getState())).toBe('bacd')
    tlstate.undo()
    expect(getSortedShapeIds(tlstate.getState())).toBe('abcd')
    tlstate.redo()
    expect(getSortedShapeIds(tlstate.getState())).toBe('bacd')
  })

  describe('to back', () => {
    it('moves a shape to back', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['b'])
      tlstate.moveToBack()
      expect(getSortedShapeIds(tlstate.getState())).toBe('bacd')
    })

    it('moves two adjacent siblings to back', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['b', 'c'])
      tlstate.moveToBack()
      expect(getSortedShapeIds(tlstate.getState())).toBe('bcad')
    })

    it('moves two non-adjacent siblings to back', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['b', 'd'])
      tlstate.moveToBack()
      expect(getSortedShapeIds(tlstate.getState())).toBe('bdac')
    })
  })

  describe('backward', () => {
    it('moves a shape backward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['c'])
      tlstate.moveBackward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('acbd')
    })

    it('moves a shape at first index backward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['a'])
      tlstate.moveBackward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('abcd')
    })

    it('moves two adjacent siblings backward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['c', 'd'])
      tlstate.moveBackward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('acdb')
    })

    it('moves two non-adjacent siblings backward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['b', 'd'])
      tlstate.moveBackward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('badc')
    })

    it('moves two adjacent siblings backward at zero index', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['a', 'b'])
      tlstate.moveBackward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('abcd')
    })
  })

  describe('forward', () => {
    it('moves a shape forward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['c'])
      tlstate.moveForward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('abdc')
    })

    it('moves a shape forward at the top index', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['b'])
      tlstate.moveForward()
      tlstate.moveForward()
      tlstate.moveForward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('acdb')
    })

    it('moves two adjacent siblings forward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['a', 'b'])
      tlstate.moveForward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('cabd')
    })

    it('moves two non-adjacent siblings forward', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['a', 'c'])
      tlstate.moveForward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('badc')
    })

    it('moves two adjacent siblings forward at top index', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['c', 'd'])
      tlstate.moveForward()
      expect(getSortedShapeIds(tlstate.getState())).toBe('abcd')
    })
  })

  describe('to front', () => {
    it('moves a shape to front', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['b'])
      tlstate.moveToFront()
      expect(getSortedShapeIds(tlstate.getState())).toBe('acdb')
    })

    it('moves two adjacent siblings to front', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['a', 'b'])
      tlstate.moveToFront()
      expect(getSortedShapeIds(tlstate.getState())).toBe('cdab')
    })

    it('moves two non-adjacent siblings to front', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['a', 'c'])
      tlstate.moveToFront()
      expect(getSortedShapeIds(tlstate.getState())).toBe('bdac')
    })

    it('moves siblings already at front to front', () => {
      tlstate.loadDocument(doc)
      tlstate.setSelectedIds(['c', 'd'])
      tlstate.moveToFront()
      expect(getSortedShapeIds(tlstate.getState())).toBe('abcd')
    })
  })
})