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

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

@ -15,7 +15,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
background: var(--default-bg-color);
.key { .key {
background: var(--color-primary-light); background: var(--color-primary-light);
@ -43,5 +42,6 @@
border-radius: 0.5rem; border-radius: 0.5rem;
background: var(--default-bg-color); background: var(--default-bg-color);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); 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 }); return app.setState({ showShapeSwitchPanel: false });
}, [app]); }, [app]);
if ( const isGeneric = firstElement && isGenericSwitchableElement(firstElement);
firstElement && const isLinear = firstElement && isLinearSwitchableElement(firstElement);
selectedElements.length === 1 && const isGenericInChart =
(isGenericSwitchableElement(firstElement) || isGeneric &&
isLinearSwitchableElement(firstElement)) app.scene
) { .getNonDeletedElements()
return app.state.showShapeSwitchPanel ? ( .some(
<Panel app={app} element={firstElement} /> (el) =>
) : ( el.type === "arrow" &&
<Hint app={app} element={firstElement} /> (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; return null;
@ -155,7 +176,7 @@ const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
style={{ style={{
position: "absolute", position: "absolute",
top: `${ top: `${
y + GAP_VERTICAL * app.state.zoom.value - app.state.offsetTop y + (GAP_VERTICAL + 8) * app.state.zoom.value - app.state.offsetTop
}px`, }px`,
left: `${x - app.state.offsetLeft - GAP_HORIZONTAL}px`, left: `${x - app.state.offsetLeft - GAP_HORIZONTAL}px`,
zIndex: 2, zIndex: 2,
@ -175,11 +196,11 @@ const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
return ( return (
<ToolButton <ToolButton
className="Shape" className="Shape"
key={type} key={`${element.version}_${type}`}
type="radio" type="radio"
icon={icon} icon={icon}
checked={isSelected} checked={isSelected}
name="editor-current-shape" name="shape-switch-option"
title={type} title={type}
keyBindingLabel={""} keyBindingLabel={""}
aria-label={type} aria-label={type}