Pete Hunt
5 years ago
committed by
GitHub
parent
5252726307
commit
61e5b66dac
@ -0,0 +1,119 @@
|
||||
import { KEYS } from "../keys";
|
||||
import { register } from "./register";
|
||||
import nanoid from "nanoid";
|
||||
import { newElementWith } from "../element/mutateElement";
|
||||
import { getSelectedElements } from "../scene";
|
||||
import {
|
||||
getSelectedGroupIds,
|
||||
selectGroup,
|
||||
selectGroupsForSelectedElements,
|
||||
getElementsInGroup,
|
||||
addToGroup,
|
||||
removeFromSelectedGroups,
|
||||
} from "../groups";
|
||||
import { getNonDeletedElements } from "../element";
|
||||
|
||||
export const actionGroup = register({
|
||||
name: "group",
|
||||
perform: (elements, appState) => {
|
||||
const selectedElements = getSelectedElements(
|
||||
getNonDeletedElements(elements),
|
||||
appState,
|
||||
);
|
||||
if (selectedElements.length < 2) {
|
||||
// nothing to group
|
||||
return { appState, elements, commitToHistory: false };
|
||||
}
|
||||
// if everything is already grouped into 1 group, there is nothing to do
|
||||
const selectedGroupIds = getSelectedGroupIds(appState);
|
||||
if (selectedGroupIds.length === 1) {
|
||||
const selectedGroupId = selectedGroupIds[0];
|
||||
const elementIdsInGroup = new Set(
|
||||
getElementsInGroup(elements, selectedGroupId).map(
|
||||
(element) => element.id,
|
||||
),
|
||||
);
|
||||
const selectedElementIds = new Set(
|
||||
selectedElements.map((element) => element.id),
|
||||
);
|
||||
const combinedSet = new Set([
|
||||
...Array.from(elementIdsInGroup),
|
||||
...Array.from(selectedElementIds),
|
||||
]);
|
||||
if (combinedSet.size === elementIdsInGroup.size) {
|
||||
// no incremental ids in the selected ids
|
||||
return { appState, elements, commitToHistory: false };
|
||||
}
|
||||
}
|
||||
const newGroupId = nanoid();
|
||||
const updatedElements = elements.map((element) => {
|
||||
if (!appState.selectedElementIds[element.id]) {
|
||||
return element;
|
||||
}
|
||||
return newElementWith(element, {
|
||||
groupIds: addToGroup(
|
||||
element.groupIds,
|
||||
newGroupId,
|
||||
appState.editingGroupId,
|
||||
),
|
||||
});
|
||||
});
|
||||
return {
|
||||
appState: selectGroup(
|
||||
newGroupId,
|
||||
{ ...appState, selectedGroupIds: {} },
|
||||
getNonDeletedElements(updatedElements),
|
||||
),
|
||||
elements: updatedElements,
|
||||
commitToHistory: true,
|
||||
};
|
||||
},
|
||||
contextMenuOrder: 4,
|
||||
contextItemLabel: "labels.group",
|
||||
keyTest: (event) => {
|
||||
return (
|
||||
!event.shiftKey &&
|
||||
event[KEYS.CTRL_OR_CMD] &&
|
||||
event.keyCode === KEYS.G_KEY_CODE
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
export const actionUngroup = register({
|
||||
name: "ungroup",
|
||||
perform: (elements, appState) => {
|
||||
const groupIds = getSelectedGroupIds(appState);
|
||||
if (groupIds.length === 0) {
|
||||
return { appState, elements, commitToHistory: false };
|
||||
}
|
||||
const nextElements = elements.map((element) => {
|
||||
const nextGroupIds = removeFromSelectedGroups(
|
||||
element.groupIds,
|
||||
appState.selectedGroupIds,
|
||||
);
|
||||
if (nextGroupIds.length === element.groupIds.length) {
|
||||
return element;
|
||||
}
|
||||
return newElementWith(element, {
|
||||
groupIds: nextGroupIds,
|
||||
});
|
||||
});
|
||||
return {
|
||||
appState: selectGroupsForSelectedElements(
|
||||
{ ...appState, selectedGroupIds: {} },
|
||||
getNonDeletedElements(nextElements),
|
||||
),
|
||||
elements: nextElements,
|
||||
commitToHistory: true,
|
||||
};
|
||||
},
|
||||
keyTest: (event) => {
|
||||
return (
|
||||
event.shiftKey &&
|
||||
event[KEYS.CTRL_OR_CMD] &&
|
||||
event.keyCode === KEYS.G_KEY_CODE
|
||||
);
|
||||
},
|
||||
contextMenuOrder: 5,
|
||||
contextItemLabel: "labels.ungroup",
|
||||
});
|
||||
@ -0,0 +1,130 @@
|
||||
import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
|
||||
import { AppState } from "./types";
|
||||
import { getSelectedElements } from "./scene";
|
||||
|
||||
export function selectGroup(
|
||||
groupId: GroupId,
|
||||
appState: AppState,
|
||||
elements: readonly NonDeleted<ExcalidrawElement>[],
|
||||
): AppState {
|
||||
return {
|
||||
...appState,
|
||||
selectedGroupIds: { ...appState.selectedGroupIds, [groupId]: true },
|
||||
selectedElementIds: {
|
||||
...appState.selectedElementIds,
|
||||
...Object.fromEntries(
|
||||
elements
|
||||
.filter((element) => element.groupIds.includes(groupId))
|
||||
.map((element) => [element.id, true]),
|
||||
),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* If the element's group is selected, don't render an individual
|
||||
* selection border around it.
|
||||
*/
|
||||
export function isSelectedViaGroup(
|
||||
appState: AppState,
|
||||
element: ExcalidrawElement,
|
||||
) {
|
||||
return !!element.groupIds
|
||||
.filter((groupId) => groupId !== appState.editingGroupId)
|
||||
.find((groupId) => appState.selectedGroupIds[groupId]);
|
||||
}
|
||||
|
||||
export function getSelectedGroupIds(appState: AppState): GroupId[] {
|
||||
return Object.entries(appState.selectedGroupIds)
|
||||
.filter(([groupId, isSelected]) => isSelected)
|
||||
.map(([groupId, isSelected]) => groupId);
|
||||
}
|
||||
|
||||
/**
|
||||
* When you select an element, you often want to actually select the whole group it's in, unless
|
||||
* you're currently editing that group.
|
||||
*/
|
||||
export function selectGroupsForSelectedElements(
|
||||
appState: AppState,
|
||||
elements: readonly NonDeleted<ExcalidrawElement>[],
|
||||
): AppState {
|
||||
let nextAppState = { ...appState };
|
||||
|
||||
const selectedElements = getSelectedElements(elements, appState);
|
||||
|
||||
for (const selectedElement of selectedElements) {
|
||||
let groupIds = selectedElement.groupIds;
|
||||
if (appState.editingGroupId) {
|
||||
// handle the case where a group is nested within a group
|
||||
const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
|
||||
if (indexOfEditingGroup > -1) {
|
||||
groupIds = groupIds.slice(0, indexOfEditingGroup);
|
||||
}
|
||||
}
|
||||
if (groupIds.length > 0) {
|
||||
const groupId = groupIds[groupIds.length - 1];
|
||||
nextAppState = selectGroup(groupId, nextAppState, elements);
|
||||
}
|
||||
}
|
||||
|
||||
return nextAppState;
|
||||
}
|
||||
|
||||
export function isElementInGroup(element: ExcalidrawElement, groupId: string) {
|
||||
return element.groupIds.includes(groupId);
|
||||
}
|
||||
|
||||
export function getElementsInGroup(
|
||||
elements: readonly ExcalidrawElement[],
|
||||
groupId: string,
|
||||
) {
|
||||
return elements.filter((element) => isElementInGroup(element, groupId));
|
||||
}
|
||||
|
||||
export function getSelectedGroupIdForElement(
|
||||
element: ExcalidrawElement,
|
||||
selectedGroupIds: { [groupId: string]: boolean },
|
||||
) {
|
||||
return element.groupIds.find((groupId) => selectedGroupIds[groupId]);
|
||||
}
|
||||
|
||||
export function getNewGroupIdsForDuplication(
|
||||
groupIds: GroupId[],
|
||||
editingGroupId: GroupId | null,
|
||||
mapper: (groupId: GroupId) => GroupId,
|
||||
) {
|
||||
const copy = [...groupIds];
|
||||
const positionOfEditingGroupId = editingGroupId
|
||||
? groupIds.indexOf(editingGroupId)
|
||||
: -1;
|
||||
const endIndex =
|
||||
positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
|
||||
for (let i = 0; i < endIndex; i++) {
|
||||
copy[i] = mapper(copy[i]);
|
||||
}
|
||||
|
||||
return copy;
|
||||
}
|
||||
|
||||
export function addToGroup(
|
||||
prevGroupIds: GroupId[],
|
||||
newGroupId: GroupId,
|
||||
editingGroupId: GroupId | null,
|
||||
) {
|
||||
// insert before the editingGroupId, or push to the end.
|
||||
const groupIds = [...prevGroupIds];
|
||||
const positionOfEditingGroupId = editingGroupId
|
||||
? groupIds.indexOf(editingGroupId)
|
||||
: -1;
|
||||
const positionToInsert =
|
||||
positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
|
||||
groupIds.splice(positionToInsert, 0, newGroupId);
|
||||
return groupIds;
|
||||
}
|
||||
|
||||
export function removeFromSelectedGroups(
|
||||
groupIds: GroupId[],
|
||||
selectedGroupIds: { [groupId: string]: boolean },
|
||||
) {
|
||||
return groupIds.filter((groupId) => !selectedGroupIds[groupId]);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue