PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[fix] Allows boundsDragEvents to fire even when hidden (#115)

Browse source 
* Allows boundsDragEvents to fire even when hidden

* Fix failing test
This commit is contained in:
Steve Ruiz 2021-09-23 12:45:39 +01:00 committed by GitHub
parent 9ddf7d0dc4
commit 1e3e19199c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/core/src/components/bounds/bounds.test.tsx
View file

@ -11,6 +11,7 @@ describe('bounds', () => {
rotation={0}
viewportWidth={1000}
isLocked={false}
isHidden={false}
/>
)
})

117
packages/core/src/components/bounds/bounds.tsx
View file

@ -13,6 +13,7 @@ interface BoundsProps {
bounds: TLBounds
rotation: number
isLocked: boolean
isHidden: boolean
viewportWidth: number
}
@ -21,6 +22,7 @@ export function Bounds({
bounds,
viewportWidth,
rotation,
isHidden,
isLocked,
}: BoundsProps): JSX.Element {
// Touch target size
@ -36,63 +38,66 @@ export function Bounds({
return (
<Container bounds={bounds} rotation={rotation}>
<SVGContainer>
<SVGContainer opacity={isHidden ? 0 : 1}>
<CenterHandle bounds={bounds} isLocked={isLocked} />
{showHandles && (
<>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Top}
/>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Right}
/>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Bottom}
/>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Left}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.TopLeft}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.TopRight}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.BottomRight}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.BottomLeft}
/>
{showRotateHandle && (
<RotateHandle targetSize={targetSize} size={size} bounds={bounds} />
)}
</>
)}
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Top}
isHidden={!showHandles}
/>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Right}
isHidden={!showHandles}
/>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Bottom}
isHidden={!showHandles}
/>
<EdgeHandle
targetSize={targetSize}
size={size}
bounds={bounds}
edge={TLBoundsEdge.Left}
isHidden={!showHandles}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.TopLeft}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.TopRight}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.BottomRight}
/>
<CornerHandle
targetSize={targetSize}
size={size}
bounds={bounds}
corner={TLBoundsCorner.BottomLeft}
/>
<RotateHandle
targetSize={targetSize}
size={size}
bounds={bounds}
isHidden={!showHandles || !showRotateHandle}
/>
</SVGContainer>
</Container>
)

8
packages/core/src/components/bounds/corner-handle.tsx
View file

@ -14,25 +14,25 @@ interface CornerHandleProps {
targetSize: number
bounds: TLBounds
corner: TLBoundsCorner
isHidden?: boolean
}
export const CornerHandle = React.memo(
({ size, targetSize, corner, bounds }: CornerHandleProps): JSX.Element => {
({ size, targetSize, isHidden, corner, bounds }: CornerHandleProps): JSX.Element => {
const events = useBoundsHandleEvents(corner)
const isTop = corner === TLBoundsCorner.TopLeft || corner === TLBoundsCorner.TopRight
const isLeft = corner === TLBoundsCorner.TopLeft || corner === TLBoundsCorner.BottomLeft
return (
<g>
<g opacity={isHidden ? 0 : 1}>
<rect
className={cornerBgClassnames[corner]}
x={(isLeft ? -1 : bounds.width + 1) - targetSize}
y={(isTop ? -1 : bounds.height + 1) - targetSize}
width={targetSize * 2}
height={targetSize * 2}
pointerEvents="all"
fill="red"
pointerEvents={isHidden ? 'none' : 'all'}
{...events}
/>
<rect

38
packages/core/src/components/bounds/edge-handle.tsx
View file

@ -14,25 +14,29 @@ interface EdgeHandleProps {
size: number
bounds: TLBounds
edge: TLBoundsEdge
isHidden: boolean
}
export const EdgeHandle = React.memo(({ size, bounds, edge }: EdgeHandleProps): JSX.Element => {
const events = useBoundsHandleEvents(edge)
export const EdgeHandle = React.memo(
({ size, isHidden, bounds, edge }: EdgeHandleProps): JSX.Element => {
const events = useBoundsHandleEvents(edge)
const isHorizontal = edge === TLBoundsEdge.Top || edge === TLBoundsEdge.Bottom
const isFarEdge = edge === TLBoundsEdge.Right || edge === TLBoundsEdge.Bottom
const isHorizontal = edge === TLBoundsEdge.Top || edge === TLBoundsEdge.Bottom
const isFarEdge = edge === TLBoundsEdge.Right || edge === TLBoundsEdge.Bottom
const { height, width } = bounds
const { height, width } = bounds
return (
<rect
pointerEvents="all"
className={edgeClassnames[edge]}
x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}
width={isHorizontal ? Math.max(0, width + 1 - size) : size}
height={isHorizontal ? size : Math.max(0, height + 1 - size)}
{...events}
/>
)
})
return (
<rect
pointerEvents={isHidden ? 'none' : 'all'}
className={edgeClassnames[edge]}
opacity={isHidden ? 0 : 1}
x={isHorizontal ? size / 2 : (isFarEdge ? width + 1 : -1) - size / 2}
y={isHorizontal ? (isFarEdge ? height + 1 : -1) - size / 2 : size / 2}
width={isHorizontal ? Math.max(0, width + 1 - size) : size}
height={isHorizontal ? size : Math.max(0, height + 1 - size)}
{...events}
/>
)
}
)

7
packages/core/src/components/bounds/rotate-handle.tsx
View file

@ -6,20 +6,21 @@ interface RotateHandleProps {
bounds: TLBounds
size: number
targetSize: number
isHidden: boolean
}
export const RotateHandle = React.memo(
({ bounds, targetSize, size }: RotateHandleProps): JSX.Element => {
({ bounds, targetSize, size, isHidden }: RotateHandleProps): JSX.Element => {
const events = useBoundsHandleEvents('rotate')
return (
<g cursor="grab">
<g cursor="grab" opacity={isHidden ? 0 : 1}>
<circle
className="tl-transparent"
cx={bounds.width / 2}
cy={size * -2}
r={targetSize}
pointerEvents="all"
pointerEvents={isHidden ? 'none' : 'all'}
{...events}
/>
<circle

3
packages/core/src/components/page/page.tsx
View file

@ -55,13 +55,14 @@ export function Page<T extends TLShape, M extends Record<string, unknown>>({
{shapeTree.map((node) => (
<ShapeNode key={node.shape.id} utils={shapeUtils} {...node} />
))}
{bounds && !hideBounds && (
{bounds && (
<Bounds
zoom={zoom}
bounds={bounds}
viewportWidth={inputs.bounds.width}
isLocked={isLocked}
rotation={rotation}
isHidden={hideBounds}
/>
)}
{!hideIndicators &&