ac149c1014
This PR adds a user preference for "dynamic size mode" where the scale of shapes (text size, stroke width) is relative to the current zoom level. This means that the stroke width in screen pixels (or text size in screen pixels) is identical regardless of zoom level.  - [x] Draw shape - [x] Text shape - [x] Highlighter shape - [x] Geo shape - [x] Arrow shape - [x] Note shape - [x] Line shape Embed shape? ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `feature` — New feature ### Test Plan 1. Use the tools. 2. Change zoom - [ ] Unit Tests ### Release Notes - Adds a dynamic size user preferences. - Removes double click to reset scale on text shapes. - Removes double click to reset autosize on text shapes. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
|
|
import classNames from 'classnames'
|
|
import { SIDES } from '../../constants'
|
|
import { useEditor } from '../../hooks/useEditor'
|
|
|
|
/** @public */
|
|
export interface TLHandleProps {
|
|
shapeId: TLShapeId
|
|
handle: TLHandle
|
|
zoom: number
|
|
isCoarse: boolean
|
|
className?: string
|
|
}
|
|
|
|
/** @public @react */
|
|
export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) {
|
|
const editor = useEditor()
|
|
const br = (isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoom
|
|
|
|
if (handle.type === 'clone') {
|
|
// bouba
|
|
const fr = 3 / zoom
|
|
const path = `M0,${-fr} A${fr},${fr} 0 0,1 0,${fr}`
|
|
|
|
const index = SIDES.indexOf(handle.id as (typeof SIDES)[number])
|
|
return (
|
|
<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
|
|
<circle className="tl-handle__bg" r={br} />
|
|
{/* Half circle */}
|
|
<path className="tl-handle__fg" d={path} transform={`rotate(${-90 + 90 * index})`} />
|
|
</g>
|
|
)
|
|
}
|
|
|
|
const fr = (handle.type === 'create' && isCoarse ? 3 : 4) / Math.max(zoom, 0.25)
|
|
return (
|
|
<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
|
|
<circle className="tl-handle__bg" r={br} />
|
|
<circle className="tl-handle__fg" r={fr} />
|
|
</g>
|
|
)
|
|
}
|