rewrite wysiwyg property updating (#1387)

* rewrite wysiwyg property updating

* reuse existing class

* fix case of focus being stolen by other UIs

* revert mistake csp removal

* ensure we don't run cleanup twice

* fix opacity updating

* add shape actions menu class to constants
This commit is contained in:
David Luzar 2020-04-12 15:57:57 +02:00 committed by GitHub
parent d79c859cd9
commit 6771b505ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 73 additions and 80 deletions

View file

@ -1228,7 +1228,8 @@ class App extends React.Component<any, AppState> {
]);
};
const wysiwygElement = textWysiwyg({
textWysiwyg({
id: element.id,
x,
y,
initText: element.text,
@ -1248,7 +1249,6 @@ class App extends React.Component<any, AppState> {
onSubmit: withBatchedUpdates((text) => {
updateElement(text);
this.setState((prevState) => ({
wysiwygElement: null,
selectedElementIds: {
...prevState.selectedElementIds,
[element.id]: true,
@ -1269,7 +1269,7 @@ class App extends React.Component<any, AppState> {
}),
});
// deselect all other elements when inserting text
this.setState({ selectedElementIds: {}, wysiwygElement });
this.setState({ selectedElementIds: {} });
// 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)
@ -1579,9 +1579,6 @@ class App extends React.Component<any, AppState> {
private handleCanvasPointerDown = (
event: React.PointerEvent<HTMLCanvasElement>,
) => {
if (this.state.wysiwygElement && this.state.wysiwygElement.submit) {
this.state.wysiwygElement.submit();
}
if (lastPointerUp !== null) {
// Unfortunately, sometimes we don't get a pointerup after a pointerdown,
// this can happen when a contextual menu or alert is triggered. In order to avoid

View file

@ -26,6 +26,7 @@ import { ErrorDialog } from "./ErrorDialog";
import { ShortcutsDialog } from "./ShortcutsDialog";
import { LoadingMessage } from "./LoadingMessage";
import { GitHubCorner } from "./GitHubCorner";
import { CLASSES } from "../constants";
interface LayerUIProps {
actionManager: ActionManager;
@ -146,7 +147,7 @@ export const LayerUI = React.memo(
</Section>
{showSelectedShapeActions(appState, elements) && (
<Section heading="selectedShapeActions">
<Island className="App-menu__left" padding={4}>
<Island className={CLASSES.SHAPE_ACTIONS_MENU} padding={4}>
<SelectedShapeActions
appState={appState}
elements={elements}