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

switch different types altogether

Browse source
This commit is contained in:
Ryan Di 2025-03-24 12:07:57 +11:00
parent 41a4dadaaf
commit aa9139ad78
3 changed files with 53 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -193,9 +193,9 @@ import {
isElbowArrow, isElbowArrow,
isFlowchartNodeElement, isFlowchartNodeElement,
isBindableElement, isBindableElement,
isGenericSwitchableElement, areGenericSwitchableElements,
isGenericSwitchableToolType, isGenericSwitchableToolType,
isLinearSwitchableElement, areLinearSwitchableElements,
isLinearSwitchableToolType, isLinearSwitchableToolType,
} from "../element/typeChecks"; } from "../element/typeChecks";
import { getCenter, getDistance } from "../gesture"; import { getCenter, getDistance } from "../gesture";
@ -4110,8 +4110,9 @@ class App extends React.Component<AppProps, AppState> {
return; return;
} }
const genericSwitchable = isGenericSwitchableElement(selectedElements); const genericSwitchable =
const linearSwitchable = isLinearSwitchableElement(selectedElements); areGenericSwitchableElements(selectedElements);
const linearSwitchable = areLinearSwitchableElements(selectedElements);
if (genericSwitchable || linearSwitchable) { if (genericSwitchable || linearSwitchable) {
const firstElement = selectedElements[0]; const firstElement = selectedElements[0];
@ -4122,21 +4123,31 @@ class App extends React.Component<AppProps, AppState> {
event.preventDefault(); event.preventDefault();
if (editorJotaiStore.get(shapeSwitchAtom)?.type === "panel") { if (editorJotaiStore.get(shapeSwitchAtom)?.type === "panel") {
const index = genericSwitchable const sameType = selectedElements.every(
? GENERIC_SWITCHABLE_SHAPES.indexOf(selectedElements[0].type) (element) => element.type === selectedElements[0].type,
: LINEAR_SWITCHABLE_SHAPES.indexOf(selectedElements[0].type); );
const nextType = ( let nextType;
genericSwitchable
? GENERIC_SWITCHABLE_SHAPES[
(index + 1) % GENERIC_SWITCHABLE_SHAPES.length
]
: LINEAR_SWITCHABLE_SHAPES[
(index + 1) % LINEAR_SWITCHABLE_SHAPES.length
]
) as ToolType;
this.setActiveTool({ type: nextType }); if (genericSwitchable) {
const index = sameType
? GENERIC_SWITCHABLE_SHAPES.indexOf(selectedElements[0].type)
: -1;
nextType = GENERIC_SWITCHABLE_SHAPES[
(index + 1) % GENERIC_SWITCHABLE_SHAPES.length
] as ToolType;
this.setActiveTool({ type: nextType });
} else if (linearSwitchable) {
const index = sameType
? LINEAR_SWITCHABLE_SHAPES.indexOf(selectedElements[0].type)
: -1;
nextType = LINEAR_SWITCHABLE_SHAPES[
(index + 1) % LINEAR_SWITCHABLE_SHAPES.length
] as ToolType;
this.setActiveTool({ type: nextType });
}
} }
editorJotaiStore.set(shapeSwitchAtom, { editorJotaiStore.set(shapeSwitchAtom, {
@ -4827,7 +4838,7 @@ class App extends React.Component<AppProps, AppState> {
); );
if ( if (
isGenericSwitchableElement(selectedElements) && areGenericSwitchableElements(selectedElements) &&
isGenericSwitchableToolType(tool.type) isGenericSwitchableToolType(tool.type)
) { ) {
selectedElements.forEach((element) => { selectedElements.forEach((element) => {
@ -4889,7 +4900,7 @@ class App extends React.Component<AppProps, AppState> {
} }
if ( if (
isLinearSwitchableElement(selectedElements) && areLinearSwitchableElements(selectedElements) &&
isLinearSwitchableToolType(tool.type) isLinearSwitchableToolType(tool.type)
) { ) {
selectedElements.forEach((element) => { selectedElements.forEach((element) => {

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

@ -192,6 +192,10 @@ const Panel = ({
let [x1, y2, cx, cy] = [0, 0, 0, 0]; let [x1, y2, cx, cy] = [0, 0, 0, 0];
let rotatedBottomLeft = [0, 0]; let rotatedBottomLeft = [0, 0];
const sameType = elements.every(
(element) => element.type === elements[0].type,
);
if (elements.length === 1) { if (elements.length === 1) {
[x1, , , y2, cx, cy] = getElementAbsoluteCoords( [x1, , , y2, cx, cy] = getElementAbsoluteCoords(
elements[0], elements[0],
@ -245,17 +249,18 @@ const Panel = ({
> >
{SHAPES.map(([type, shortcut, icon]) => { {SHAPES.map(([type, shortcut, icon]) => {
const isSelected = const isSelected =
type === elements[0].type || sameType &&
(isArrowElement(elements[0]) && (type === elements[0].type ||
elements[0].elbowed && (isArrowElement(elements[0]) &&
type === "elbow") || elements[0].elbowed &&
(isArrowElement(elements[0]) && type === "elbow") ||
elements[0].roundness && (isArrowElement(elements[0]) &&
type === "curve") || elements[0].roundness &&
(isArrowElement(elements[0]) && type === "curve") ||
!elements[0].elbowed && (isArrowElement(elements[0]) &&
!elements[0].roundness && !elements[0].elbowed &&
type === "straight"); !elements[0].roundness &&
type === "straight"));
return ( return (
<ToolButton <ToolButton

15
packages/excalidraw/element/typeChecks.ts
View file

@ -350,18 +350,17 @@ type ExcalidrawGenericSwitchableElement =
| ExcalidrawEllipseElement | ExcalidrawEllipseElement
| ExcalidrawDiamondElement; | ExcalidrawDiamondElement;
export const isGenericSwitchableElement = ( export const areGenericSwitchableElements = (
elements: ExcalidrawElement[], elements: ExcalidrawElement[],
): elements is NonEmptyArray<ExcalidrawGenericSwitchableElement> => { ): elements is NonEmptyArray<ExcalidrawGenericSwitchableElement> => {
if (elements.length === 0) { if (elements.length === 0) {
return false; return false;
} }
const firstType = elements[0].type; return elements.every(
return ( (element) =>
(firstType === "rectangle" || element.type === "rectangle" ||
firstType === "ellipse" || element.type === "ellipse" ||
firstType === "diamond") && element.type === "diamond",
elements.every((element) => element.type === firstType)
); );
}; };
@ -371,7 +370,7 @@ export const isGenericSwitchableToolType = (
return type === "rectangle" || type === "ellipse" || type === "diamond"; return type === "rectangle" || type === "ellipse" || type === "diamond";
}; };
export const isLinearSwitchableElement = ( export const areLinearSwitchableElements = (
elements: ExcalidrawElement[], elements: ExcalidrawElement[],
): elements is NonEmptyArray<ExcalidrawLinearElement> => { ): elements is NonEmptyArray<ExcalidrawLinearElement> => {
if (elements.length === 0) { if (elements.length === 0) {