2021-11-16 16:01:29 +00:00
|
|
|
import { mockDocument, TldrawTestApp } from '~test'
|
|
|
|
import { SessionType, TDShapeType } from '~types'
|
2021-10-13 13:55:31 +00:00
|
|
|
import { SelectTool } from '.'
|
|
|
|
|
|
|
|
describe('SelectTool', () => {
|
|
|
|
it('creates tool', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
new SelectTool(app)
|
2021-10-13 13:55:31 +00:00
|
|
|
})
|
|
|
|
})
|
2021-10-19 11:19:56 +00:00
|
|
|
|
|
|
|
describe('When double clicking link controls', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const doc = new TldrawTestApp()
|
2021-10-22 11:05:23 +00:00
|
|
|
.createShapes(
|
|
|
|
{
|
|
|
|
id: 'rect1',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Rectangle,
|
2021-10-22 11:05:23 +00:00
|
|
|
point: [0, 0],
|
|
|
|
size: [100, 100],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'rect2',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Rectangle,
|
2021-10-22 11:05:23 +00:00
|
|
|
point: [100, 0],
|
|
|
|
size: [100, 100],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'rect3',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Rectangle,
|
2021-10-22 11:05:23 +00:00
|
|
|
point: [200, 0],
|
|
|
|
size: [100, 100],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'arrow1',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Arrow,
|
2021-10-22 11:05:23 +00:00
|
|
|
point: [200, 200],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'arrow2',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Arrow,
|
2021-10-22 11:05:23 +00:00
|
|
|
point: [200, 200],
|
|
|
|
}
|
|
|
|
)
|
|
|
|
.select('arrow1')
|
2021-11-16 16:01:29 +00:00
|
|
|
.movePointer({ x: 200, y: 200 })
|
|
|
|
.startSession(SessionType.Arrow, 'arrow1', 'start')
|
|
|
|
.movePointer({ x: 50, y: 50 })
|
2021-10-22 11:05:23 +00:00
|
|
|
.completeSession()
|
2021-11-16 16:01:29 +00:00
|
|
|
.movePointer({ x: 200, y: 200 })
|
|
|
|
.startSession(SessionType.Arrow, 'arrow1', 'end')
|
|
|
|
.movePointer({ x: 150, y: 50 })
|
2021-10-22 11:05:23 +00:00
|
|
|
.completeSession()
|
|
|
|
.select('arrow2')
|
2021-11-16 16:01:29 +00:00
|
|
|
.movePointer({ x: 200, y: 200 })
|
|
|
|
.startSession(SessionType.Arrow, 'arrow2', 'start')
|
|
|
|
.movePointer({ x: 150, y: 50 })
|
2021-10-22 11:05:23 +00:00
|
|
|
.completeSession()
|
2021-11-16 16:01:29 +00:00
|
|
|
.movePointer({ x: 200, y: 200 })
|
|
|
|
.startSession(SessionType.Arrow, 'arrow2', 'end')
|
|
|
|
.movePointer({ x: 250, y: 50 })
|
2021-10-22 11:05:23 +00:00
|
|
|
.completeSession()
|
2021-11-07 13:45:48 +00:00
|
|
|
.selectNone().document
|
2021-10-22 11:05:23 +00:00
|
|
|
|
|
|
|
it('moves all linked shapes when center is dragged', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
2021-11-26 15:14:10 +00:00
|
|
|
.pointBoundsHandle('center', [100, 100])
|
|
|
|
.expectShapesToBeAtPoints({
|
|
|
|
rect1: [0, 0],
|
|
|
|
rect2: [100, 0],
|
|
|
|
rect3: [200, 0],
|
|
|
|
})
|
2021-11-16 16:01:29 +00:00
|
|
|
|
2021-11-26 15:14:10 +00:00
|
|
|
app.movePointer([200, 200]).expectShapesToBeAtPoints({
|
2021-11-16 16:01:29 +00:00
|
|
|
rect1: [100, 100],
|
|
|
|
rect2: [200, 100],
|
|
|
|
rect3: [300, 100],
|
|
|
|
})
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
app.completeSession().undo()
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
app.expectShapesToBeAtPoints({
|
2021-10-22 11:05:23 +00:00
|
|
|
rect1: [0, 0],
|
|
|
|
rect2: [100, 0],
|
|
|
|
rect3: [200, 0],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
it('moves all upstream shapes when center is dragged', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
|
|
|
.pointBoundsHandle('center')
|
|
|
|
.movePointer({ x: 100, y: 100 })
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.getShape('rect1').point).toEqual([100, 100])
|
|
|
|
expect(app.getShape('rect2').point).toEqual([200, 100])
|
|
|
|
expect(app.getShape('rect3').point).toEqual([300, 100])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('moves all downstream shapes when center is dragged', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
|
|
|
.pointBoundsHandle('right')
|
|
|
|
.movePointer({ x: 100, y: 100 })
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.getShape('rect1').point).toEqual([0, 0])
|
|
|
|
expect(app.getShape('rect2').point).toEqual([200, 100])
|
|
|
|
expect(app.getShape('rect3').point).toEqual([300, 100])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('selects all linked shapes when center is double clicked', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
|
|
|
.doubleClickBoundHandle('center')
|
|
|
|
.expectSelectedIdsToBe(['rect2', 'rect1', 'rect3'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('selects all linked shapes and arrows when center is double clicked while holding shift', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
2021-10-22 11:05:23 +00:00
|
|
|
.doubleClickBoundHandle('center', { shiftKey: true })
|
|
|
|
.expectSelectedIdsToBe(['rect2', 'rect1', 'rect3', 'arrow1', 'arrow2'])
|
|
|
|
})
|
|
|
|
|
|
|
|
it('selects all upstream linked shapes when left is double clicked', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
|
|
|
.doubleClickBoundHandle('left')
|
|
|
|
.expectSelectedIdsToBe(['rect1', 'rect2'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('selects all upstream linked shapes and arrows when left is double clicked with shift', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
2021-10-22 11:05:23 +00:00
|
|
|
.doubleClickBoundHandle('left', { shiftKey: true })
|
|
|
|
.expectSelectedIdsToBe(['rect1', 'rect2', 'arrow1'])
|
|
|
|
})
|
|
|
|
|
|
|
|
it('selects all downstream linked shapes when right is double clicked', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
|
|
|
.doubleClickBoundHandle('right')
|
|
|
|
.expectSelectedIdsToBe(['rect2', 'rect3'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('selects all downstream linked shapes and arrows when right is double clicked with shift', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
new TldrawTestApp()
|
|
|
|
.loadDocument(doc)
|
|
|
|
.select('rect2')
|
2021-10-22 11:05:23 +00:00
|
|
|
.doubleClickBoundHandle('right', { shiftKey: true })
|
|
|
|
.expectSelectedIdsToBe(['rect2', 'rect3', 'arrow2'])
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('When selecting grouped shapes', () => {
|
|
|
|
it('Selects the group on single click', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
.loadDocument(mockDocument)
|
|
|
|
.group(['rect1', 'rect2'], 'groupA')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
.clickShape('rect1')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.selectedIds).toStrictEqual(['groupA'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('Drills in and selects the child on double click', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
.loadDocument(mockDocument)
|
|
|
|
.group(['rect1', 'rect2'], 'groupA')
|
|
|
|
.doubleClickShape('rect1')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.selectedIds).toStrictEqual(['rect1'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('Selects a sibling on single click after drilling', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
|
|
|
.loadDocument(mockDocument)
|
|
|
|
.group(['rect1', 'rect2'], 'groupA')
|
|
|
|
.doubleClickShape('rect1')
|
|
|
|
.clickShape('rect2')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.selectedIds).toStrictEqual(['rect2'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('Selects the group again after selecting a different shape', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
2021-10-22 11:05:23 +00:00
|
|
|
.loadDocument(mockDocument)
|
|
|
|
.selectAll()
|
|
|
|
.group(['rect1', 'rect2'], 'groupA')
|
2021-11-16 16:01:29 +00:00
|
|
|
.doubleClickShape('rect1')
|
|
|
|
.clickShape('rect3')
|
|
|
|
.clickShape('rect1')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.selectedIds).toStrictEqual(['groupA'])
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('Selects grouped text on double click', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
2021-10-22 11:05:23 +00:00
|
|
|
.loadDocument(mockDocument)
|
|
|
|
.createShapes({
|
|
|
|
id: 'text1',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Text,
|
2021-10-22 11:05:23 +00:00
|
|
|
text: 'Hello world',
|
|
|
|
})
|
|
|
|
.group(['rect1', 'rect2', 'text1'], 'groupA')
|
2021-11-16 16:01:29 +00:00
|
|
|
.doubleClickShape('text1')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.selectedIds).toStrictEqual(['text1'])
|
|
|
|
expect(app.pageState.editingId).toBeUndefined()
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
it('Edits grouped text on double click after selecting', () => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = new TldrawTestApp()
|
2021-10-22 11:05:23 +00:00
|
|
|
.loadDocument(mockDocument)
|
|
|
|
.createShapes({
|
|
|
|
id: 'text1',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Text,
|
2021-10-22 11:05:23 +00:00
|
|
|
text: 'Hello world',
|
|
|
|
})
|
|
|
|
.group(['rect1', 'rect2', 'text1'], 'groupA')
|
2021-11-16 16:01:29 +00:00
|
|
|
.doubleClickShape('text1')
|
|
|
|
.doubleClickShape('text1')
|
2021-10-22 11:05:23 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
expect(app.selectedIds).toStrictEqual(['text1'])
|
|
|
|
expect(app.pageState.editingId).toBe('text1')
|
2021-10-22 11:05:23 +00:00
|
|
|
})
|
2021-10-19 11:19:56 +00:00
|
|
|
})
|