123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- import {
- moveOneLeft,
- moveOneRight,
- moveAllLeft,
- moveAllRight,
- } from "../zindex";
- import { KEYS, CODES } from "../keys";
- import { t } from "../i18n";
- import { getShortcutKey } from "../utils";
- import { register } from "./register";
- import {
- BringForwardIcon,
- BringToFrontIcon,
- SendBackwardIcon,
- SendToBackIcon,
- } from "../components/icons";
- import { isDarwin } from "../constants";
- import { StoreAction } from "../store";
- export const actionSendBackward = register({
- name: "sendBackward",
- label: "labels.sendBackward",
- keywords: ["move down", "zindex", "layer"],
- icon: SendBackwardIcon,
- trackEvent: { category: "element" },
- perform: (elements, appState) => {
- return {
- elements: moveOneLeft(elements, appState),
- appState,
- storeAction: StoreAction.CAPTURE,
- };
- },
- keyPriority: 40,
- keyTest: (event) =>
- event[KEYS.CTRL_OR_CMD] &&
- !event.shiftKey &&
- event.code === CODES.BRACKET_LEFT,
- PanelComponent: ({ updateData, appState }) => (
- <button
- type="button"
- className="zIndexButton"
- onClick={() => updateData(null)}
- title={`${t("labels.sendBackward")} — ${getShortcutKey("CtrlOrCmd+[")}`}
- >
- {SendBackwardIcon}
- </button>
- ),
- });
- export const actionBringForward = register({
- name: "bringForward",
- label: "labels.bringForward",
- keywords: ["move up", "zindex", "layer"],
- icon: BringForwardIcon,
- trackEvent: { category: "element" },
- perform: (elements, appState) => {
- return {
- elements: moveOneRight(elements, appState),
- appState,
- storeAction: StoreAction.CAPTURE,
- };
- },
- keyPriority: 40,
- keyTest: (event) =>
- event[KEYS.CTRL_OR_CMD] &&
- !event.shiftKey &&
- event.code === CODES.BRACKET_RIGHT,
- PanelComponent: ({ updateData, appState }) => (
- <button
- type="button"
- className="zIndexButton"
- onClick={() => updateData(null)}
- title={`${t("labels.bringForward")} — ${getShortcutKey("CtrlOrCmd+]")}`}
- >
- {BringForwardIcon}
- </button>
- ),
- });
- export const actionSendToBack = register({
- name: "sendToBack",
- label: "labels.sendToBack",
- keywords: ["move down", "zindex", "layer"],
- icon: SendToBackIcon,
- trackEvent: { category: "element" },
- perform: (elements, appState) => {
- return {
- elements: moveAllLeft(elements, appState),
- appState,
- storeAction: StoreAction.CAPTURE,
- };
- },
- keyTest: (event) =>
- isDarwin
- ? event[KEYS.CTRL_OR_CMD] &&
- event.altKey &&
- event.code === CODES.BRACKET_LEFT
- : event[KEYS.CTRL_OR_CMD] &&
- event.shiftKey &&
- event.code === CODES.BRACKET_LEFT,
- PanelComponent: ({ updateData, appState }) => (
- <button
- type="button"
- className="zIndexButton"
- onClick={() => updateData(null)}
- title={`${t("labels.sendToBack")} — ${
- isDarwin
- ? getShortcutKey("CtrlOrCmd+Alt+[")
- : getShortcutKey("CtrlOrCmd+Shift+[")
- }`}
- >
- {SendToBackIcon}
- </button>
- ),
- });
- export const actionBringToFront = register({
- name: "bringToFront",
- label: "labels.bringToFront",
- keywords: ["move up", "zindex", "layer"],
- icon: BringToFrontIcon,
- trackEvent: { category: "element" },
- perform: (elements, appState) => {
- return {
- elements: moveAllRight(elements, appState),
- appState,
- storeAction: StoreAction.CAPTURE,
- };
- },
- keyTest: (event) =>
- isDarwin
- ? event[KEYS.CTRL_OR_CMD] &&
- event.altKey &&
- event.code === CODES.BRACKET_RIGHT
- : event[KEYS.CTRL_OR_CMD] &&
- event.shiftKey &&
- event.code === CODES.BRACKET_RIGHT,
- PanelComponent: ({ updateData, appState }) => (
- <button
- type="button"
- className="zIndexButton"
- onClick={(event) => updateData(null)}
- title={`${t("labels.bringToFront")} — ${
- isDarwin
- ? getShortcutKey("CtrlOrCmd+Alt+]")
- : getShortcutKey("CtrlOrCmd+Shift+]")
- }`}
- >
- {BringToFrontIcon}
- </button>
- ),
- });
|