actionZindex.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import {
  2. moveOneLeft,
  3. moveOneRight,
  4. moveAllLeft,
  5. moveAllRight,
  6. } from "../zindex";
  7. import { KEYS, CODES } from "../keys";
  8. import { t } from "../i18n";
  9. import { getShortcutKey } from "../utils";
  10. import { register } from "./register";
  11. import {
  12. BringForwardIcon,
  13. BringToFrontIcon,
  14. SendBackwardIcon,
  15. SendToBackIcon,
  16. } from "../components/icons";
  17. import { isDarwin } from "../constants";
  18. import { StoreAction } from "../store";
  19. export const actionSendBackward = register({
  20. name: "sendBackward",
  21. label: "labels.sendBackward",
  22. keywords: ["move down", "zindex", "layer"],
  23. icon: SendBackwardIcon,
  24. trackEvent: { category: "element" },
  25. perform: (elements, appState) => {
  26. return {
  27. elements: moveOneLeft(elements, appState),
  28. appState,
  29. storeAction: StoreAction.CAPTURE,
  30. };
  31. },
  32. keyPriority: 40,
  33. keyTest: (event) =>
  34. event[KEYS.CTRL_OR_CMD] &&
  35. !event.shiftKey &&
  36. event.code === CODES.BRACKET_LEFT,
  37. PanelComponent: ({ updateData, appState }) => (
  38. <button
  39. type="button"
  40. className="zIndexButton"
  41. onClick={() => updateData(null)}
  42. title={`${t("labels.sendBackward")} — ${getShortcutKey("CtrlOrCmd+[")}`}
  43. >
  44. {SendBackwardIcon}
  45. </button>
  46. ),
  47. });
  48. export const actionBringForward = register({
  49. name: "bringForward",
  50. label: "labels.bringForward",
  51. keywords: ["move up", "zindex", "layer"],
  52. icon: BringForwardIcon,
  53. trackEvent: { category: "element" },
  54. perform: (elements, appState) => {
  55. return {
  56. elements: moveOneRight(elements, appState),
  57. appState,
  58. storeAction: StoreAction.CAPTURE,
  59. };
  60. },
  61. keyPriority: 40,
  62. keyTest: (event) =>
  63. event[KEYS.CTRL_OR_CMD] &&
  64. !event.shiftKey &&
  65. event.code === CODES.BRACKET_RIGHT,
  66. PanelComponent: ({ updateData, appState }) => (
  67. <button
  68. type="button"
  69. className="zIndexButton"
  70. onClick={() => updateData(null)}
  71. title={`${t("labels.bringForward")} — ${getShortcutKey("CtrlOrCmd+]")}`}
  72. >
  73. {BringForwardIcon}
  74. </button>
  75. ),
  76. });
  77. export const actionSendToBack = register({
  78. name: "sendToBack",
  79. label: "labels.sendToBack",
  80. keywords: ["move down", "zindex", "layer"],
  81. icon: SendToBackIcon,
  82. trackEvent: { category: "element" },
  83. perform: (elements, appState) => {
  84. return {
  85. elements: moveAllLeft(elements, appState),
  86. appState,
  87. storeAction: StoreAction.CAPTURE,
  88. };
  89. },
  90. keyTest: (event) =>
  91. isDarwin
  92. ? event[KEYS.CTRL_OR_CMD] &&
  93. event.altKey &&
  94. event.code === CODES.BRACKET_LEFT
  95. : event[KEYS.CTRL_OR_CMD] &&
  96. event.shiftKey &&
  97. event.code === CODES.BRACKET_LEFT,
  98. PanelComponent: ({ updateData, appState }) => (
  99. <button
  100. type="button"
  101. className="zIndexButton"
  102. onClick={() => updateData(null)}
  103. title={`${t("labels.sendToBack")} — ${
  104. isDarwin
  105. ? getShortcutKey("CtrlOrCmd+Alt+[")
  106. : getShortcutKey("CtrlOrCmd+Shift+[")
  107. }`}
  108. >
  109. {SendToBackIcon}
  110. </button>
  111. ),
  112. });
  113. export const actionBringToFront = register({
  114. name: "bringToFront",
  115. label: "labels.bringToFront",
  116. keywords: ["move up", "zindex", "layer"],
  117. icon: BringToFrontIcon,
  118. trackEvent: { category: "element" },
  119. perform: (elements, appState) => {
  120. return {
  121. elements: moveAllRight(elements, appState),
  122. appState,
  123. storeAction: StoreAction.CAPTURE,
  124. };
  125. },
  126. keyTest: (event) =>
  127. isDarwin
  128. ? event[KEYS.CTRL_OR_CMD] &&
  129. event.altKey &&
  130. event.code === CODES.BRACKET_RIGHT
  131. : event[KEYS.CTRL_OR_CMD] &&
  132. event.shiftKey &&
  133. event.code === CODES.BRACKET_RIGHT,
  134. PanelComponent: ({ updateData, appState }) => (
  135. <button
  136. type="button"
  137. className="zIndexButton"
  138. onClick={(event) => updateData(null)}
  139. title={`${t("labels.bringToFront")} — ${
  140. isDarwin
  141. ? getShortcutKey("CtrlOrCmd+Alt+]")
  142. : getShortcutKey("CtrlOrCmd+Shift+]")
  143. }`}
  144. >
  145. {BringToFrontIcon}
  146. </button>
  147. ),
  148. });