Remove helpers / extraneous API methods. (#1745)

This PR removes several extraneous computed values from the editor. It
adds some silly instance state onto the instance state record and
unifies a few methods which were inconsistent. This is fit and finish
work 🧽

## Computed Values

In general, where once we had a getter and setter for `isBlahMode`,
which really masked either an `_isBlahMode` atom on the editor or
`instanceState.isBlahMode`, these are merged into `instanceState`; they
can be accessed / updated via `editor.instanceState` /
`editor.updateInstanceState`.

## tldraw select tool specific things

This PR also removes some tldraw specific state checks and creates new
component overrides to allow us to include them in tldraw/tldraw.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
- [x] End to end tests

### Release Notes

- [tldraw] rename `useReadonly` to `useReadOnly`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isChangingStyle`
- [editor] remove `Editor.isCoarsePointer`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isFocused`
- [editor] remove `Editor.isGridMode`
- [editor] remove `Editor.isPenMode`
- [editor] remove `Editor.isReadOnly`
- [editor] remove `Editor.isSnapMode`
- [editor] remove `Editor.isToolLocked`
- [editor] remove `Editor.locale`
- [editor] rename `Editor.pageState` to `Editor.currentPageState`
- [editor] add `Editor.pageStates`
- [editor] add `Editor.setErasingIds`
- [editor] add `Editor.setEditingId`
- [editor] add several new component overrides
This commit is contained in:
Steve Ruiz 2023-07-18 22:50:23 +01:00 committed by GitHub
parent a7d3a77cb0
commit 3e31ef2a7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
154 changed files with 1728 additions and 1706 deletions

View file

@ -117,59 +117,53 @@ export const Canvas = track(function Canvas() {
)
})
const GridWrapper = track(function GridWrapper() {
function GridWrapper() {
const editor = useEditor()
const gridSize = useValue('gridSize', () => editor.documentSettings.gridSize, [editor])
const { x, y, z } = useValue('camera', () => editor.camera, [editor])
const isGridMode = useValue('isGridMode', () => editor.instanceState.isGridMode, [editor])
const { Grid } = useEditorComponents()
// get grid from context
const { gridSize } = editor.documentSettings
const { x, y, z } = editor.camera
const isGridMode = editor.isGridMode
if (!(Grid && isGridMode)) return null
return <Grid x={x} y={y} z={z} size={gridSize} />
})
}
const ScribbleWrapper = track(function ScribbleWrapper() {
function ScribbleWrapper() {
const editor = useEditor()
const scribble = editor.scribble
const zoom = editor.zoomLevel
const scribble = useValue('scribble', () => editor.instanceState.scribble, [editor])
const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor])
const { Scribble } = useEditorComponents()
if (!(Scribble && scribble)) return null
return <Scribble className="tl-user-scribble" scribble={scribble} zoom={zoom} />
})
return <Scribble className="tl-user-scribble" scribble={scribble} zoom={zoomLevel} />
}
const BrushWrapper = track(function BrushWrapper() {
function BrushWrapper() {
const editor = useEditor()
const { brush } = editor
const brush = useValue('brush', () => editor.instanceState.brush, [editor])
const { Brush } = useEditorComponents()
if (!(Brush && brush)) return null
return <Brush className="tl-user-brush" brush={brush} />
})
}
export const ZoomBrushWrapper = track(function Zoom() {
function ZoomBrushWrapper() {
const editor = useEditor()
const { zoomBrush } = editor
const zoomBrush = useValue('zoomBrush', () => editor.instanceState.zoomBrush, [editor])
const { ZoomBrush } = useEditorComponents()
if (!(ZoomBrush && zoomBrush)) return null
return <ZoomBrush className="tl-user-brush" brush={zoomBrush} />
})
}
export const SnapLinesWrapper = track(function SnapLines() {
function SnapLinesWrapper() {
const editor = useEditor()
const {
snaps: { lines },
zoomLevel,
} = editor
const lines = useValue('snapLines', () => editor.snaps.lines, [editor])
const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor])
const { SnapLine } = useEditorComponents()
if (!(SnapLine && lines.length > 0)) return null
@ -181,24 +175,22 @@ export const SnapLinesWrapper = track(function SnapLines() {
))}
</>
)
})
}
const MIN_HANDLE_DISTANCE = 48
const HandlesWrapper = track(function HandlesWrapper() {
function HandlesWrapper() {
const editor = useEditor()
const { Handles } = useEditorComponents()
const zoom = editor.zoomLevel
const isChangingStyle = editor.isChangingStyle
const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor])
const onlySelectedShape = useValue('onlySelectedShape', () => editor.onlySelectedShape, [editor])
const isChangingStyle = useValue('isChangingStyle', () => editor.instanceState.isChangingStyle, [
editor,
])
const isReadOnly = useValue('isChangingStyle', () => editor.instanceState.isReadOnly, [editor])
const onlySelectedShape = editor.onlySelectedShape
const shouldDisplayHandles =
editor.isInAny('select.idle', 'select.pointing_handle') &&
!isChangingStyle &&
!editor.isReadOnly
if (!(onlySelectedShape && shouldDisplayHandles)) return null
if (!Handles || !onlySelectedShape || isChangingStyle || isReadOnly) return null
const handles = editor.getHandles(onlySelectedShape)
@ -216,7 +208,7 @@ const HandlesWrapper = track(function HandlesWrapper() {
const prev = handles[i - 1]
const next = handles[i + 1]
if (prev && next) {
if (Math.hypot(prev.y - next.y, prev.x - next.x) < MIN_HANDLE_DISTANCE / zoom) {
if (Math.hypot(prev.y - next.y, prev.x - next.x) < MIN_HANDLE_DISTANCE / zoomLevel) {
continue
}
}
@ -228,17 +220,17 @@ const HandlesWrapper = track(function HandlesWrapper() {
handlesToDisplay.sort((a) => (a.type === 'vertex' ? 1 : -1))
return (
<svg className="tl-user-handles tl-overlays__item">
<Handles>
<g transform={Matrix2d.toCssString(transform)}>
{handlesToDisplay.map((handle) => {
return <HandleWrapper key={handle.id} shapeId={onlySelectedShape.id} handle={handle} />
})}
</g>
</svg>
</Handles>
)
})
}
const HandleWrapper = ({ shapeId, handle }: { shapeId: TLShapeId; handle: TLHandle }) => {
function HandleWrapper({ shapeId, handle }: { shapeId: TLShapeId; handle: TLHandle }) {
const events = useHandleEvents(shapeId, handle.id)
const { Handle } = useEditorComponents()
@ -279,43 +271,45 @@ const ShapesToDisplay = track(function ShapesToDisplay() {
)
})
const SelectedIdIndicators = track(function SelectedIdIndicators() {
function SelectedIdIndicators() {
const editor = useEditor()
const shouldDisplay =
editor.isInAny(
'select.idle',
'select.brushing',
'select.scribble_brushing',
'select.pointing_shape',
'select.pointing_selection',
'select.pointing_handle'
) && !editor.isChangingStyle
const selectedIds = useValue('selectedIds', () => editor.currentPageState.selectedIds, [editor])
const shouldDisplay = useValue(
'should display selected ids',
() => {
// todo: move to tldraw selected ids wrapper
return (
editor.isInAny(
'select.idle',
'select.brushing',
'select.scribble_brushing',
'select.pointing_shape',
'select.pointing_selection',
'select.pointing_handle'
) && !editor.instanceState.isChangingStyle
)
},
[editor]
)
if (!shouldDisplay) return null
return (
<>
{editor.selectedIds.map((id) => (
{selectedIds.map((id) => (
<ShapeIndicator key={id + '_indicator'} className="tl-user-indicator__selected" id={id} />
))}
</>
)
})
}
const HoveredShapeIndicator = function HoveredShapeIndicator() {
const editor = useEditor()
const { HoveredShapeIndicator } = useEditorComponents()
const hoveredId = useValue('hovered id', () => editor.currentPageState.hoveredId, [editor])
if (!hoveredId || !HoveredShapeIndicator) return null
const displayingHoveredId = useValue(
'hovered id and should display',
() =>
editor.isInAny('select.idle', 'select.editing_shape') ? editor.pageState.hoveredId : null,
[editor]
)
if (!displayingHoveredId) return null
return <ShapeIndicator className="tl-user-indicator__hovered" id={displayingHoveredId} />
return <HoveredShapeIndicator shapeId={hoveredId} />
}
const HintedShapeIndicator = track(function HintedShapeIndicator() {