tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/dist-esm/lib/ui/context/actions.mjs

@@ -18,11 +18,13 @@ import { fitFrameToContent, removeFrame } from "../../utils/frames/frames.mjs";
 import { generateShapeAnnouncementMessage } from "../components/A11y.mjs";
 import { EditLinkDialog } from "../components/EditLinkDialog.mjs";
 import { EmbedDialog } from "../components/EmbedDialog.mjs";
+import { DefaultKeyboardShortcutsDialog } from "../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.mjs";
 import { useShowCollaborationUi } from "../hooks/useCollaborationStatus.mjs";
 import { flattenShapesToImages } from "../hooks/useFlatten.mjs";
 import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
 import { useDefaultHelpers } from "../overrides.mjs";
 import { useA11y } from "./a11y.mjs";
+import { useTldrawUiComponents } from "./components.mjs";
 import { useUiEvents } from "./events.mjs";
 const ActionsContext = React.createContext(null);
 function supportsDownloadingOriginal(shape, editor) {
@@ -42,6 +44,7 @@ function ActionsProvider({ overrides, children }) {
   const _editor = useMaybeEditor();
   const showCollaborationUi = useShowCollaborationUi();
   const helpers = useDefaultHelpers();
+  const components = useTldrawUiComponents();
   const trackEvent = useUiEvents();
   const a11y = useA11y();
   const msg = useTranslation();
@@ -97,6 +100,17 @@ function ActionsProvider({ overrides, children }) {
           helpers.addDialog({ component: EmbedDialog });
         }
       },
+      {
+        id: "open-kbd-shortcuts",
+        label: "action.open-kbd-shortcuts",
+        kbd: "cmd+alt+/,ctrl+alt+/",
+        onSelect(source) {
+          trackEvent("open-kbd-shortcuts", { source });
+          helpers.addDialog({
+            component: components.KeyboardShortcutsDialog ?? DefaultKeyboardShortcutsDialog
+          });
+        }
+      },
       {
         id: "insert-media",
         label: "action.insert-media",
@@ -139,7 +153,7 @@ function ActionsProvider({ overrides, children }) {
           if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values());
           if (ids.length === 0) return;
           trackEvent("export-as", { format: "svg", source });
-          helpers.exportAs(ids, "svg", getExportName(editor, defaultDocumentName));
+          helpers.exportAs(ids, { format: "svg", name: getExportName(editor, defaultDocumentName) });
         }
       },
       {
@@ -155,7 +169,7 @@ function ActionsProvider({ overrides, children }) {
           if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values());
           if (ids.length === 0) return;
           trackEvent("export-as", { format: "png", source });
-          helpers.exportAs(ids, "png", getExportName(editor, defaultDocumentName));
+          helpers.exportAs(ids, { format: "png", name: getExportName(editor, defaultDocumentName) });
         }
       },
       {
@@ -171,11 +185,10 @@ function ActionsProvider({ overrides, children }) {
           if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values());
           if (ids.length === 0) return;
           trackEvent("export-all-as", { format: "svg", source });
-          helpers.exportAs(
-            Array.from(editor.getCurrentPageShapeIds()),
-            "svg",
-            getExportName(editor, defaultDocumentName)
-          );
+          helpers.exportAs(Array.from(editor.getCurrentPageShapeIds()), {
+            format: "svg",
+            name: getExportName(editor, defaultDocumentName)
+          });
         }
       },
       {
@@ -190,7 +203,7 @@ function ActionsProvider({ overrides, children }) {
           const ids = Array.from(editor.getCurrentPageShapeIds().values());
           if (ids.length === 0) return;
           trackEvent("export-all-as", { format: "png", source });
-          helpers.exportAs(ids, "png", getExportName(editor, defaultDocumentName));
+          helpers.exportAs(ids, { format: "png", name: getExportName(editor, defaultDocumentName) });
         }
       },
       {
@@ -402,7 +415,6 @@ function ActionsProvider({ overrides, children }) {
               y: 0
             };
           }
-          if (!editor.canCreateShapes(ids)) return;
           editor.markHistoryStoppingPoint("duplicate shapes");
           editor.duplicateShapes(ids, offset);
           if (instanceState.duplicateProps) {
@@ -889,16 +901,19 @@ function ActionsProvider({ overrides, children }) {
         id: "rotate-cw",
         label: "action.rotate-cw",
         icon: "rotate-cw",
+        kbd: "shift+.,shift+alt+.",
         onSelect(source) {
           if (!canApplySelectionAction()) return;
           if (mustGoBackToSelectToolFirst()) return;
-          trackEvent("rotate-cw", { source });
+          const isFine = editor.inputs.altKey;
+          trackEvent("rotate-cw", { source, fine: isFine });
           editor.markHistoryStoppingPoint("rotate-cw");
           editor.run(() => {
-            const offset = editor.getSelectionRotation() % (HALF_PI / 2);
-            const dontUseOffset = approximately(offset, 0) || approximately(offset, HALF_PI / 2);
+            const rotation = HALF_PI / (isFine ? 96 : 6);
+            const offset = editor.getSelectionRotation() % rotation;
+            const dontUseOffset = approximately(offset, 0) || approximately(offset, rotation);
             const selectedShapeIds = editor.getSelectedShapeIds();
-            editor.rotateShapesBy(selectedShapeIds, HALF_PI / 2 - (dontUseOffset ? 0 : offset));
+            editor.rotateShapesBy(selectedShapeIds, rotation - (dontUseOffset ? 0 : offset));
             kickoutOccludedShapes(editor, selectedShapeIds);
           });
         }
@@ -907,16 +922,20 @@ function ActionsProvider({ overrides, children }) {
         id: "rotate-ccw",
         label: "action.rotate-ccw",
         icon: "rotate-ccw",
+        // omg double comma
+        kbd: "shift+,,shift+alt+,",
         onSelect(source) {
           if (!canApplySelectionAction()) return;
           if (mustGoBackToSelectToolFirst()) return;
-          trackEvent("rotate-ccw", { source });
+          const isFine = editor.inputs.altKey;
+          trackEvent("rotate-ccw", { source, fine: isFine });
           editor.markHistoryStoppingPoint("rotate-ccw");
           editor.run(() => {
-            const offset = editor.getSelectionRotation() % (HALF_PI / 2);
+            const rotation = HALF_PI / (isFine ? 96 : 6);
+            const offset = editor.getSelectionRotation() % rotation;
             const offsetCloseToZero = approximately(offset, 0);
             const selectedShapeIds = editor.getSelectedShapeIds();
-            editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -(HALF_PI / 2) : -offset);
+            editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -rotation : -offset);
             kickoutOccludedShapes(editor, selectedShapeIds);
           });
         }
@@ -1093,6 +1112,36 @@ function ActionsProvider({ overrides, children }) {
         },
         checkbox: true
       },
+      {
+        id: "toggle-keyboard-shortcuts",
+        label: {
+          default: "action.toggle-keyboard-shortcuts",
+          menu: "action.toggle-keyboard-shortcuts.menu"
+        },
+        readonlyOk: true,
+        onSelect(source) {
+          trackEvent("toggle-keyboard-shortcuts", { source });
+          editor.user.updateUserPreferences({
+            areKeyboardShortcutsEnabled: !editor.user.getAreKeyboardShortcutsEnabled()
+          });
+        },
+        checkbox: true
+      },
+      {
+        id: "toggle-ui-labels",
+        label: {
+          default: "action.toggle-ui-labels",
+          menu: "action.toggle-ui-labels.menu"
+        },
+        readonlyOk: true,
+        onSelect(source) {
+          trackEvent("toggle-ui-labels", { source });
+          editor.user.updateUserPreferences({
+            showUiLabels: !editor.user.getShowUiLabels()
+          });
+        },
+        checkbox: true
+      },
       {
         id: "toggle-edge-scrolling",
         label: {
@@ -1376,6 +1425,7 @@ function ActionsProvider({ overrides, children }) {
         id: "adjust-shape-styles",
         label: "a11y.adjust-shape-styles",
         kbd: "cmd+Enter,ctrl+Enter",
+        isRequiredA11yAction: true,
         onSelect: async (source) => {
           if (!canApplySelectionAction()) return;
           const firstButton = editor.getContainer().querySelector(".tlui-style-panel button");
@@ -1386,6 +1436,7 @@ function ActionsProvider({ overrides, children }) {
       {
         id: "a11y-open-context-menu",
         kbd: "cmd+shift+Enter,ctrl+shift+Enter",
+        isRequiredA11yAction: true,
         readonlyOk: true,
         onSelect: async (source) => {
           if (!canApplySelectionAction()) return;
@@ -1426,6 +1477,7 @@ function ActionsProvider({ overrides, children }) {
         id: "a11y-repeat-shape-announce",
         kbd: "alt+r",
         label: "a11y.repeat-shape",
+        isRequiredA11yAction: true,
         readonlyOk: true,
         onSelect: async (source) => {
           const selectedShapeIds = editor.getSelectedShapeIds();
@@ -1517,7 +1569,17 @@ function ActionsProvider({ overrides, children }) {
       return overrides(editor, actions2, helpers);
     }
     return actions2;
-  }, [helpers, _editor, trackEvent, overrides, defaultDocumentName, showCollaborationUi, msg, a11y]);
+  }, [
+    helpers,
+    _editor,
+    trackEvent,
+    overrides,
+    defaultDocumentName,
+    showCollaborationUi,
+    msg,
+    a11y,
+    components
+  ]);
   return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: asActions(actions), children });
 }
 function useActions() {