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
GitHub
parent
a7d3a77cb0
commit
3e31ef2a7d
154 changed files with 1728 additions and 1706 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue