tldraw/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs

A tiny little drawing editor.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
import { useBreakpoint } from "../../context/breakpoints.mjs";
import {
  useAllowGroup,
  useAllowUngroup,
  useHasLinkShapeSelected,
  useIsInSelectState,
  useThreeStackableItems,
  useUnlockedSelectedShapesCount
} from "../../hooks/menu-hooks.mjs";
import { ZoomTo100MenuItem } from "../menu-items.mjs";
import { TldrawUiMenuActionItem } from "../primitives/menus/TldrawUiMenuActionItem.mjs";
function DefaultActionsMenuContent() {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(AlignMenuItems, {}),
    /* @__PURE__ */ jsx(DistributeMenuItems, {}),
    /* @__PURE__ */ jsx(StackMenuItems, {}),
    /* @__PURE__ */ jsx(ReorderMenuItems, {}),
    /* @__PURE__ */ jsx(ZoomOrRotateMenuItem, {}),
    /* @__PURE__ */ jsx(RotateCWMenuItem, {}),
    /* @__PURE__ */ jsx(EditLinkMenuItem, {}),
    /* @__PURE__ */ jsx(GroupOrUngroupMenuItem, {})
  ] });
}
function AlignMenuItems() {
  const twoSelected = useUnlockedSelectedShapesCount(2);
  const isInSelectState = useIsInSelectState();
  const enabled = twoSelected && isInSelectState;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "align-left", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "align-center-horizontal", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "align-right", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "stretch-horizontal", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "align-top", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "align-center-vertical", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "align-bottom", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "stretch-vertical", disabled: !enabled })
  ] });
}
function DistributeMenuItems() {
  const threeSelected = useUnlockedSelectedShapesCount(3);
  const isInSelectState = useIsInSelectState();
  const enabled = threeSelected && isInSelectState;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "distribute-horizontal", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "distribute-vertical", disabled: !enabled })
  ] });
}
function StackMenuItems() {
  const threeStackableItems = useThreeStackableItems();
  const isInSelectState = useIsInSelectState();
  const enabled = threeStackableItems && isInSelectState;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "stack-horizontal", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "stack-vertical", disabled: !enabled })
  ] });
}
function ReorderMenuItems() {
  const oneSelected = useUnlockedSelectedShapesCount(1);
  const isInSelectState = useIsInSelectState();
  const enabled = oneSelected && isInSelectState;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "send-to-back", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "send-backward", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "bring-forward", disabled: !enabled }),
    /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "bring-to-front", disabled: !enabled })
  ] });
}
function ZoomOrRotateMenuItem() {
  const breakpoint = useBreakpoint();
  return breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? /* @__PURE__ */ jsx(ZoomTo100MenuItem, {}) : /* @__PURE__ */ jsx(RotateCCWMenuItem, {});
}
function RotateCCWMenuItem() {
  const oneSelected = useUnlockedSelectedShapesCount(1);
  const isInSelectState = useIsInSelectState();
  const enabled = oneSelected && isInSelectState;
  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "rotate-ccw", disabled: !enabled });
}
function RotateCWMenuItem() {
  const oneSelected = useUnlockedSelectedShapesCount(1);
  const isInSelectState = useIsInSelectState();
  const enabled = oneSelected && isInSelectState;
  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "rotate-cw", disabled: !enabled });
}
function EditLinkMenuItem() {
  const showEditLink = useHasLinkShapeSelected();
  const isInSelectState = useIsInSelectState();
  const enabled = showEditLink && isInSelectState;
  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "edit-link", disabled: !enabled });
}
function GroupOrUngroupMenuItem() {
  const allowGroup = useAllowGroup();
  const allowUngroup = useAllowUngroup();
  return allowGroup ? /* @__PURE__ */ jsx(GroupMenuItem, {}) : allowUngroup ? /* @__PURE__ */ jsx(UngroupMenuItem, {}) : /* @__PURE__ */ jsx(GroupMenuItem, {});
}
function GroupMenuItem() {
  const twoSelected = useUnlockedSelectedShapesCount(2);
  const isInSelectState = useIsInSelectState();
  const enabled = twoSelected && isInSelectState;
  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "group", disabled: !enabled });
}
function UngroupMenuItem() {
  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "ungroup" });
}
export {
  AlignMenuItems,
  DefaultActionsMenuContent,
  DistributeMenuItems,
  EditLinkMenuItem,
  GroupMenuItem,
  GroupOrUngroupMenuItem,
  ReorderMenuItems,
  RotateCCWMenuItem,
  RotateCWMenuItem,
  StackMenuItems,
  UngroupMenuItem,
  ZoomOrRotateMenuItem
};
//# sourceMappingURL=DefaultActionsMenuContent.mjs.map