From e21a74a15ea2304a73e916fef37ae8fba31f75c7 Mon Sep 17 00:00:00 2001 From: kangwei Date: Thu, 7 May 2020 14:01:57 +0800 Subject: [PATCH] add focusing track --- .../editor-core/src/utils/focusing-track.ts | 81 +++++++++++++++---- 1 file changed, 64 insertions(+), 17 deletions(-) diff --git a/packages/editor-core/src/utils/focusing-track.ts b/packages/editor-core/src/utils/focusing-track.ts index 0f8ca6f84..3e04d0000 100644 --- a/packages/editor-core/src/utils/focusing-track.ts +++ b/packages/editor-core/src/utils/focusing-track.ts @@ -1,22 +1,47 @@ +import { hotkey } from '../hotkey'; class FocusingManager { deploy() { - + // in + hotkey.bind('esc', () => { + // do esc + }); + hotkey.bind(['command + s', 'ctrl + s'], () => { + // do save + // do esc + }); } - send(e: MouseEvent | KeyboardEvent) { - + private actives: Focusable[] = []; + send(e: MouseEvent) { + // if keyborad event check is esc or } - addModalCheck() { + addModalCheck(check) { } create(config: FocusableConfig) { } - activeItem() { - + internalActiveItem(item: Focusable) { + const first = this.actives[0]; + if (first === item) { + return; + } + const i = this.actives.indexOf(item); + if (i > -1) { + this.actives.splice(i, 1); + } + this.actives.unshift(item); + if (!item.isModal && first) { + // trigger Blur + first.internalTriggerBlur(); + } + // trigger onActive } - suspenceItem() { - + internalSuspenceItem(item: Focusable) { + const i = this.actives.indexOf(item); + if (i > -1) { + this.actives.splice(i, 1); + } } } @@ -25,24 +50,46 @@ export interface FocusableConfig { modal?: boolean; onEsc?: () => void; onBlur?: () => void; + onSave?: () => void; } class Focusable { readonly isModal: boolean; - constructor(private manager: FocusingManager, { range, modal }: FocusableConfig) { - this.isModal = modal == null ? false : modal; - - } - checkRange(e: MouseEvent) { - + constructor(private manager: FocusingManager, private config: FocusableConfig) { + this.isModal = config.modal == null ? false : config.modal; } active() { - this.manager.activeItem(this); + this.manager.internalActiveItem(this); } suspence() { - this.manager.suspenceItem(this); + this.manager.internalSuspenceItem(this); } purge() { - + this.manager.internalSuspenceItem(this); + } + internalCheckInRange(e: MouseEvent) { + const { range } = this.config; + if (!range) { + return false; + } + if (typeof range === 'function') { + return range(e); + } + return range.contains(e.target as HTMLElement); + } + internalTriggerBlur() { + if (this.config.onBlur) { + this.config.onBlur(); + } + } + internalTriggerSave() { + if (this.config.onSave) { + this.config.onSave(); + } + } + internalTriggerEsc() { + if (this.config.onEsc) { + this.config.onEsc(); + } } }