Skip to content

Commit

Permalink
fix: tab shortcut
Browse files Browse the repository at this point in the history
  • Loading branch information
@dineug
dineug committed Nov 5, 2023
1 parent 6017ccc commit 4943267
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 111 deletions.
2 changes: 2 additions & 0 deletions packages/erd-editor/src/components/erd/canvas/table/Table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ const Table: FC<TableProps> = (props, ctx) => {
value=${table.name}
focus=${hasFocus(FocusType.tableName)}
edit=${hasEdit(FocusType.tableName)}
autofocus=${true}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.tableName);
Expand All @@ -198,6 +199,7 @@ const Table: FC<TableProps> = (props, ctx) => {
value=${table.comment}
focus=${hasFocus(FocusType.tableComment)}
edit=${hasEdit(FocusType.tableComment)}
autofocus=${true}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.tableComment);
Expand Down
4 changes: 4 additions & 0 deletions packages/erd-editor/src/components/erd/canvas/table/column/Column.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
value=${column.name}
focus=${props.focusName}
edit=${props.editName}
autofocus=${true}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.columnName);
Expand All @@ -167,6 +168,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
value=${column.default}
focus=${props.focusDefault}
edit=${props.editDefault}
autofocus=${true}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.columnDefault);
Expand Down Expand Up @@ -194,6 +196,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
value=${column.comment}
focus=${props.focusComment}
edit=${props.editComment}
autofocus=${true}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.columnComment);
Expand Down Expand Up @@ -221,6 +224,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
value=${column.dataType}
focus=${props.focusDataType}
edit=${props.editDataType}
autofocus=${true}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.columnDataType);
Expand Down
215 changes: 106 additions & 109 deletions packages/erd-editor/src/components/erd/useErdShortcut.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { nextTick, onMounted } from '@dineug/r-html';
import { SchemaV3Constants } from '@dineug/erd-editor-schema';
import { onMounted } from '@dineug/r-html';

import { useAppContext } from '@/components/context';
import {
Expand All @@ -23,127 +24,123 @@ import {
import { useUnmounted } from '@/hooks/useUnmounted';
import { KeyBindingName } from '@/utils/keyboard-shortcut';

const CanvasType = SchemaV3Constants.CanvasType;

export function useErdShortcut(ctx: Parameters<typeof useAppContext>[0]) {
const app = useAppContext(ctx);
const { addUnsubscribe } = useUnmounted();

onMounted(() => {
const { store, shortcut$, keydown$ } = app.value;
const handleKeydown = (event: KeyboardEvent) => {
const { store } = app.value;
const { editor, settings } = store.state;
if (settings.canvasType !== CanvasType.ERD) {
return;
}

addUnsubscribe(
keydown$.subscribe(event => {
const { editor } = store.state;
if (
editor.focusTable &&
!editor.focusTable.edit &&
event.key !== MoveKey.Tab &&
hasMoveKeys(event.key)
) {
store.dispatch(
focusMoveTableAction({
moveKey: event.key,
shiftKey: event.shiftKey,
})
);
}

if (editor.focusTable && event.key === MoveKey.Tab) {
event.preventDefault();
store.dispatch(focusMoveTableAction$(event.key, event.shiftKey));

window.setTimeout(() => {
if (
editor.focusTable &&
!editor.focusTable.edit &&
event.key !== MoveKey.Tab &&
hasMoveKeys(event.key)
!editor.focusTable ||
isToggleColumnTypes(editor.focusTable.focusType)
) {
store.dispatch(
focusMoveTableAction({
moveKey: event.key,
shiftKey: event.shiftKey,
})
);
return;
}

if (editor.focusTable && event.key === MoveKey.Tab) {
event.preventDefault();
store.dispatch(focusMoveTableAction$(event.key, event.shiftKey));
store.dispatch(editTableAction());
}, 1);
}
};

nextTick(() => {
if (
!editor.focusTable ||
isToggleColumnTypes(editor.focusTable.focusType)
) {
return;
}
const handleShortcut = (action: KeyBindingName) => {
const { store } = app.value;
const { editor, settings } = store.state;
if (settings.canvasType !== CanvasType.ERD) {
return;
}

store.dispatch(editTableAction());
});
}
}),
shortcut$.subscribe(action => {
const { editor } = store.state;

if (editor.focusTable && action === KeyBindingName.edit) {
const focusTable = editor.focusTable;

if (focusTable.edit) {
store.dispatch(editTableEndAction());
} else if (
focusTable.columnId &&
isToggleColumnTypes(focusTable.focusType)
) {
store.dispatch(
toggleColumnValueAction$(
focusTable.focusType,
focusTable.tableId,
focusTable.columnId
)
);
} else {
store.dispatch(editTableAction());
}
}
if (!editor.focusTable || !editor.focusTable.edit) {
action === KeyBindingName.addTable && store.dispatch(addTableAction$());
action === KeyBindingName.addColumn && store.dispatch(addColumnAction$());
action === KeyBindingName.addMemo && store.dispatch(addMemoAction$());

switch (action) {
case KeyBindingName.edit:
break;
case KeyBindingName.stop:
break;
case KeyBindingName.find:
break;
case KeyBindingName.undo:
store.undo();
break;
case KeyBindingName.redo:
store.redo();
break;
case KeyBindingName.addTable:
store.dispatch(addTableAction$());
break;
case KeyBindingName.addColumn:
store.dispatch(addColumnAction$());
break;
case KeyBindingName.addMemo:
store.dispatch(addMemoAction$());
break;
case KeyBindingName.removeTable:
store.dispatch(removeSelectedAction$());
break;
case KeyBindingName.removeColumn:
break;
case KeyBindingName.primaryKey:
break;
case KeyBindingName.selectAllTable:
store.dispatch(selectAllAction());
break;
case KeyBindingName.selectAllColumn:
break;
case KeyBindingName.copyColumn:
break;
case KeyBindingName.pasteColumn:
break;
case KeyBindingName.relationshipZeroOne:
break;
case KeyBindingName.relationshipZeroN:
break;
case KeyBindingName.relationshipOneOnly:
break;
case KeyBindingName.relationshipOneN:
break;
case KeyBindingName.tableProperties:
break;
case KeyBindingName.zoomIn:
store.dispatch(streamZoomLevelAction({ value: 0.1 }));
break;
case KeyBindingName.zoomOut:
store.dispatch(streamZoomLevelAction({ value: -0.1 }));
break;
}
})
action === KeyBindingName.selectAllTable &&
store.dispatch(selectAllAction());

// drawStartRelationship

action === KeyBindingName.removeTable &&
store.dispatch(removeSelectedAction$());

// KeyBindingName.tableProperties

// KeyBindingName.find

action === KeyBindingName.zoomIn &&
store.dispatch(streamZoomLevelAction({ value: 0.1 }));
action === KeyBindingName.zoomOut &&
store.dispatch(streamZoomLevelAction({ value: -0.1 }));
}

if (editor.focusTable && !editor.focusTable.edit) {
// KeyBindingName.selectAllColumn
// KeyBindingName.removeColumn
// KeyBindingName.copyColumn
// KeyBindingName.pasteColumn
// KeyBindingName.primaryKey
}

if (editor.focusTable && action === KeyBindingName.edit) {
const focusTable = editor.focusTable;

if (focusTable.edit) {
store.dispatch(editTableEndAction());
} else if (
focusTable.columnId &&
isToggleColumnTypes(focusTable.focusType)
) {
store.dispatch(
toggleColumnValueAction$(
focusTable.focusType,
focusTable.tableId,
focusTable.columnId
)
);
} else {
store.dispatch(editTableAction());
}
}

if (action === KeyBindingName.stop) {
// drawEndRelationship
}

action === KeyBindingName.undo && store.undo();
action === KeyBindingName.redo && store.redo();
};

onMounted(() => {
const { keydown$, shortcut$ } = app.value;

addUnsubscribe(
keydown$.subscribe(handleKeydown),
shortcut$.subscribe(handleShortcut)
);
});
}
22 changes: 20 additions & 2 deletions packages/erd-editor/src/components/primitives/edit-input/EditInput.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { createRef, FC, html, onBeforeMount, ref, watch } from '@dineug/r-html';
import {
createRef,
FC,
html,
onBeforeMount,
onMounted,
ref,
watch,
} from '@dineug/r-html';

import { useUnmounted } from '@/hooks/useUnmounted';
import { lastCursorFocus } from '@/utils/focus';
Expand All @@ -14,6 +22,7 @@ export type EditInputProps = {
focus: boolean;
width: number;
value: string;
autofocus?: boolean;
onInput?: (event: InputEvent) => void;
onBlur?: (event: FocusEvent) => void;
onKeyup?: (event: KeyboardEvent) => void;
Expand Down Expand Up @@ -41,7 +50,7 @@ const EditInput: FC<EditInputProps> = (props, ctx) => {
addUnsubscribe(
watch(props).subscribe(propName => {
const $input = input.value;
if (propName !== 'edit' || !props.edit || !input) {
if (propName !== 'edit' || !props.edit || !$input) {
return;
}

Expand All @@ -57,6 +66,15 @@ const EditInput: FC<EditInputProps> = (props, ctx) => {
);
});

onMounted(() => {
const $input = input.value;
if (!props.autofocus || !$input) {
return;
}

lastCursorFocus($input);
});

return () =>
props.edit
? html`
Expand Down

0 comments on commit 4943267

Please sign in to comment.