Merge remote-tracking branch 'origin/master' into aakansha-custom-elements

This commit is contained in:
ad1992 2022-03-29 17:26:46 +05:30
commit d27b32dd2c
14 changed files with 209 additions and 116 deletions

View file

@ -413,7 +413,9 @@ class App extends React.Component<AppProps, AppState> {
}
setCustomType = (customType: string) => {
this.setState({ activeTool: { type: "custom", customType } });
this.setState({
activeTool: { ...this.state.activeTool, type: "custom", customType },
});
};
renderCustomElement = (coords: { x: number; y: number }) => {
@ -858,12 +860,11 @@ class App extends React.Component<AppProps, AppState> {
}
const scene = restore(initialData, null, null);
scene.appState = {
...scene.appState,
activeTool:
scene.appState.activeTool.type === "image"
? { type: "selection" }
? { ...scene.appState.activeTool, type: "selection" }
: scene.appState.activeTool,
isLoading: false,
};
@ -1118,7 +1119,9 @@ class App extends React.Component<AppProps, AppState> {
Object.keys(this.state.selectedElementIds).length &&
isEraserActive(this.state)
) {
this.setState({ activeTool: { type: "selection" } });
this.setState({
activeTool: { ...this.state.activeTool, type: "selection" },
});
}
if (prevState.theme !== this.state.theme) {
setEraserCursor(this.canvas, this.state.theme);
@ -1483,7 +1486,7 @@ class App extends React.Component<AppProps, AppState> {
} else if (data.text) {
this.addTextFromPaste(data.text);
}
this.setActiveTool({ type: "selection" });
this.setActiveTool({ ...this.state.activeTool, type: "selection" });
event?.preventDefault();
},
);
@ -1571,7 +1574,7 @@ class App extends React.Component<AppProps, AppState> {
}
},
);
this.setActiveTool({ type: "selection" });
this.setActiveTool({ ...this.state.activeTool, type: "selection" });
};
private addTextFromPaste(text: any) {
@ -1621,7 +1624,7 @@ class App extends React.Component<AppProps, AppState> {
};
toggleLock = (source: "keyboard" | "ui" = "ui") => {
if (!this.state.elementLocked) {
if (!this.state.activeTool.locked) {
trackEvent(
"toolbar",
"toggleLock",
@ -1629,11 +1632,18 @@ class App extends React.Component<AppProps, AppState> {
);
}
this.setState((prevState) => {
const activeTool: any = {
...prevState.activeTool,
locked: !prevState.activeTool.locked,
type: prevState.activeTool.locked
? "selection"
: prevState.activeTool.type,
};
if (prevState.activeTool.type === "custom") {
activeTool.customType = prevState.activeTool.customType;
}
return {
elementLocked: !prevState.elementLocked,
activeTool: prevState.elementLocked
? { type: "selection" }
: prevState.activeTool,
activeTool,
};
});
};
@ -1912,7 +1922,7 @@ class App extends React.Component<AppProps, AppState> {
`keyboard (${this.deviceType.isMobile ? "mobile" : "desktop"})`,
);
}
this.setActiveTool({ type: shape });
this.setActiveTool({ ...this.state.activeTool, type: shape });
} else if (event.key === KEYS.Q) {
this.toggleLock("keyboard");
}
@ -2125,7 +2135,7 @@ class App extends React.Component<AppProps, AppState> {
draggingElement: null,
editingElement: null,
});
if (this.state.elementLocked) {
if (this.state.activeTool.locked) {
setCursorForShape(this.canvas, this.state);
}
@ -3638,7 +3648,7 @@ class App extends React.Component<AppProps, AppState> {
): void => {
// if we're currently still editing text, clicking outside
// should only finalize it, not create another (irrespective
// of state.elementLocked)
// of state.activeTool.locked)
if (isTextElement(this.state.editingElement)) {
return;
}
@ -3662,9 +3672,9 @@ class App extends React.Component<AppProps, AppState> {
});
resetCursor(this.canvas);
if (!this.state.elementLocked) {
if (!this.state.activeTool.locked) {
this.setState({
activeTool: { type: "selection" },
activeTool: { ...this.state.activeTool, type: "selection" },
});
}
};
@ -4310,7 +4320,6 @@ class App extends React.Component<AppProps, AppState> {
resizingElement,
multiElement,
activeTool,
elementLocked,
isResizing,
isRotating,
} = this.state;
@ -4474,11 +4483,11 @@ class App extends React.Component<AppProps, AppState> {
);
}
this.setState({ suggestedBindings: [], startBoundElement: null });
if (!elementLocked) {
if (!activeTool.locked) {
resetCursor(this.canvas);
this.setState((prevState) => ({
draggingElement: null,
activeTool: { type: "selection" },
activeTool: { ...prevState.activeTool, type: "selection" },
selectedElementIds: {
...prevState.selectedElementIds,
[this.state.draggingElement!.id]: true,
@ -4667,7 +4676,11 @@ class App extends React.Component<AppProps, AppState> {
return;
}
if (!elementLocked && activeTool.type !== "freedraw" && draggingElement) {
if (
!activeTool.locked &&
activeTool.type !== "freedraw" &&
draggingElement
) {
this.setState((prevState) => ({
selectedElementIds: {
...prevState.selectedElementIds,
@ -4691,12 +4704,12 @@ class App extends React.Component<AppProps, AppState> {
);
}
if (!elementLocked && activeTool.type !== "freedraw") {
if (!activeTool.locked && activeTool.type !== "freedraw") {
resetCursor(this.canvas);
this.setState({
draggingElement: null,
suggestedBindings: [],
activeTool: { type: "selection" },
activeTool: { ...activeTool, type: "selection" },
});
} else {
this.setState({
@ -5002,7 +5015,7 @@ class App extends React.Component<AppProps, AppState> {
{
pendingImageElement: null,
editingElement: null,
activeTool: { type: "selection" },
activeTool: { ...this.state.activeTool, type: "selection" },
},
() => {
this.actionManager.executeAction(actionFinalize);