@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
91 lines (90 loc) • 3.24 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result) __defProp(target, key, result);
return result;
};
import { bind } from "@tldraw/utils";
class FocusManager {
constructor(editor, autoFocus) {
this.editor = editor;
this.disposeSideEffectListener = editor.sideEffects.registerAfterChangeHandler(
"instance",
(prev, next) => {
if (prev.isFocused !== next.isFocused) {
this.updateContainerClass();
}
}
);
const currentFocusState = editor.getInstanceState().isFocused;
if (autoFocus !== currentFocusState) {
editor.updateInstanceState({ isFocused: !!autoFocus });
}
this.updateContainerClass();
const body = editor.getContainerDocument().body;
body.addEventListener("keydown", this.handleKeyDown);
body.addEventListener("mousedown", this.handleMouseDown);
}
editor;
disposeSideEffectListener;
/**
* The editor's focus state and the container's focus state
* are not necessarily always in sync. For that reason we
* can't rely on the css `:focus` or `:focus-within` selectors to style the
* editor when it is in focus.
*
* For that reason we synchronize the editor's focus state with a
* special class on the container: tl-container__focused
*/
updateContainerClass() {
const container = this.editor.getContainer();
const instanceState = this.editor.getInstanceState();
if (instanceState.isFocused) {
container.classList.add("tl-container__focused");
} else {
container.classList.remove("tl-container__focused");
}
container.classList.add("tl-container__no-focus-ring");
}
handleKeyDown(keyEvent) {
const container = this.editor.getContainer();
const activeEl = container.ownerDocument.activeElement;
if (this.editor.isIn("select.editing_shape") && !activeEl?.closest(".tlui-contextual-toolbar"))
return;
if (activeEl === container && this.editor.getSelectedShapeIds().length > 0) return;
if (["Tab", "ArrowUp", "ArrowDown"].includes(keyEvent.key)) {
container.classList.remove("tl-container__no-focus-ring");
}
}
handleMouseDown() {
const container = this.editor.getContainer();
container.classList.add("tl-container__no-focus-ring");
}
focus() {
this.editor.getContainer().focus();
}
blur() {
this.editor.complete();
this.editor.getContainer().blur();
}
dispose() {
const body = this.editor.getContainerDocument().body;
body.removeEventListener("keydown", this.handleKeyDown);
body.removeEventListener("mousedown", this.handleMouseDown);
this.disposeSideEffectListener?.();
}
}
__decorateClass([
bind
], FocusManager.prototype, "handleKeyDown", 1);
__decorateClass([
bind
], FocusManager.prototype, "handleMouseDown", 1);
export {
FocusManager
};
//# sourceMappingURL=FocusManager.mjs.map