Skip to content

Commit 012ce7c

Browse files
kaeizenkaeizen
committed
change request fix
- implement dragging instead of scroll - delay start of auto-scroll, slowdown auto-scroll - display labels in patterns - select first block added
1 parent ba72157 commit 012ce7c

File tree

4 files changed

+80
-15
lines changed

4 files changed

+80
-15
lines changed

‎src/block/design-library/edit.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,9 @@ const Edit = props => {
273273
dispatch( 'core/block-editor' ).replaceBlocks( clientId, blocks )
274274
}
275275

276+
// Set focus on the top-most added block
277+
dispatch( 'core/block-editor' ).selectBlock( blocks[ 0 ].clientId )
278+
276279
if ( blocksToRemoveRef.current.length ) {
277280
dispatch( 'core/block-editor' ).removeBlocks( blocksToRemoveRef.current )
278281
blocksToRemoveRef.current = []

‎src/components/design-library-list/design-library-list-item.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
5454
)
5555

5656
const {
57-
onScroll, onMouseOut, onMouseOver,
57+
onMouseOut, onMouseOver, onMouseDown,
5858
} = useAutoScroll( hostRef, shadowBodySizeRef, selectedTab )
5959

6060
const getDesignPreviewSize = () => {
@@ -113,7 +113,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
113113
shadowRoot={ shadowRoot }
114114
selectedTab={ selectedTab }
115115
adjustScale={ adjustScale }
116-
onScroll={ onScroll }
116+
onMouseDown={ onMouseDown }
117117
/> }
118118
</div>
119119
</div>

‎src/components/design-library-list/design-preview.js‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,74 @@ export const DesignPreview = ( {
1313
shadowRoot,
1414
selectedTab,
1515
adjustScale = NOOP,
16-
onScroll = NOOP,
16+
onMouseDown = NOOP,
1717
} ) => {
1818
const ref = useRef( null )
1919

20+
// Prevents scrolling using mousewheel
21+
const handleWheel = e => {
22+
e.preventDefault()
23+
}
24+
25+
const isDragging = useRef( false )
26+
const lastY = useRef( 0 )
27+
const lastScrollTop = useRef( 0 )
28+
29+
const handleMouseDown = e => {
30+
// Disable the auto scroll
31+
onMouseDown()
32+
33+
isDragging.current = true
34+
lastY.current = e.clientY
35+
const container = ref.current
36+
if ( container ) {
37+
lastScrollTop.current = container.scrollTop
38+
}
39+
}
40+
41+
const handleMouseMove = e => {
42+
if ( ! isDragging.current ) {
43+
return
44+
}
45+
46+
const container = ref.current
47+
if ( container ) {
48+
const deltaY = e.clientY - lastY.current
49+
container.scrollTop = lastScrollTop.current - ( deltaY * 2 )
50+
}
51+
}
52+
53+
const handleMouseUp = () => {
54+
isDragging.current = false
55+
}
56+
57+
useEffect( () => {
58+
const container = ref.current
59+
if ( ! container || selectedTab === 'patterns' ) {
60+
return
61+
}
62+
63+
// Add the event listener with { passive: false } to force the browser to allow preventDefault() to work.
64+
container.addEventListener( 'wheel', handleWheel, { passive: false } )
65+
66+
container.addEventListener( 'mousedown', handleMouseDown )
67+
// eslint-disable-next-line @wordpress/no-global-event-listener
68+
window.addEventListener( 'mousemove', handleMouseMove )
69+
// eslint-disable-next-line @wordpress/no-global-event-listener
70+
window.addEventListener( 'mouseup', handleMouseUp )
71+
72+
// Clean up the event listeners when the component unmounts.
73+
return () => {
74+
container.removeEventListener( 'wheel', handleWheel )
75+
76+
container.removeEventListener( 'mousedown', handleMouseDown )
77+
// eslint-disable-next-line @wordpress/no-global-event-listener
78+
window.removeEventListener( 'mousemove', handleMouseMove )
79+
// eslint-disable-next-line @wordpress/no-global-event-listener
80+
window.removeEventListener( 'mouseup', handleMouseUp )
81+
}
82+
}, [] )
83+
2084
useEffect( () => {
2185
// The scale might not be correct on first load, so adjust it again to be sure.
2286
setTimeout( adjustScale, 100 )
@@ -32,7 +96,6 @@ export const DesignPreview = ( {
3296
<body
3397
ref={ ref }
3498
className={ shadowBodyClasses }
35-
onWheel={ onScroll }
3699
>
37100
<div
38101
dangerouslySetInnerHTML={ { __html: blocks } }

‎src/components/design-library-list/use-auto-scroll.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const useAutoScroll = ( hostRef, shadowBodySizeRef, selectedTab ) => {
1010
const scrollIntervalRef = useRef( null )
1111

1212
const onMouseOverImpl = () => {
13-
const shadowDomBody = hostRef?.current?.shadowRoot.querySelector( 'body' )
13+
const shadowDomBody = hostRef?.current?.shadowRoot?.querySelector?.( 'body' )
1414
if ( shadowDomBody && shadowBodySizeRef.current ) {
1515
scrollPositionRef.current = 0
1616
setTimeout( () => {
@@ -34,13 +34,13 @@ export const useAutoScroll = ( hostRef, shadowBodySizeRef, selectedTab ) => {
3434
const scrollBy = scrollDifference >= 20 ? 20 : scrollDifference
3535
shadowDomBody.scrollTop = scrollPositionRef.current + scrollBy
3636
scrollPositionRef.current += scrollBy
37-
}, 20 )
38-
}, 500 )
37+
}, 60 )
38+
}, 1000 )
3939
}
4040
}
4141

4242
const onMouseOutImpl = () => {
43-
const shadowDomBody = hostRef?.current?.shadowRoot.querySelector( 'body' )
43+
const shadowDomBody = hostRef?.current?.shadowRoot?.querySelector?.( 'body' )
4444
if ( shadowDomBody ) {
4545
clearInterval( scrollIntervalRef.current )
4646
scrollIntervalRef.current = null
@@ -52,20 +52,19 @@ export const useAutoScroll = ( hostRef, shadowBodySizeRef, selectedTab ) => {
5252
}
5353
}
5454

55-
const onScrollImpl = () => {
56-
if ( scrollIntervalRef.current ) {
57-
clearInterval( scrollIntervalRef.current )
58-
scrollIntervalRef.current = null
59-
}
55+
const onMouseDownImpl = () => {
56+
clearInterval( scrollIntervalRef.current )
57+
scrollIntervalRef.current = null
58+
scrollPositionRef.current = -1
6059
}
6160

6261
const onMouseOver = selectedTab === 'patterns' ? NOOP : onMouseOverImpl
6362
const onMouseOut = selectedTab === 'patterns' ? NOOP : onMouseOutImpl
64-
const onScroll = selectedTab === 'patterns' ? NOOP : onScrollImpl
63+
const onMouseDown = selectedTab === 'patterns' ? NOOP : onMouseDownImpl
6564

6665
return {
6766
onMouseOver,
6867
onMouseOut,
69-
onScroll,
68+
onMouseDown,
7069
}
7170
}

0 commit comments

Comments
 (0)