Compare commits

..

1 Commits

Author SHA1 Message Date
dwelle
3439da164d fix: manually confirm active wysiwyg on pointerdown 2021-05-27 18:30:33 +02:00
3 changed files with 20 additions and 25 deletions

View File

@@ -322,6 +322,8 @@ class App extends React.Component<AppProps, AppState> {
private id: string; private id: string;
private history: History; private history: History;
private activeWysiwyg: null | { handleSubmit: () => void } = null;
constructor(props: AppProps) { constructor(props: AppProps) {
super(props); super(props);
const defaultAppState = getDefaultAppState(); const defaultAppState = getDefaultAppState();
@@ -1204,16 +1206,11 @@ class App extends React.Component<AppProps, AppState> {
// event.touches.length === 1 will also prevent inserting text when user's zooming // event.touches.length === 1 will also prevent inserting text when user's zooming
if (didTapTwice && event.touches.length === 1) { if (didTapTwice && event.touches.length === 1) {
const [touch] = event.touches; const [touch] = event.touches;
this.handleCanvasDoubleClick( // @ts-ignore
{ this.handleCanvasDoubleClick({
clientX: touch.clientX, clientX: touch.clientX,
clientY: touch.clientY, clientY: touch.clientY,
ctrlKey: false, });
metaKey: false,
altKey: false,
},
false,
);
didTapTwice = false; didTapTwice = false;
clearTimeout(tappedTwiceTimer); clearTimeout(tappedTwiceTimer);
} }
@@ -1768,7 +1765,7 @@ class App extends React.Component<AppProps, AppState> {
]); ]);
}; };
textWysiwyg({ const { handleSubmit } = textWysiwyg({
id: element.id, id: element.id,
appState: this.state, appState: this.state,
canvas: this.canvas, canvas: this.canvas,
@@ -1792,6 +1789,7 @@ class App extends React.Component<AppProps, AppState> {
} }
}), }),
onSubmit: withBatchedUpdates(({ text, viaKeyboard }) => { onSubmit: withBatchedUpdates(({ text, viaKeyboard }) => {
this.activeWysiwyg = null;
const isDeleted = !text.trim(); const isDeleted = !text.trim();
updateElement(text, isDeleted); updateElement(text, isDeleted);
// select the created text element only if submitting via keyboard // select the created text element only if submitting via keyboard
@@ -1833,6 +1831,8 @@ class App extends React.Component<AppProps, AppState> {
// do an initial update to re-initialize element position since we were // do an initial update to re-initialize element position since we were
// modifying element's x/y for sake of editor (case: syncing to remote) // modifying element's x/y for sake of editor (case: syncing to remote)
updateElement(element.text); updateElement(element.text);
this.activeWysiwyg = { handleSubmit };
} }
private getTextElementAtPosition( private getTextElementAtPosition(
@@ -1885,7 +1885,6 @@ class App extends React.Component<AppProps, AppState> {
sceneX, sceneX,
sceneY, sceneY,
insertAtParentCenter = true, insertAtParentCenter = true,
createTextIfNotExists = true,
}: { }: {
/** X position to insert text at */ /** X position to insert text at */
sceneX: number; sceneX: number;
@@ -1893,14 +1892,9 @@ class App extends React.Component<AppProps, AppState> {
sceneY: number; sceneY: number;
/** whether to attempt to insert at element center if applicable */ /** whether to attempt to insert at element center if applicable */
insertAtParentCenter?: boolean; insertAtParentCenter?: boolean;
createTextIfNotExists?: boolean;
}) => { }) => {
const existingTextElement = this.getTextElementAtPosition(sceneX, sceneY); const existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
// if (!existingTextElement && !createTextIfNotExists) {
// return;
// }
const parentCenterPosition = const parentCenterPosition =
insertAtParentCenter && insertAtParentCenter &&
this.getTextWysiwygSnappedToCenterPosition( this.getTextWysiwygSnappedToCenterPosition(
@@ -1972,11 +1966,7 @@ class App extends React.Component<AppProps, AppState> {
}; };
private handleCanvasDoubleClick = ( private handleCanvasDoubleClick = (
event: Pick< event: React.MouseEvent<HTMLCanvasElement>,
React.PointerEvent<HTMLCanvasElement>,
"clientX" | "clientY" | "ctrlKey" | "metaKey" | "altKey"
>,
createTextIfNotExists = true,
) => { ) => {
// case: double-clicking with arrow/line tool selected would both create // case: double-clicking with arrow/line tool selected would both create
// text and enter multiElement mode // text and enter multiElement mode
@@ -2047,7 +2037,6 @@ class App extends React.Component<AppProps, AppState> {
sceneX, sceneX,
sceneY, sceneY,
insertAtParentCenter: !event.altKey, insertAtParentCenter: !event.altKey,
createTextIfNotExists,
}); });
} }
}; };
@@ -2301,6 +2290,10 @@ class App extends React.Component<AppProps, AppState> {
) => { ) => {
event.persist(); event.persist();
if (this.activeWysiwyg) {
this.activeWysiwyg.handleSubmit();
}
// remove any active selection when we start to interact with canvas // remove any active selection when we start to interact with canvas
// (mainly, we care about removing selection outside the component which // (mainly, we care about removing selection outside the component which
// would prevent our copy handling otherwise) // would prevent our copy handling otherwise)
@@ -3206,7 +3199,7 @@ class App extends React.Component<AppProps, AppState> {
const selectedElements = getSelectedElements( const selectedElements = getSelectedElements(
this.scene.getElements(), this.scene.getElements(),
this.state, this.state,
).filter((element) => element.id !== this.state.editingElement?.id); );
// prevent dragging even if we're no longer holding cmd/ctrl otherwise // prevent dragging even if we're no longer holding cmd/ctrl otherwise
// it would have weird results (stuff jumping all over the screen) // it would have weird results (stuff jumping all over the screen)
if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) { if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) {

View File

@@ -16,7 +16,7 @@ describe("textWysiwyg", () => {
const element = UI.createElement("text"); const element = UI.createElement("text");
new Pointer("mouse").clickOn(element); new Pointer("mouse").doubleClickOn(element);
textarea = document.querySelector( textarea = document.querySelector(
".excalidraw-textEditorContainer > textarea", ".excalidraw-textEditorContainer > textarea",
)!; )!;

View File

@@ -368,4 +368,6 @@ export const textWysiwyg = ({
excalidrawContainer excalidrawContainer
?.querySelector(".excalidraw-textEditorContainer")! ?.querySelector(".excalidraw-textEditorContainer")!
.appendChild(editable); .appendChild(editable);
return { handleSubmit };
}; };