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

fixes cursors, bounding box when hidden (#133)

Browse source
This commit is contained in:
Steve Ruiz 2021-10-07 16:06:11 +01:00 committed by GitHub
parent 798bae28ca
commit a144360adf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,9 +32,9 @@ export function Bounds({
const smallDimension = Math.min(bounds.width, bounds.height) * zoom
// If the bounds are small, don't show the rotate handle
const showRotateHandle = !isLocked && smallDimension > 32
const showRotateHandle = !isHidden && !isLocked && smallDimension > 32
// If the bounds are very small, don't show the corner handles
const showHandles = !isLocked && smallDimension > 16
const showHandles = !isHidden && !isLocked && smallDimension > 16
return (
<Container bounds={bounds} rotation={rotation}>

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

@ -3,10 +3,10 @@ import { useBoundsHandleEvents } from '+hooks'
import { TLBoundsCorner, TLBounds } from '+types'
const cornerBgClassnames = {
[TLBoundsCorner.TopLeft]: 'tl-transparent tl-cursor-nwse',
[TLBoundsCorner.TopRight]: 'tl-transparent tl-cursor-nesw',
[TLBoundsCorner.BottomRight]: 'tl-transparent tl-cursor-nwse',
[TLBoundsCorner.BottomLeft]: 'tl-transparent tl-cursor-nesw',
[TLBoundsCorner.TopLeft]: 'tl-cursor-nwse',
[TLBoundsCorner.TopRight]: 'tl-cursor-nesw',
[TLBoundsCorner.BottomRight]: 'tl-cursor-nwse',
[TLBoundsCorner.BottomLeft]: 'tl-cursor-nesw',
}
interface CornerHandleProps {
@ -27,7 +27,7 @@ export const CornerHandle = React.memo(
return (
<g opacity={isHidden ? 0 : 1}>
<rect
className={cornerBgClassnames[corner]}
className={'tl-transparent ' + (isHidden ? '' : cornerBgClassnames[corner])}
x={(isLeft ? -1 : bounds.width + 1) - targetSize}
y={(isTop ? -1 : bounds.height + 1) - targetSize}
width={targetSize * 2}

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

@ -3,10 +3,10 @@ import { useBoundsHandleEvents } from '+hooks'
import { TLBoundsEdge, TLBounds } from '+types'
const edgeClassnames = {
[TLBoundsEdge.Top]: 'tl-transparent tl-edge-handle tl-cursor-ns',
[TLBoundsEdge.Right]: 'tl-transparent tl-edge-handle tl-cursor-ew',
[TLBoundsEdge.Bottom]: 'tl-transparent tl-edge-handle tl-cursor-ns',
[TLBoundsEdge.Left]: 'tl-transparent tl-edge-handle tl-cursor-ew',
[TLBoundsEdge.Top]: 'tl-cursor-ns',
[TLBoundsEdge.Right]: 'tl-cursor-ew',
[TLBoundsEdge.Bottom]: 'tl-cursor-ns',
[TLBoundsEdge.Left]: 'tl-cursor-ew',
}
interface EdgeHandleProps {
@ -29,7 +29,7 @@ export const EdgeHandle = React.memo(
return (
<rect
pointerEvents={isHidden ? 'none' : 'all'}
className={edgeClassnames[edge]}
className={'tl-transparent tl-edge-handle ' + (isHidden ? '' : 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}