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

Issues/1827 group-ungroup icons (#1956)

Browse source 
* show group and ungroup action-icon

* change group-icon visiblilty

don't show group if selected is only a single element or a single group of elements

Co-authored-by: rene_mbp <harryloveslearning@googlemail.com>
This commit is contained in:
Rene 2020-07-26 00:42:06 +02:00 • committed by GitHub
parent 880cac2359
commit ebf2923c5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 190 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/actions/actionGroup.ts → src/actions/actionGroup.tsx
View file

@ -1,7 +1,11 @@
import React from "react";
import { KEYS } from "../keys";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
import { register } from "./register";
import { group, ungroup } from "../components/icons";
import { newElementWith } from "../element/mutateElement";
import { getSelectedElements } from "../scene";
import { getSelectedElements, isSomeElementSelected } from "../scene";
import {
getSelectedGroupIds,
selectGroup,
@ -13,6 +17,39 @@ import {
} from "../groups";
import { getNonDeletedElements } from "../element";
import { randomId } from "../random";
import { ToolButton } from "../components/ToolButton";
import { ExcalidrawElement } from "../element/types";
import { AppState } from "../types";
const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
if (elements.length >= 2) {
const groupIds = elements[0].groupIds;
for (const groupId of groupIds) {
if (
elements.reduce(
(acc, element) => acc && isElementInGroup(element, groupId),
true,
)
) {
return true;
}
}
}
return false;
};
const enableActionGroup = (
elements: readonly ExcalidrawElement[],
appState: AppState,
) => {
const selectedElements = getSelectedElements(
getNonDeletedElements(elements),
appState,
);
return (
selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
);
};
export const actionGroup = register({
name: "group",
@ -91,7 +128,7 @@ export const actionGroup = register({
contextMenuOrder: 4,
contextItemLabel: "labels.group",
contextItemPredicate: (elements, appState) =>
getSelectedElements(getNonDeletedElements(elements), appState).length > 1,
enableActionGroup(elements, appState),
keyTest: (event) => {
return (
!event.shiftKey &&
@ -99,6 +136,17 @@ export const actionGroup = register({
event.keyCode === KEYS.G_KEY_CODE
);
},
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
hidden={!enableActionGroup(elements, appState)}
type="button"
icon={group}
onClick={() => updateData(null)}
title={`${t("labels.group")} — ${getShortcutKey("CtrlOrCmd+G")}`}
aria-label={t("labels.group")}
visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
></ToolButton>
),
});
export const actionUngroup = register({
@ -140,4 +188,16 @@ export const actionUngroup = register({
contextItemLabel: "labels.ungroup",
contextItemPredicate: (elements, appState) =>
getSelectedGroupIds(appState).length > 0,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
type="button"
hidden={getSelectedGroupIds(appState).length === 0}
icon={ungroup}
onClick={() => updateData(null)}
title={`${t("labels.ungroup")} — ${getShortcutKey("CtrlOrCmd+Shift+G")}`}
aria-label={t("labels.ungroup")}
visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
></ToolButton>
),
});