kopia lustrzana https://github.com/Tldraw/Tldraw
Merge cc12b7b513
into 7442456d85
commit
a6c0bbac14
|
@ -1087,13 +1087,15 @@ input,
|
||||||
* One extra nuance is we don't use this behavior for:
|
* One extra nuance is we don't use this behavior for:
|
||||||
* - arrows which have weird geometry and just gets in the way.
|
* - arrows which have weird geometry and just gets in the way.
|
||||||
* - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
|
* - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
|
||||||
|
* - shapes that are not filled
|
||||||
*/
|
*/
|
||||||
.tl-canvas[data-iseditinganything='true']
|
.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])
|
||||||
.tl-shape:not(
|
.tl-shape:not(
|
||||||
[data-shape-type='arrow'],
|
[data-shape-type='arrow'],
|
||||||
[data-shape-type='draw'],
|
[data-shape-type='draw'],
|
||||||
[data-shape-type='line'],
|
[data-shape-type='line'],
|
||||||
[data-shape-type='highlight']
|
[data-shape-type='highlight'],
|
||||||
|
[data-shape-is-filled='false']
|
||||||
) {
|
) {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
|
@ -142,6 +142,8 @@ export const Shape = memo(function Shape({
|
||||||
|
|
||||||
if (!shape) return null
|
if (!shape) return null
|
||||||
|
|
||||||
|
const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{util.backgroundComponent && (
|
{util.backgroundComponent && (
|
||||||
|
@ -156,7 +158,13 @@ export const Shape = memo(function Shape({
|
||||||
</OptionalErrorBoundary>
|
</OptionalErrorBoundary>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div ref={containerRef} className="tl-shape" data-shape-type={shape.type} draggable={false}>
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="tl-shape"
|
||||||
|
data-shape-type={shape.type}
|
||||||
|
data-shape-is-filled={isFilledShape}
|
||||||
|
draggable={false}
|
||||||
|
>
|
||||||
<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
|
<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
|
||||||
<InnerShape shape={shape} util={util} />
|
<InnerShape shape={shape} util={util} />
|
||||||
</OptionalErrorBoundary>
|
</OptionalErrorBoundary>
|
||||||
|
|
|
@ -121,12 +121,18 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
|
||||||
() => editor.getEditingShapeId() !== null,
|
() => editor.getEditingShapeId() !== null,
|
||||||
[editor]
|
[editor]
|
||||||
)
|
)
|
||||||
|
const isSelectingAnything = useValue(
|
||||||
|
'isSelectingAnything',
|
||||||
|
() => !!editor.getSelectedShapeIds().length,
|
||||||
|
[editor]
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={rCanvas}
|
ref={rCanvas}
|
||||||
draggable={false}
|
draggable={false}
|
||||||
data-iseditinganything={isEditingAnything}
|
data-iseditinganything={isEditingAnything}
|
||||||
|
data-isselectinganything={isSelectingAnything}
|
||||||
className={classNames('tl-canvas', className)}
|
className={classNames('tl-canvas', className)}
|
||||||
data-testid="canvas"
|
data-testid="canvas"
|
||||||
{...events}
|
{...events}
|
||||||
|
|
|
@ -160,10 +160,15 @@ export function useEditableText(id: TLShapeId, type: string, text: string) {
|
||||||
|
|
||||||
const handleInputPointerDown = useCallback(
|
const handleInputPointerDown = useCallback(
|
||||||
(e: React.PointerEvent) => {
|
(e: React.PointerEvent) => {
|
||||||
// This is important that we only dispatch when editing.
|
// N.B. We used to only do this only when isEditing to help
|
||||||
// Otherwise, you can get into a state where you're editing
|
// prevent an issue where you could drag a selected shape
|
||||||
// able to drag a selected shape behind another shape.
|
// behind another shape. That is addressed now by the CSS logic
|
||||||
if (!isEditing) return
|
// looking at data-isselectinganything.
|
||||||
|
//
|
||||||
|
// We still need to follow this logic even if not isEditing
|
||||||
|
// because otherwise there is some flakiness in selection.
|
||||||
|
// When selecting text, it would sometimes select some text
|
||||||
|
// partially if we didn't dispatch/stop below.
|
||||||
|
|
||||||
editor.dispatch({
|
editor.dispatch({
|
||||||
...getPointerInfo(e),
|
...getPointerInfo(e),
|
||||||
|
@ -175,7 +180,7 @@ export function useEditableText(id: TLShapeId, type: string, text: string) {
|
||||||
|
|
||||||
stopEventPropagation(e) // we need to prevent blurring the input
|
stopEventPropagation(e) // we need to prevent blurring the input
|
||||||
},
|
},
|
||||||
[editor, id, isEditing]
|
[editor, id]
|
||||||
)
|
)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
Ładowanie…
Reference in New Issue