tldraw
Version:
A tiny little drawing editor.
189 lines (188 loc) • 6.95 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var useKeyboardShortcuts_exports = {};
__export(useKeyboardShortcuts_exports, {
areShortcutsDisabled: () => areShortcutsDisabled,
useKeyboardShortcuts: () => useKeyboardShortcuts
});
module.exports = __toCommonJS(useKeyboardShortcuts_exports);
var import_editor = require("@tldraw/editor");
var import_hotkeys_js = __toESM(require("hotkeys-js"), 1);
var import_react = require("react");
var import_actions = require("../context/actions");
var import_useReadonly = require("./useReadonly");
var import_useTools = require("./useTools");
const SKIP_KBDS = [
// we set these in useNativeClipboardEvents instead
"copy",
"cut",
"paste",
// There's also an upload asset action, so we don't want to set the kbd twice
"asset"
];
function useKeyboardShortcuts() {
const editor = (0, import_editor.useEditor)();
const isReadonlyMode = (0, import_useReadonly.useReadonly)();
const actions = (0, import_actions.useActions)();
const tools = (0, import_useTools.useTools)();
const isFocused = (0, import_editor.useValue)("is focused", () => editor.getInstanceState().isFocused, [editor]);
(0, import_react.useEffect)(() => {
if (!isFocused) return;
const disposables = new Array();
const container = editor.getContainer();
const hot = (keys, callback) => {
(0, import_hotkeys_js.default)(keys, { element: container.ownerDocument.body }, callback);
disposables.push(() => {
import_hotkeys_js.default.unbind(keys, callback);
});
};
const hotUp = (keys, callback) => {
(0, import_hotkeys_js.default)(
keys,
{ element: container.ownerDocument.body, keyup: true, keydown: false },
callback
);
disposables.push(() => {
import_hotkeys_js.default.unbind(keys, callback);
});
};
for (const action of Object.values(actions)) {
if (!action.kbd) continue;
if (isReadonlyMode && !action.readonlyOk) continue;
if (SKIP_KBDS.includes(action.id)) continue;
hot(getHotkeysStringFromKbd(action.kbd), (event) => {
if (areShortcutsDisabled(editor) && !action.isRequiredA11yAction) return;
(0, import_editor.preventDefault)(event);
action.onSelect("kbd");
});
}
for (const tool of Object.values(tools)) {
if (!tool.kbd || !tool.readonlyOk && editor.getIsReadonly()) {
continue;
}
if (SKIP_KBDS.includes(tool.id)) continue;
hot(getHotkeysStringFromKbd(tool.kbd), (event) => {
if (areShortcutsDisabled(editor)) return;
(0, import_editor.preventDefault)(event);
tool.onSelect("kbd");
});
}
hot(",", (e) => {
if (areShortcutsDisabled(editor)) return;
if (editor.inputs.keys.has("Comma")) return;
(0, import_editor.preventDefault)(e);
editor.focus();
editor.inputs.keys.add("Comma");
const { x, y, z } = editor.inputs.getCurrentPagePoint();
const screenpoints = editor.pageToScreen({ x, y });
const info = {
type: "pointer",
name: "pointer_down",
point: { x: screenpoints.x, y: screenpoints.y, z },
shiftKey: e.shiftKey,
altKey: e.altKey,
ctrlKey: e.metaKey || e.ctrlKey,
metaKey: e.metaKey,
accelKey: (0, import_editor.isAccelKey)(e),
pointerId: 0,
button: 0,
isPen: editor.getInstanceState().isPenMode,
target: "canvas"
};
editor.dispatch(info);
});
hotUp(",", (e) => {
if (areShortcutsDisabled(editor)) return;
if (!editor.inputs.keys.has("Comma")) return;
editor.inputs.keys.delete("Comma");
const { x, y, z } = editor.inputs.getCurrentScreenPoint();
const info = {
type: "pointer",
name: "pointer_up",
point: { x, y, z },
shiftKey: e.shiftKey,
altKey: e.altKey,
ctrlKey: e.metaKey || e.ctrlKey,
metaKey: e.metaKey,
accelKey: (0, import_editor.isAccelKey)(e),
pointerId: 0,
button: 0,
isPen: editor.getInstanceState().isPenMode,
target: "canvas"
};
editor.dispatch(info);
});
return () => {
disposables.forEach((d) => d());
};
}, [actions, tools, isReadonlyMode, editor, isFocused]);
}
function areShortcutsDisabled(editor) {
return editor.menus.hasAnyOpenMenus() || editor.getEditingShapeId() !== null || editor.getCrashingError() || !editor.user.getAreKeyboardShortcutsEnabled();
}
function getHotkeysStringFromKbd(kbd) {
return getKeys(kbd).map((kbd2) => {
let str = "";
const shift = kbd2.includes("!");
const alt = kbd2.includes("?");
const cmd = kbd2.includes("$");
const k = kbd2.replace(/[!?$]/g, "");
if (shift && alt && cmd) {
str = `cmd+shift+alt+${k},ctrl+shift+alt+${k}`;
} else if (shift && cmd) {
str = `cmd+shift+${k},ctrl+shift+${k}`;
} else if (alt && cmd) {
str = `cmd+alt+${k},ctrl+alt+${k}`;
} else if (alt && shift) {
str = `shift+alt+${k}`;
} else if (shift) {
str = `shift+${k}`;
} else if (alt) {
str = `alt+${k}`;
} else if (cmd) {
str = `cmd+${k},ctrl+${k}`;
} else {
str = k;
}
return str;
}).join(",");
}
function getKeys(key) {
if (typeof key !== "string") key = "";
key = key.replace(/\s/g, "");
const keys = key.split(",");
let index = keys.lastIndexOf("");
for (; index >= 0; ) {
keys[index - 1] += ",";
keys.splice(index, 1);
index = keys.lastIndexOf("");
}
return keys;
}
//# sourceMappingURL=useKeyboardShortcuts.js.map