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

style tweaks

Browse source
This commit is contained in:
Ryan Di 2025-03-14 21:49:36 +11:00
parent 6c126d3c21
commit 56a0b33101
3 changed files with 65 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

55
packages/excalidraw/components/App.tsx
View file

@ -4103,13 +4103,15 @@ class App extends React.Component<AppProps, AppState> {
return;
}
const firstElement = selectedElements[0];
const isGenericSwitchable =
firstElement && isGenericSwitchableElement(firstElement);
const isLinearSwitchable =
firstElement && isLinearSwitchableElement(firstElement);
if (
selectedElements.length === 1 &&
(selectedElements[0].type === "rectangle" ||
selectedElements[0].type === "diamond" ||
selectedElements[0].type === "ellipse" ||
selectedElements[0].type === "arrow" ||
selectedElements[0].type === "line")
(isGenericSwitchable || isLinearSwitchable)
) {
if (this.state.showShapeSwitchPanel && event.key === KEYS.ESCAPE) {
this.setState({
@ -4121,28 +4123,29 @@ class App extends React.Component<AppProps, AppState> {
if (event.key === KEYS.SLASH || event.key === KEYS.TAB) {
if (!this.state.showShapeSwitchPanel) {
this.setState({
showShapeSwitchPanel: true,
});
} else if (
selectedElements[0].type === "rectangle" ||
selectedElements[0].type === "diamond" ||
selectedElements[0].type === "ellipse"
) {
const index = ["rectangle", "diamond", "ellipse"].indexOf(
selectedElements[0].type,
flushSync(() =>
this.setState({
showShapeSwitchPanel: true,
}),
);
const nextType = ["rectangle", "diamond", "ellipse"][
(index + 1) % 3
] as ToolType;
this.setActiveTool({ type: nextType });
} else if (
selectedElements[0].type === "arrow" ||
selectedElements[0].type === "line"
) {
const index = ["arrow", "line"].indexOf(selectedElements[0].type);
const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType;
this.setActiveTool({ type: nextType });
}
if (this.state.showShapeSwitchPanel) {
if (isGenericSwitchable) {
const index = ["rectangle", "diamond", "ellipse"].indexOf(
selectedElements[0].type,
);
const nextType = ["rectangle", "diamond", "ellipse"][
(index + 1) % 3
] as ToolType;
this.setActiveTool({ type: nextType });
} else if (isLinearSwitchable) {
const index = ["arrow", "line"].indexOf(
selectedElements[0].type,
);
const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType;
this.setActiveTool({ type: nextType });
}
}
return;

2
packages/excalidraw/components/ShapeSwitch.scss
View file

@ -15,7 +15,6 @@
align-items: center;
justify-content: center;
opacity: 0;
background: var(--default-bg-color);
.key {
background: var(--color-primary-light);
@ -43,5 +42,6 @@
border-radius: 0.5rem;
background: var(--default-bg-color);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
padding: 0.5rem;
}
}

49
packages/excalidraw/components/ShapeSwitch.tsx
View file

@ -45,17 +45,38 @@ const ShapeSwitch = ({ app }: { app: App }) => {
return app.setState({ showShapeSwitchPanel: false });
}, [app]);
if (
firstElement &&
selectedElements.length === 1 &&
(isGenericSwitchableElement(firstElement) ||
isLinearSwitchableElement(firstElement))
) {
return app.state.showShapeSwitchPanel ? (
<Panel app={app} element={firstElement} />
) : (
<Hint app={app} element={firstElement} />
);
const isGeneric = firstElement && isGenericSwitchableElement(firstElement);
const isLinear = firstElement && isLinearSwitchableElement(firstElement);
const isGenericInChart =
isGeneric &&
app.scene
.getNonDeletedElements()
.some(
(el) =>
el.type === "arrow" &&
(el.startBinding?.elementId === firstElement.id ||
el.endBinding?.elementId === firstElement.id),
);
const isLinearInChart =
isLinear &&
isArrowElement(firstElement) &&
(firstElement.startBinding || firstElement.endBinding);
if (firstElement && selectedElements.length === 1) {
if (isGeneric) {
return app.state.showShapeSwitchPanel ? (
<Panel app={app} element={firstElement} />
) : isGenericInChart ? (
<Hint app={app} element={firstElement} />
) : null;
}
if (isLinear) {
return app.state.showShapeSwitchPanel ? (
<Panel app={app} element={firstElement} />
) : isLinearInChart ? (
<Hint app={app} element={firstElement} />
) : null;
}
}
return null;
@ -155,7 +176,7 @@ const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
style={{
position: "absolute",
top: `${
y + GAP_VERTICAL * app.state.zoom.value - app.state.offsetTop
y + (GAP_VERTICAL + 8) * app.state.zoom.value - app.state.offsetTop
}px`,
left: `${x - app.state.offsetLeft - GAP_HORIZONTAL}px`,
zIndex: 2,
@ -175,11 +196,11 @@ const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
return (
<ToolButton
className="Shape"
key={type}
key={`${element.version}_${type}`}
type="radio"
icon={icon}
checked={isSelected}
name="editor-current-shape"
name="shape-switch-option"
title={type}
keyBindingLabel={""}
aria-label={type}