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

35
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,14 +4123,15 @@ 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) {
flushSync(() =>
this.setState({ this.setState({
showShapeSwitchPanel: true, showShapeSwitchPanel: true,
}); }),
} else if ( );
selectedElements[0].type === "rectangle" || }
selectedElements[0].type === "diamond" ||
selectedElements[0].type === "ellipse" if (this.state.showShapeSwitchPanel) {
) { if (isGenericSwitchable) {
const index = ["rectangle", "diamond", "ellipse"].indexOf( const index = ["rectangle", "diamond", "ellipse"].indexOf(
selectedElements[0].type, selectedElements[0].type,
); );
@ -4136,14 +4139,14 @@ class App extends React.Component<AppProps, AppState> {
(index + 1) % 3 (index + 1) % 3
] as ToolType; ] as ToolType;
this.setActiveTool({ type: nextType }); this.setActiveTool({ type: nextType });
} else if ( } else if (isLinearSwitchable) {
selectedElements[0].type === "arrow" || const index = ["arrow", "line"].indexOf(
selectedElements[0].type === "line" selectedElements[0].type,
) { );
const index = ["arrow", "line"].indexOf(selectedElements[0].type);
const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType; const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType;
this.setActiveTool({ type: nextType }); 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;
} }
} }

43
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()
.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 ? ( return app.state.showShapeSwitchPanel ? (
<Panel app={app} element={firstElement} /> <Panel app={app} element={firstElement} />
) : ( ) : isGenericInChart ? (
<Hint app={app} element={firstElement} /> <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}