-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #105 from basehub-ai/toolbar
Toolbar QA
- Loading branch information
Showing
5 changed files
with
188 additions
and
190 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "basehub": patch | ||
| --- | ||
|
|
||
| Refresh on draft mode activation, styling corrections, full drag handle. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 79 additions & 70 deletions
149
packages/basehub/src/next/toolbar/components/drag-handle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,95 @@ | ||
| import * as React from "react"; | ||
| import s from "../toolbar.module.scss"; | ||
|
|
||
| export const DragHandle = ({ | ||
| onDrag, | ||
| onDragStart, | ||
| onDragEnd, | ||
| }: { | ||
| onDrag: ({ x, y }: { x: number; y: number }) => void; | ||
| onDragStart: () => void; | ||
| onDragEnd: () => void; | ||
| }) => { | ||
| const [isDragging, setIsDragging] = React.useState(false); | ||
| export type DragHandle = { hasDragged: boolean }; | ||
|
|
||
| React.useLayoutEffect(() => { | ||
| if (!isDragging) return; | ||
| export const DragHandle = React.forwardRef( | ||
| ( | ||
| { | ||
| onDrag, | ||
| children, | ||
| }: { | ||
| onDrag: ({ x, y }: { x: number; y: number }) => void; | ||
| children: React.ReactNode; | ||
| }, | ||
| ref | ||
| ) => { | ||
| const [isDragging, setIsDragging] = React.useState(false); | ||
| const initialPointer = React.useRef({ x: 0, y: 0 }); | ||
| const initialToolbar = React.useRef({ x: 0, y: 0 }); | ||
| const hasDragged = React.useRef(false); | ||
|
|
||
| const handleDrag = (e: PointerEvent) => { | ||
| if (!isDragging) return; | ||
| React.useImperativeHandle(ref, () => ({ | ||
| hasDragged: hasDragged.current, | ||
| })); | ||
|
|
||
| const x = Math.round(e.clientX); | ||
| const y = Math.round(e.clientY); | ||
| const handleDrag = React.useCallback( | ||
| (e: PointerEvent) => { | ||
| if (!isDragging) return; | ||
|
|
||
| onDrag({ x, y }); | ||
| }; | ||
| const deltaX = e.clientX - initialPointer.current.x; | ||
| const deltaY = e.clientY - initialPointer.current.y; | ||
| const newToolbarX = initialToolbar.current.x + deltaX; | ||
| const newToolbarY = initialToolbar.current.y + deltaY; | ||
|
|
||
| window.addEventListener("pointermove", handleDrag); | ||
| // set hasDragged to true if the pointer has moved more than 5 px from the initial position | ||
| if (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2) { | ||
| hasDragged.current = true; | ||
| } | ||
|
|
||
| return () => { | ||
| window.removeEventListener("pointermove", handleDrag); | ||
| }; | ||
| }, [isDragging, onDrag]); | ||
| onDrag({ x: newToolbarX, y: newToolbarY }); | ||
| }, | ||
| [isDragging, onDrag] | ||
| ); | ||
|
|
||
| React.useLayoutEffect(() => { | ||
| // disable drag on pointer up | ||
| if (!isDragging) return; | ||
| React.useLayoutEffect(() => { | ||
| if (!isDragging) return; | ||
|
|
||
| const handlePointerUp = () => { | ||
| setIsDragging(false); | ||
| onDragEnd(); | ||
| }; | ||
| window.addEventListener("pointermove", handleDrag); | ||
|
|
||
| window.addEventListener("pointerup", handlePointerUp); | ||
| return () => { | ||
| window.removeEventListener("pointermove", handleDrag); | ||
| }; | ||
| }, [isDragging, onDrag, handleDrag]); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("pointerup", handlePointerUp); | ||
| }; | ||
| }, [isDragging, onDragEnd]); | ||
| React.useLayoutEffect(() => { | ||
| // disable drag on pointer up | ||
| if (!isDragging) { | ||
| hasDragged.current = false; | ||
| return | ||
| } | ||
|
|
||
| return ( | ||
| <button | ||
| className={`${s.dragHandle} ${isDragging ? s.dragging : ""}`} | ||
| onPointerDown={() => { | ||
| setIsDragging(true); | ||
| onDragStart(); | ||
| }} | ||
| onPointerUp={() => { | ||
| const handlePointerUp = () => { | ||
| setIsDragging(false); | ||
| if (isDragging) { | ||
| onDragEnd(); | ||
| } | ||
| }} | ||
| > | ||
| <DragIcon /> | ||
| </button> | ||
| ); | ||
| }; | ||
| }; | ||
|
|
||
| window.addEventListener("pointerup", handlePointerUp); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("pointerup", handlePointerUp); | ||
| }; | ||
| }, [isDragging]); | ||
|
|
||
| const DragIcon = () => { | ||
| return ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"> | ||
| <path | ||
| fill="#F3F3F3" | ||
| fillRule="evenodd" | ||
| d="M8 1.75a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V2.25a.5.5 0 0 1 .5-.5ZM8 9.5a.5.5 0 0 1 .5.5v3.75a.5.5 0 0 1-1 0V10a.5.5 0 0 1 .5-.5ZM9.5 8a.5.5 0 0 1 .5-.5h3.75a.5.5 0 1 1 0 1H10a.5.5 0 0 1-.5-.5ZM1.75 8a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1H2.25a.5.5 0 0 1-.5-.5Z" | ||
| clipRule="evenodd" | ||
| /> | ||
| <path | ||
| fill="#F3F3F3" | ||
| fillRule="evenodd" | ||
| d="M3.818 5.933a.45.45 0 0 1 0 .636L2.386 8.001l1.432 1.432a.45.45 0 0 1-.636.636l-1.75-1.75a.45.45 0 0 1 0-.636l1.75-1.75a.45.45 0 0 1 .636 0ZM5.932 12.183a.45.45 0 0 1 .636 0L8 13.614l1.432-1.431a.45.45 0 1 1 .636.636l-1.75 1.75a.45.45 0 0 1-.636 0l-1.75-1.75a.45.45 0 0 1 0-.636ZM12.182 5.933a.45.45 0 0 1 .636 0l1.75 1.75a.45.45 0 0 1 0 .636l-1.75 1.75a.45.45 0 1 1-.636-.636L13.614 8l-1.432-1.432a.45.45 0 0 1 0-.636ZM7.682 1.433a.45.45 0 0 1 .636 0l1.75 1.75a.45.45 0 1 1-.636.636L8 2.387 6.568 3.82a.45.45 0 1 1-.636-.636l1.75-1.75Z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
| return ( | ||
| <span | ||
| draggable | ||
| className={`${s.dragHandle} ${isDragging ? s.dragging : ""}`} | ||
| onPointerDown={(e) => { | ||
| e.stopPropagation(); | ||
| const handle = e.currentTarget as HTMLSpanElement | null; | ||
| if (!handle) return; | ||
| initialPointer.current = { x: e.clientX, y: e.clientY }; | ||
| const rect = handle.getBoundingClientRect(); | ||
| initialToolbar.current.x = rect.left; | ||
| initialToolbar.current.y = rect.top; | ||
| setIsDragging(true); | ||
| }} | ||
| onPointerUp={() => { | ||
| setIsDragging(false); | ||
| }} | ||
| > | ||
| {children} | ||
| </span> | ||
| ); | ||
| } | ||
| ); |
Oops, something went wrong.