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

Improves hover appearance

Browse source
This commit is contained in:
Steve Ruiz 2021-05-28 22:05:40 +01:00
parent fe3980c80c
commit 39ef1cf317
5 changed files with 69 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/canvas/shape.tsx
View file

@ -36,7 +36,13 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
transform={transform}
{...events}
>
{isSelecting && <HoverIndicator as="use" href={'#' + id} />}
{isSelecting && (
<HoverIndicator
as="use"
href={'#' + id}
strokeWidth={+shape.style.strokeWidth + 8}
/>
)}
<StyledShape id={id} style={shape.style} />
{/*
<text
@ -102,7 +108,8 @@ const StyledGroup = styled('g', {
[`& ${HoverIndicator}`]: {
opacity: '1',
stroke: '$hint',
zStrokeWidth: [8, 4],
fill: '$hint',
// zStrokeWidth: [8, 4],
},
},
},
@ -113,7 +120,8 @@ const StyledGroup = styled('g', {
[`& ${HoverIndicator}`]: {
opacity: '1',
stroke: '$hint',
zStrokeWidth: [6, 3],
fill: '$hint',
// zStrokeWidth: [6, 3],
},
},
},
@ -124,7 +132,8 @@ const StyledGroup = styled('g', {
[`& ${HoverIndicator}`]: {
opacity: '1',
stroke: '$hint',
zStrokeWidth: [8, 4],
fill: '$hint',
// zStrokeWidth: [8, 4],
},
},
},

10
components/toolbar.tsx
View file

@ -1,6 +1,6 @@
import state, { useSelector } from 'state'
import styled from 'styles'
import { Lock, Menu, Unlock } from 'react-feather'
import { Lock, Menu, RotateCcw, RotateCw, Unlock } from 'react-feather'
import { IconButton } from './shared'
export default function Toolbar() {
@ -86,8 +86,12 @@ export default function Toolbar() {
<Button onClick={() => state.send('RESET_CAMERA')}>Reset Camera</Button>
</Section>
<Section>
<Button onClick={() => state.send('UNDO')}>Undo</Button>
<Button onClick={() => state.send('REDO')}>Redo</Button>
<Button title="Undo" onClick={() => state.send('UNDO')}>
<RotateCcw />
</Button>
<Button title="Redo" onClick={() => state.send('REDO')}>
<RotateCw />
</Button>
</Section>
</ToolbarContainer>
)

22
lib/shape-utils/draw.tsx
View file

@ -12,7 +12,7 @@ import {
translateBounds,
} from 'utils/utils'
const pathCache = new WeakMap<number[][], string>([])
const pathCache = new WeakMap<DrawShape, string>([])
const draw = registerShapeUtils<DrawShape>({
boundsCache: new WeakMap([]),
@ -40,27 +40,27 @@ const draw = registerShapeUtils<DrawShape>({
},
render(shape) {
const { id, point, points, style } = shape
const { id, points, style } = shape
if (!pathCache.has(points)) {
if (!pathCache.has(shape)) {
if (points.length < 2) {
const left = vec.add(point, [6, 0])
const left = [+style.strokeWidth, 0]
let d: number[][] = []
for (let i = 0; i < 10; i++) {
d.push(vec.rotWith(left, point, i * ((Math.PI * 2) / 8)))
d.push(vec.rotWith(left, [0, 0], i * ((Math.PI * 2) / 8)))
}
pathCache.set(points, getSvgPathFromStroke(d))
pathCache.set(shape, getSvgPathFromStroke(d))
} else {
pathCache.set(
points,
shape,
getSvgPathFromStroke(
getStroke(points, { size: Number(style.strokeWidth) * 2 })
getStroke(points, { size: +style.strokeWidth * 2 })
)
)
}
}
return <path id={id} d={pathCache.get(points)} />
return <path id={id} d={pathCache.get(shape)} />
},
applyStyles(shape, style) {
@ -95,7 +95,9 @@ const draw = registerShapeUtils<DrawShape>({
for (let i = 1; i < shape.points.length; i++) {
let curr = shape.points[i]
if (vec.distanceToLineSegment(prev, curr, pt) < 4) {
if (
vec.distanceToLineSegment(prev, curr, pt) < +shape.style.strokeWidth
) {
return true
}
prev = curr

27
state/state.ts
View file

@ -274,6 +274,7 @@ const state = createState({
},
usingTool: {
initial: 'draw',
onEnter: 'clearSelectedIds',
states: {
draw: {
initial: 'creating',
@ -281,6 +282,11 @@ const state = createState({
creating: {
on: {
CANCELLED: { to: 'selecting' },
POINTED_SHAPE: {
get: 'newDraw',
do: 'createShape',
to: 'draw.editing',
},
POINTED_CANVAS: {
get: 'newDraw',
do: 'createShape',
@ -313,6 +319,11 @@ const state = createState({
creating: {
on: {
CANCELLED: { to: 'selecting' },
POINTED_SHAPE: {
get: 'newDot',
do: 'createShape',
to: 'dot.editing',
},
POINTED_CANVAS: {
get: 'newDot',
do: 'createShape',
@ -364,6 +375,9 @@ const state = createState({
creating: {
on: {
CANCELLED: { to: 'selecting' },
POINTED_SHAPE: {
to: 'circle.editing',
},
POINTED_CANVAS: {
to: 'circle.editing',
},
@ -418,6 +432,9 @@ const state = createState({
creating: {
on: {
CANCELLED: { to: 'selecting' },
POINTED_SHAPE: {
to: 'rectangle.editing',
},
POINTED_CANVAS: {
to: 'rectangle.editing',
},
@ -445,6 +462,11 @@ const state = createState({
creating: {
on: {
CANCELLED: { to: 'selecting' },
POINTED_SHAPE: {
get: 'newRay',
do: 'createShape',
to: 'ray.editing',
},
POINTED_CANVAS: {
get: 'newRay',
do: 'createShape',
@ -470,6 +492,11 @@ const state = createState({
creating: {
on: {
CANCELLED: { to: 'selecting' },
POINTED_SHAPE: {
get: 'newLine',
do: 'createShape',
to: 'line.editing',
},
POINTED_CANVAS: {
get: 'newLine',
do: 'createShape',

17
styles/stitches.config.ts
View file

@ -45,22 +45,21 @@ const { styled, global, css, theme, getCssString } = createCss({
utils: {
zStrokeWidth: () => (value: number | number[]) => {
if (Array.isArray(value)) {
return {
strokeWidth: `calc(${value[0]}px / var(--camera-zoom))`,
}
}
// const [val, min, max] = value
// return {
// strokeWidth:
// min !== undefined && max !== undefined
// ? `clamp(${min}, ${val} / var(--camera-zoom), ${max})`
// ? `clamp(${min}px, (calc(${val}px / var(--camera-zoom))), ${max}px)`
// : min !== undefined
// ? `min(${min}, ${val} / var(--camera-zoom))`
// : `calc(${val} / var(--camera-zoom))`,
// }
// ? `min(${min}px, calc(${val}px / var(--camera-zoom)))`
// : `calc(${val}px / var(--camera-zoom))`,
// }
return {
strokeWidth: `calc(${value[0]}px / var(--camera-zoom))`,
}
}
return {
strokeWidth: `calc(${value}px / var(--camera-zoom))`,
}