Skip to content

Commit

Permalink
Revert "Combined mouse up handling " (#6463)
Browse files Browse the repository at this point in the history 
Reverts #6416
  • Loading branch information
@seanparsons
seanparsons authored Oct 3, 2024
1 parent 0a538b7 commit a7b2de1
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 84 deletions.
68 changes: 15 additions & 53 deletions ...components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ describe('grid reparent strategies', () => {

await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])

await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })

expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
formatTestProjectCode(
Expand All @@ -311,8 +311,8 @@ describe('grid reparent strategies', () => {
width: 79,
height: 86,
position: 'absolute',
top: 934,
left: 1627,
top: 391,
left: 492,
}}
data-uid='dragme'
data-testid='dragme'
Expand Down Expand Up @@ -367,7 +367,6 @@ describe('grid reparent strategies', () => {
height: 86,
}}
data-uid='bar'
data-testid='bar'
/>
<div
style={{
Expand All @@ -385,14 +384,7 @@ describe('grid reparent strategies', () => {

await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])

const barElement = editor.renderedDOM.getByTestId('bar')
const barRect = barElement.getBoundingClientRect()
const endPoint = {
x: barRect.x - 10,
y: barRect.y + barRect.height / 2,
}

await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2600, y: 1600 })

expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
formatTestProjectCode(
Expand Down Expand Up @@ -435,7 +427,6 @@ describe('grid reparent strategies', () => {
height: 86,
}}
data-uid='bar'
data-testid='bar'
/>
<div
style={{
Expand Down Expand Up @@ -486,7 +477,6 @@ describe('grid reparent strategies', () => {
height: 86,
}}
data-uid='foo'
data-testid='foo'
/>
<div
style={{
Expand All @@ -512,14 +502,7 @@ describe('grid reparent strategies', () => {

await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])

const fooElement = editor.renderedDOM.getByTestId('foo')
const fooRect = fooElement.getBoundingClientRect()
const endPoint = {
x: fooRect.x + fooRect.width / 2,
y: fooRect.y + fooRect.height / 2,
}

await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 1800 })

expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
formatTestProjectCode(
Expand All @@ -543,7 +526,6 @@ describe('grid reparent strategies', () => {
height: 86,
}}
data-uid='foo'
data-testid='foo'
>
<div
style={{
Expand Down Expand Up @@ -619,7 +601,6 @@ describe('grid reparent strategies', () => {
gridColumn: 1,
}}
data-uid='foo'
data-testid='foo'
/>
<div
style={{
Expand All @@ -630,7 +611,6 @@ describe('grid reparent strategies', () => {
gridColumn: 3,
}}
data-uid='bar'
data-testid='bar'
/>
<div
style={{
Expand Down Expand Up @@ -687,7 +667,6 @@ describe('grid reparent strategies', () => {
gridColumn: 1,
}}
data-uid='foo'
data-testid='foo'
/>
<div
style={{
Expand All @@ -698,7 +677,6 @@ describe('grid reparent strategies', () => {
gridColumn: 3,
}}
data-uid='bar'
data-testid='bar'
/>
<div
style={{
Expand Down Expand Up @@ -747,7 +725,7 @@ describe('grid reparent strategies', () => {

await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])

await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })

expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
formatTestProjectCode(
Expand All @@ -757,8 +735,8 @@ describe('grid reparent strategies', () => {
style={{
backgroundColor: '#f0f',
position: 'absolute',
top: 934,
left: 1627,
top: 391,
left: 492,
width: 86.5,
height: 135,
}}
Expand Down Expand Up @@ -826,9 +804,13 @@ async function dragElement(

async function dragOut(
renderResult: EditorRenderResult,
gridTestId: string,
cell: ElementPath,
endPoint: Point,
): Promise<void> {
) {
const grid = renderResult.renderedDOM.getByTestId(gridTestId)
const gridRect = grid.getBoundingClientRect()

const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
const sourceRect = sourceGridCell.getBoundingClientRect()

Expand All @@ -837,30 +819,10 @@ async function dragOut(
{ x: sourceRect.x + 5, y: sourceRect.y + 5 },
{ modifiers: cmdModifier },
)

await mouseDownAtPoint(
sourceGridCell,
{ x: sourceRect.x + 5, y: sourceRect.y + 5 },
{
modifiers: cmdModifier,
},
)

const delta: Point = {
x: endPoint.x - sourceRect.x + 5,
y: endPoint.y - sourceRect.y + 5,
}
await mouseMoveToPoint(sourceGridCell, endPoint, {
eventOptions: {
movementX: delta.x,
movementY: delta.y,
buttons: 1,
},
modifiers: cmdModifier,
})
await mouseUpAtPoint(renderResult.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint, {
await mouseDragFromPointToPoint(sourceGridCell, sourceRect, endPoint, {
modifiers: cmdModifier,
})
await mouseUpAtPoint(grid, gridRect, { modifiers: cmdModifier })
}

async function dragOutToAnotherGrid(
Expand Down
8 changes: 1 addition & 7 deletions editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ import { getAllLockedElementPaths } from '../../../../core/shared/element-lockin
import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
import { useCommentModeSelectAndHover } from '../comment-mode/comment-mode-hooks'
import { useFollowModeSelectAndHover } from '../follow-mode/follow-mode-hooks'
import { handleGlobalMouseUp } from '../../../../templates/global-handlers'
import { wait } from '../../../../core/model/performance-scripts'
import { IS_TEST_ENVIRONMENT } from '../../../../common/env-vars'
import { isFeatureEnabled } from '../../../../utils/feature-switches'
Expand Down Expand Up @@ -668,22 +667,17 @@ function useSelectOrLiveModeSelectAndHover(
(!hadInteractionSessionThatWasCancelled || !draggedOverThreshold.current) &&
(activeControl == null || activeControl.type === 'BOUNDING_AREA')

let editorActions: Array<EditorAction> = []

if (event.type === 'mousedown') {
didWeHandleMouseDown.current = true
}
if (event.type === 'mouseup') {
const handleMouseUpActions = handleGlobalMouseUp(event.nativeEvent)
editorActions.push(...handleMouseUpActions)
// Clear the interaction session tracking flag
interactionSessionHappened.current = false
// didWeHandleMouseDown is used to avoid selecting when closing text editing
didWeHandleMouseDown.current = false
draggedOverThreshold.current = false

if (!mouseUpSelectionAllowed) {
dispatch(editorActions)
// We should skip this mouseup
return
}
Expand All @@ -695,7 +689,6 @@ function useSelectOrLiveModeSelectAndHover(
!active ||
!(isLeftClick || isRightClick)
) {
dispatch(editorActions)
// Skip all of this handling if 'space' is pressed or a mousemove happened in an interaction, or the hook is not active
return
}
Expand All @@ -716,6 +709,7 @@ function useSelectOrLiveModeSelectAndHover(

const isMultiselect = event.shiftKey
const isDeselect = foundTarget == null && !isMultiselect
let editorActions: Array<EditorAction> = []

if (foundTarget != null || isDeselect) {
if (
Expand Down
9 changes: 6 additions & 3 deletions editor/src/templates/editor-canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ import { getCanvasViewportCenter } from './paste-helpers'
import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler'
import { ResizeObserver } from '../components/canvas/dom-walker'
import { isInsideColorPicker } from '../components/inspector/controls/color-picker-utils'
import { addMouseUpHandler, removeMouseUpHandler } from './global-handlers'

const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null

Expand Down Expand Up @@ -1373,10 +1372,14 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
}
}

handleWindowMouseUp = (event: any) => {
this.props.dispatch(this.handleMouseUp(event))
}

setupWindowListeners() {
window.addEventListener('mousemove', this.handleMouseMove, { capture: true }) // we use this event in the capture phase because size-box.ts calls stopPropagation() on mouseMove
window.addEventListener('mouseleave', this.handleMouseLeave)
addMouseUpHandler(this.handleMouseUp)
window.addEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
window.addEventListener('click', this.handleClick)
window.addEventListener('dblclick', this.handleDoubleClick)
;(window as any).addEventListener('paste', this.handlePaste)
Expand All @@ -1385,7 +1388,7 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
removeEventListeners() {
window.removeEventListener('mousemove', this.handleMouseMove, { capture: true })
window.removeEventListener('mouseleave', this.handleMouseLeave)
removeMouseUpHandler(this.handleMouseUp)
window.removeEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
window.removeEventListener('click', this.handleClick)
window.removeEventListener('dblclick', this.handleDoubleClick)
;(window as any).removeEventListener('paste', this.handlePaste)
Expand Down
21 changes: 0 additions & 21 deletions editor/src/templates/global-handlers.tsx
View file

This file was deleted.

0 comments on commit a7b2de1

Please sign in to comment.