Fix inconsistent arrow start jump out

This commit is contained in:
Mark Tolmacs 2025-08-02 10:24:28 +02:00
parent 8067f07839
commit e3ad1f5935
No known key found for this signature in database

View File

@ -4717,9 +4717,8 @@ class App extends React.Component<AppProps, AppState> {
this.setState({ this.setState({
bindMode: "inside", bindMode: "inside",
}); });
} else {
this.bindModeHandler = null;
} }
this.bindModeHandler = null;
}, BIND_MODE_TIMEOUT); }, BIND_MODE_TIMEOUT);
} }
} }
@ -6163,11 +6162,21 @@ class App extends React.Component<AppProps, AppState> {
flushSync(() => { flushSync(() => {
this.setState({ this.setState({
bindMode: "inside", bindMode: "inside",
}); selectedLinearElement: this.state.selectedLinearElement
}); ? {
} else { ...this.state.selectedLinearElement,
this.bindModeHandler = null; pointerDownState: {
...this.state.selectedLinearElement
.pointerDownState,
arrowStartIsInside: true,
},
} }
: null,
});
});
}
this.bindModeHandler = null;
}, BIND_MODE_TIMEOUT); }, BIND_MODE_TIMEOUT);
} }
} else if (!hoveredElement) { } else if (!hoveredElement) {
@ -6893,8 +6902,9 @@ class App extends React.Component<AppProps, AppState> {
if (this.state.bindMode === "inside" || this.state.bindMode === "skip") { if (this.state.bindMode === "inside" || this.state.bindMode === "skip") {
if (this.bindModeHandler) { if (this.bindModeHandler) {
clearTimeout(this.bindModeHandler); clearTimeout(this.bindModeHandler);
}
this.bindModeHandler = null; this.bindModeHandler = null;
}
// We need this iteration to complete binding and change // We need this iteration to complete binding and change
// back to orbit mode after that // back to orbit mode after that
setTimeout(() => setTimeout(() =>
@ -7009,8 +7019,9 @@ class App extends React.Component<AppProps, AppState> {
private maybeCleanupAfterMissingPointerUp = (event: PointerEvent | null) => { private maybeCleanupAfterMissingPointerUp = (event: PointerEvent | null) => {
if (this.bindModeHandler) { if (this.bindModeHandler) {
clearTimeout(this.bindModeHandler); clearTimeout(this.bindModeHandler);
}
this.bindModeHandler = null; this.bindModeHandler = null;
}
this.setState({ this.setState({
bindMode: "orbit", bindMode: "orbit",
}); });
@ -8095,19 +8106,6 @@ class App extends React.Component<AppProps, AppState> {
this.state.zoom, this.state.zoom,
); );
if (isSimpleArrow(element)) {
this.setState((prevState) => {
const nextSelectedElementIds = makeNextSelectedElementIds(
{ [element.id]: true },
prevState,
);
return {
selectedElementIds: nextSelectedElementIds,
};
});
}
this.scene.mutateElement(element, { this.scene.mutateElement(element, {
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(0, 0)], points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(0, 0)],
}); });
@ -8132,6 +8130,29 @@ class App extends React.Component<AppProps, AppState> {
{ newArrow: true }, { newArrow: true },
); );
} }
if (isSimpleArrow(element)) {
if (this.bindModeHandler) {
clearTimeout(this.bindModeHandler);
this.bindModeHandler = null;
}
this.bindModeHandler = setTimeout(() => {
this.setState({
bindMode: "inside",
selectedLinearElement: this.state.selectedLinearElement
? {
...this.state.selectedLinearElement,
pointerDownState: {
...this.state.selectedLinearElement?.pointerDownState,
arrowStartIsInside: !!boundElement,
},
}
: null,
});
}, BIND_MODE_TIMEOUT);
}
this.setState((prevState) => { this.setState((prevState) => {
let linearElementEditor = null; let linearElementEditor = null;
let nextSelectedElementIds = prevState.selectedElementIds; let nextSelectedElementIds = prevState.selectedElementIds;
@ -8156,11 +8177,6 @@ class App extends React.Component<AppProps, AppState> {
); );
} }
if (this.bindModeHandler) {
clearTimeout(this.bindModeHandler);
}
this.bindModeHandler = null;
return { return {
...prevState, ...prevState,
bindMode: "orbit", bindMode: "orbit",
@ -8547,6 +8563,16 @@ class App extends React.Component<AppProps, AppState> {
flushSync(() => { flushSync(() => {
this.setState({ this.setState({
bindMode: "inside", bindMode: "inside",
selectedLinearElement: this.state.selectedLinearElement
? {
...this.state.selectedLinearElement,
pointerDownState: {
...this.state.selectedLinearElement
.pointerDownState,
arrowStartIsInside: true,
},
}
: null,
}); });
}); });
@ -8587,9 +8613,9 @@ class App extends React.Component<AppProps, AppState> {
this.setState(newState); this.setState(newState);
} }
} else {
this.bindModeHandler = null;
} }
this.bindModeHandler = null;
}, BIND_MODE_TIMEOUT); }, BIND_MODE_TIMEOUT);
} }
} else if (!hoveredElement) { } else if (!hoveredElement) {