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