smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: support customType in activeTool (#5144)

Browse source 
* feat: support customType in activeTool

* fix

* rewrite types and handling

* tweaks

* fix

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2022-05-06 18:21:22 +05:30 • committed by GitHub
parent 1ed1529f96
commit 64d330a332
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 210 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/Actions.tsx
View file

@ -15,7 +15,12 @@ import {
} from "../scene";
import { SHAPES } from "../shapes";
import { AppState, Zoom } from "../types";
import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
import {
capitalizeString,
isTransparent,
updateActiveTool,
setCursorForShape,
} from "../utils";
import Stack from "./Stack";
import { ToolButton } from "./ToolButton";
import { hasStrokeColor } from "../scene/comparisons";
@ -229,7 +234,9 @@ export const ShapesSwitcher = ({
if (appState.activeTool.type !== value) {
trackEvent("toolbar", value, "ui");
}
const nextActiveTool = { ...activeTool, type: value };
const nextActiveTool = updateActiveTool(appState, {
type: value,
});
setAppState({
activeTool: nextActiveTool,
multiElement: null,

49
src/components/App.tsx
View file

@ -183,7 +183,7 @@ import {
import Scene from "../scene/Scene";
import { RenderConfig, ScrollBars } from "../scene/types";
import { getStateForZoom } from "../scene/zoom";
import { findShapeByKey } from "../shapes";
import { findShapeByKey, SHAPES } from "../shapes";
import {
AppClassProperties,
AppProps,
@ -219,6 +219,7 @@ import {
withBatchedUpdatesThrottled,
updateObject,
setEraserCursor,
updateActiveTool,
} from "../utils";
import ContextMenu, { ContextMenuOption } from "./ContextMenu";
import LayerUI from "./LayerUI";
@ -1074,7 +1075,7 @@ class App extends React.Component<AppProps, AppState> {
isEraserActive(this.state)
) {
this.setState({
activeTool: { ...this.state.activeTool, type: "selection" },
activeTool: updateActiveTool(this.state, { type: "selection" }),
});
}
if (
@ -1444,7 +1445,7 @@ class App extends React.Component<AppProps, AppState> {
} else if (data.text) {
this.addTextFromPaste(data.text);
}
this.setActiveTool({ ...this.state.activeTool, type: "selection" });
this.setActiveTool({ type: "selection" });
event?.preventDefault();
},
);
@ -1532,7 +1533,7 @@ class App extends React.Component<AppProps, AppState> {
}
},
);
this.setActiveTool({ ...this.state.activeTool, type: "selection" });
this.setActiveTool({ type: "selection" });
};
private addTextFromPaste(text: any) {
@ -1594,10 +1595,13 @@ class App extends React.Component<AppProps, AppState> {
return {
activeTool: {
...prevState.activeTool,
...updateActiveTool(
this.state,
prevState.activeTool.locked
? { type: "selection" }
: prevState.activeTool,
),
locked: !prevState.activeTool.locked,
type: prevState.activeTool.locked
? "selection"
: prevState.activeTool.type,
},
};
});
@ -1895,7 +1899,7 @@ class App extends React.Component<AppProps, AppState> {
`keyboard (${this.deviceType.isMobile ? "mobile" : "desktop"})`,
);
}
this.setActiveTool({ ...this.state.activeTool, type: shape });
this.setActiveTool({ type: shape });
event.stopPropagation();
} else if (event.key === KEYS.Q) {
this.toggleLock("keyboard");
@ -1971,28 +1975,33 @@ class App extends React.Component<AppProps, AppState> {
}
});
private setActiveTool(tool: AppState["activeTool"]) {
private setActiveTool(
tool:
| { type: typeof SHAPES[number]["value"] | "eraser" }
| { type: "custom"; customType: string },
) {
const nextActiveTool = updateActiveTool(this.state, tool);
if (!isHoldingSpace) {
setCursorForShape(this.canvas, this.state);
}
if (isToolIcon(document.activeElement)) {
this.focusContainer();
}
if (!isLinearElementType(tool.type)) {
if (!isLinearElementType(nextActiveTool.type)) {
this.setState({ suggestedBindings: [] });
}
if (tool.type === "image") {
if (nextActiveTool.type === "image") {
this.onImageAction();
}
if (tool.type !== "selection") {
if (nextActiveTool.type !== "selection") {
this.setState({
activeTool: tool,
activeTool: nextActiveTool,
selectedElementIds: {},
selectedGroupIds: {},
editingGroupId: null,
});
} else {
this.setState({ activeTool: tool });
this.setState({ activeTool: nextActiveTool });
}
}
@ -3057,6 +3066,8 @@ class App extends React.Component<AppProps, AppState> {
this.state.activeTool.type,
pointerDownState,
);
} else if (this.state.activeTool.type === "custom") {
setCursor(this.canvas, CURSOR_TYPE.CROSSHAIR);
} else if (this.state.activeTool.type !== "eraser") {
this.createGenericElementOnPointerDown(
this.state.activeTool.type,
@ -3638,7 +3649,7 @@ class App extends React.Component<AppProps, AppState> {
resetCursor(this.canvas);
if (!this.state.activeTool.locked) {
this.setState({
activeTool: { ...this.state.activeTool, type: "selection" },
activeTool: updateActiveTool(this.state, { type: "selection" }),
});
}
};
@ -4457,7 +4468,9 @@ class App extends React.Component<AppProps, AppState> {
resetCursor(this.canvas);
this.setState((prevState) => ({
draggingElement: null,
activeTool: { ...prevState.activeTool, type: "selection" },
activeTool: updateActiveTool(this.state, {
type: "selection",
}),
selectedElementIds: {
...prevState.selectedElementIds,
[this.state.draggingElement!.id]: true,
@ -4679,7 +4692,7 @@ class App extends React.Component<AppProps, AppState> {
this.setState({
draggingElement: null,
suggestedBindings: [],
activeTool: { ...activeTool, type: "selection" },
activeTool: updateActiveTool(this.state, { type: "selection" }),
});
} else {
this.setState({
@ -4985,7 +4998,7 @@ class App extends React.Component<AppProps, AppState> {
{
pendingImageElement: null,
editingElement: null,
activeTool: { ...this.state.activeTool, type: "selection" },
activeTool: updateActiveTool(this.state, { type: "selection" }),
},
() => {
this.actionManager.executeAction(actionFinalize);