kopia lustrzana https://github.com/Tldraw/Tldraw
Restores select on single click
rodzic
ff9eab63e7
commit
169ed8e742
|
@ -72,18 +72,18 @@ describe('TLDrawState', () => {
|
|||
expect(tlstate.selectedIds.length).toBe(3)
|
||||
})
|
||||
|
||||
it('does not select selected shape when single-clicked', () => {
|
||||
it('selects selected shape when single-clicked', () => {
|
||||
tlstate.loadDocument(mockDocument).selectAll()
|
||||
tlu.clickShape('rect2')
|
||||
expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2', 'rect3'])
|
||||
})
|
||||
|
||||
it('selects shape when double-clicked', () => {
|
||||
tlstate.loadDocument(mockDocument).selectAll()
|
||||
tlu.doubleClickShape('rect2')
|
||||
expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
})
|
||||
|
||||
// it('selects shape when double-clicked', () => {
|
||||
// tlstate.loadDocument(mockDocument).selectAll()
|
||||
// tlu.doubleClickShape('rect2')
|
||||
// expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
// })
|
||||
|
||||
it('does not select on meta-click', () => {
|
||||
tlstate.loadDocument(mockDocument).deselectAll()
|
||||
tlu.clickShape('rect1', { ctrlKey: true })
|
||||
|
@ -98,36 +98,52 @@ describe('TLDrawState', () => {
|
|||
expect(tlstate.status.current).toBe('idle')
|
||||
})
|
||||
|
||||
it('deletes shapes if cancelled during creating', () => {
|
||||
// TODO
|
||||
})
|
||||
|
||||
it('deletes shapes on undo after creating', () => {
|
||||
// TODO
|
||||
})
|
||||
|
||||
it('re-creates shapes on undo after creating', () => {
|
||||
// TODO
|
||||
})
|
||||
|
||||
it('selects all', () => {
|
||||
// TODO
|
||||
})
|
||||
|
||||
// Single click on a selected shape to select just that shape
|
||||
|
||||
// it('single-selects shape in selection on click', () => {
|
||||
// tlstate.deselectAll()
|
||||
// clickShape('rect1')
|
||||
// clickShape('rect2', { shiftKey: true })
|
||||
// clickShape('rect2')
|
||||
// expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
// expect(tlstate.status.current).toBe('idle')
|
||||
// })
|
||||
it('single-selects shape in selection on click', () => {
|
||||
tlstate.deselectAll()
|
||||
tlu.clickShape('rect1')
|
||||
tlu.clickShape('rect2', { shiftKey: true })
|
||||
tlu.clickShape('rect2')
|
||||
expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
expect(tlstate.status.current).toBe('idle')
|
||||
})
|
||||
|
||||
// it('single-selects shape in selection on pointerup only', () => {
|
||||
// tlstate.deselectAll()
|
||||
// clickShape('rect1')
|
||||
// clickShape('rect2', { shiftKey: true })
|
||||
// pointShape('rect2')
|
||||
// expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2'])
|
||||
// stopPointing('rect2')
|
||||
// expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
// expect(tlstate.status.current).toBe('idle')
|
||||
// })
|
||||
it('single-selects shape in selection on pointerup only', () => {
|
||||
tlstate.deselectAll()
|
||||
tlu.clickShape('rect1')
|
||||
tlu.clickShape('rect2', { shiftKey: true })
|
||||
tlu.pointShape('rect2')
|
||||
expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2'])
|
||||
tlu.stopPointing('rect2')
|
||||
expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
expect(tlstate.status.current).toBe('idle')
|
||||
})
|
||||
|
||||
// it('selects shapes if shift key is lifted before pointerup', () => {
|
||||
// tlstate.deselectAll()
|
||||
// clickShape('rect1')
|
||||
// pointShape('rect2', { shiftKey: true })
|
||||
// expect(tlstate.status.current).toBe('pointingBounds')
|
||||
// stopPointing('rect2')
|
||||
// expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
// expect(tlstate.status.current).toBe('idle')
|
||||
// })
|
||||
it('selects shapes if shift key is lifted before pointerup', () => {
|
||||
tlstate.deselectAll()
|
||||
tlu.clickShape('rect1')
|
||||
tlu.pointShape('rect2', { shiftKey: true })
|
||||
expect(tlstate.status.current).toBe('pointingBounds')
|
||||
tlu.stopPointing('rect2')
|
||||
expect(tlstate.selectedIds).toStrictEqual(['rect2'])
|
||||
expect(tlstate.status.current).toBe('idle')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
@ -1474,6 +1474,8 @@ export class TLDrawState implements TLCallbacks {
|
|||
if (this.pointedId !== info.target) {
|
||||
this.setSelectedIds(data.pageState.selectedIds.filter((id) => id !== info.target))
|
||||
}
|
||||
} else {
|
||||
this.setSelectedIds([info.target])
|
||||
}
|
||||
} else if (this.pointedId === info.target) {
|
||||
if (info.shiftKey) {
|
||||
|
@ -1582,7 +1584,7 @@ export class TLDrawState implements TLCallbacks {
|
|||
onPointShape: TLPointerEventHandler = (info) => {
|
||||
const data = this.getState()
|
||||
switch (this.status.current) {
|
||||
case 'idle': {
|
||||
case TLDrawStatus.Idle: {
|
||||
switch (this.appState.activeTool) {
|
||||
case 'select': {
|
||||
if (info.metaKey) {
|
||||
|
@ -1607,21 +1609,38 @@ export class TLDrawState implements TLCallbacks {
|
|||
}
|
||||
break
|
||||
}
|
||||
case 'pointingBounds': {
|
||||
case TLDrawStatus.PointingBounds: {
|
||||
this.pointedId = info.target
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onReleaseShape: TLPointerEventHandler = () => {
|
||||
// Unused
|
||||
onReleaseShape: TLPointerEventHandler = (info) => {
|
||||
// const data = this.getState()
|
||||
// switch (this.status.current) {
|
||||
// case TLDrawStatus.PointingBounds: {
|
||||
// switch (this.appState.activeTool) {
|
||||
// case 'select': {
|
||||
// if (data.pageState.selectedIds.includes(info.target)) {
|
||||
// // If the shape is not selected; then if the user is pressing shift,
|
||||
// // add the shape to the current selection; otherwise, set the shape as
|
||||
// // the only selected shape.
|
||||
// this.setSelectedIds([info.target], info.shiftKey)
|
||||
// }
|
||||
// this.setStatus(TLDrawStatus.Idle)
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
onDoubleClickShape: TLPointerEventHandler = (info) => {
|
||||
if (this.selectedIds.includes(info.target)) {
|
||||
this.setSelectedIds([info.target])
|
||||
}
|
||||
onDoubleClickShape: TLPointerEventHandler = () => {
|
||||
// if (this.selectedIds.includes(info.target)) {
|
||||
// this.setSelectedIds([info.target])
|
||||
// }
|
||||
}
|
||||
|
||||
onRightPointShape: TLPointerEventHandler = () => {
|
||||
|
|
|
@ -22,6 +22,7 @@ export class TLStateUtils {
|
|||
inputs.pointerDown(this.getPoint(options), 'canvas'),
|
||||
{} as React.PointerEvent
|
||||
)
|
||||
return this
|
||||
}
|
||||
|
||||
pointShape = (id: string, options: PointerOptions = {}) => {
|
||||
|
@ -29,6 +30,7 @@ export class TLStateUtils {
|
|||
inputs.pointerDown(this.getPoint(options), id),
|
||||
{} as React.PointerEvent
|
||||
)
|
||||
return this
|
||||
}
|
||||
|
||||
doubleClickShape = (id: string, options: PointerOptions = {}) => {
|
||||
|
@ -36,6 +38,7 @@ export class TLStateUtils {
|
|||
inputs.pointerDown(this.getPoint(options), id),
|
||||
{} as React.PointerEvent
|
||||
)
|
||||
return this
|
||||
}
|
||||
|
||||
pointBounds = (options: PointerOptions = {}) => {
|
||||
|
@ -43,6 +46,7 @@ export class TLStateUtils {
|
|||
inputs.pointerDown(this.getPoint(options), 'bounds'),
|
||||
{} as React.PointerEvent
|
||||
)
|
||||
return this
|
||||
}
|
||||
|
||||
pointBoundsHandle = (
|
||||
|
@ -53,6 +57,7 @@ export class TLStateUtils {
|
|||
inputs.pointerDown(this.getPoint(options), 'bounds'),
|
||||
{} as React.PointerEvent
|
||||
)
|
||||
return this
|
||||
}
|
||||
|
||||
stopPointing = (target = 'canvas', options: PointerOptions = {}) => {
|
||||
|
@ -60,21 +65,25 @@ export class TLStateUtils {
|
|||
inputs.pointerDown(this.getPoint(options), target),
|
||||
{} as React.PointerEvent
|
||||
)
|
||||
return this
|
||||
}
|
||||
|
||||
clickCanvas = (options: PointerOptions = {}) => {
|
||||
this.pointCanvas(options)
|
||||
this.stopPointing()
|
||||
return this
|
||||
}
|
||||
|
||||
clickShape = (id: string, options: PointerOptions = {}) => {
|
||||
this.pointShape(id, options)
|
||||
this.stopPointing(id, options)
|
||||
return this
|
||||
}
|
||||
|
||||
clickBounds = (options: PointerOptions = {}) => {
|
||||
this.pointBounds(options)
|
||||
this.stopPointing()
|
||||
return this
|
||||
}
|
||||
|
||||
clickBoundsHandle = (
|
||||
|
@ -83,6 +92,7 @@ export class TLStateUtils {
|
|||
) => {
|
||||
this.pointBoundsHandle(id, options)
|
||||
this.stopPointing(id)
|
||||
return this
|
||||
}
|
||||
|
||||
getPoint(options: PointerOptions = {} as PointerOptions): PointerEvent {
|
||||
|
|
Ładowanie…
Reference in New Issue