Skip to content

Commit

Permalink
feat: mouse focus
Browse files Browse the repository at this point in the history
  • Loading branch information
@dineug
dineug committed Oct 29, 2023
1 parent 500eecd commit 8311186
Show file tree
Hide file tree
Showing 26 changed files with 910 additions and 100 deletions.
4 changes: 2 additions & 2 deletions packages/erd-editor/src/components/erd/Erd.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import ErdContextMenu, {
ErdContextMenuType,
} from '@/components/erd/erd-context-menu/ErdContextMenu';
import { useContextMenuRootProvider } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext';
import { unselectAllAction } from '@/engine/modules/editor/atom.actions';
import { unselectAllAction$ } from '@/engine/modules/editor/generator.actions';
import {
streamScrollToAction,
streamZoomLevelAction,
Expand Down Expand Up @@ -69,7 +69,7 @@ const Erd: FC<ErdProps> = (props, ctx) => {
if (!canDrag) return;

const { store } = app.value;
store.dispatch(unselectAllAction());
store.dispatch(unselectAllAction$());

if (event.type === 'mousedown' && isMod(event)) {
const { x, y } = root.value.getBoundingClientRect();
Expand Down
6 changes: 3 additions & 3 deletions packages/erd-editor/src/components/erd/canvas/table/Table.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ export const headerInputWrap = css`
display: flex;
height: ${TABLE_HEADER_INPUT_HEIGHT}px;
align-items: center;
padding: ${TABLE_HEADER_PADDING}px 0;
& > .edit-input {
margin-right: ${INPUT_MARGIN_RIGHT}px;
& > .input-padding {
padding: ${TABLE_HEADER_PADDING}px ${INPUT_MARGIN_RIGHT}px
${TABLE_HEADER_PADDING}px 0;
}
`;
114 changes: 103 additions & 11 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 @@ -5,7 +5,17 @@ import { useAppContext } from '@/components/context';
import Column from '@/components/erd/canvas/table/column/Column';
import EditInput from '@/components/primitives/edit-input/EditInput';
import Icon from '@/components/primitives/icon/Icon';
import {
editTableAction,
editTableEndAction,
focusTableAction,
} from '@/engine/modules/editor/atom.actions';
import { moveAllAction$ } from '@/engine/modules/editor/generator.actions';
import { FocusType } from '@/engine/modules/editor/state';
import {
changeTableCommentAction,
changeTableNameAction,
} from '@/engine/modules/table/atom.actions';
import {
removeTableAction$,
selectTableAction$,
Expand All @@ -20,13 +30,18 @@ import { drag$, DragMove } from '@/utils/globalEventObservable';
import { isMod, simpleShortcutToString } from '@/utils/keyboard-shortcut';

import * as styles from './Table.styles';
import { useFocusTable } from './useFocusTable';

export type TableProps = {
table: Table;
};

const Table: FC<TableProps> = (props, ctx) => {
const app = useAppContext(ctx);
const { hasEdit, hasFocus, hasSelectColumn } = useFocusTable(
ctx,
props.table.id
);

const handleMove = ({ event, movementX, movementY }: DragMove) => {
event.type === 'mousemove' && event.preventDefault();
Expand All @@ -45,7 +60,7 @@ const Table: FC<TableProps> = (props, ctx) => {
!el.closest('.table-header-color') &&
!el.closest('.column-row') &&
!el.closest('.icon') &&
!el.closest('.edit-input')
!el.closest('.input-padding')
) {
drag$.subscribe(handleMove);
}
Expand All @@ -61,6 +76,40 @@ const Table: FC<TableProps> = (props, ctx) => {
store.dispatch(removeTableAction$(props.table.id));
};

const handleFocus = (focusType: FocusType) => {
const { store } = app.value;
store.dispatch(focusTableAction({ tableId: props.table.id, focusType }));
};

const handleEdit = () => {
const { store } = app.value;
store.dispatch(editTableAction());
};

const handleEditEnd = () => {
const { store } = app.value;
store.dispatch(editTableEndAction());
};

const handleInput = (event: InputEvent, focusType: FocusType) => {
const { store } = app.value;
const input = event.target as HTMLInputElement | null;
if (!input) return;

switch (focusType) {
case FocusType.tableName:
store.dispatch(
changeTableNameAction({ id: props.table.id, value: input.value })
);
break;
case FocusType.tableComment:
store.dispatch(
changeTableCommentAction({ id: props.table.id, value: input.value })
);
break;
}
};

return () => {
const { store, keyBindingMap } = app.value;
const { settings, collections } = store.state;
Expand Down Expand Up @@ -115,18 +164,46 @@ const Table: FC<TableProps> = (props, ctx) => {
/>
</div>
<div class=${styles.headerInputWrap}>
<${EditInput}
placeholder="table"
width=${table.ui.widthName}
value=${table.name}
/>
<div
class="input-padding"
@mousedown=${() => {
handleFocus(FocusType.tableName);
}}
@dblclick=${handleEdit}
>
<${EditInput}
placeholder="table"
width=${table.ui.widthName}
value=${table.name}
focus=${hasFocus(FocusType.tableName)}
edit=${hasEdit(FocusType.tableName)}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.tableName);
}}
/>
</div>
${bHas(settings.show, SchemaV3Constants.Show.tableComment)
? html`
<${EditInput}
placeholder="comment"
width=${table.ui.widthComment}
value=${table.comment}
/>
<div
class="input-padding"
@mousedown=${() => {
handleFocus(FocusType.tableComment);
}}
@dblclick=${handleEdit}
>
<${EditInput}
placeholder="comment"
width=${table.ui.widthComment}
value=${table.comment}
focus=${hasFocus(FocusType.tableComment)}
edit=${hasEdit(FocusType.tableComment)}
.onBlur=${handleEditEnd}
.onInput=${(event: InputEvent) => {
handleInput(event, FocusType.tableComment);
}}
/>
</div>
`
: null}
</div>
Expand All @@ -139,10 +216,25 @@ const Table: FC<TableProps> = (props, ctx) => {
html`
<${Column}
column=${column}
selected=${hasSelectColumn(column.id)}
widthName=${tableWidths.name}
widthDataType=${tableWidths.dataType}
widthDefault=${tableWidths.default}
widthComment=${tableWidths.comment}
focusName=${hasFocus(FocusType.columnName, column.id)}
focusDataType=${hasFocus(FocusType.columnDataType, column.id)}
focusNotNull=${hasFocus(FocusType.columnNotNull, column.id)}
focusDefault=${hasFocus(FocusType.columnDefault, column.id)}
focusComment=${hasFocus(FocusType.columnComment, column.id)}
focusUnique=${hasFocus(FocusType.columnUnique, column.id)}
focusAutoIncrement=${hasFocus(
FocusType.columnAutoIncrement,
column.id
)}
editName=${hasEdit(FocusType.columnName, column.id)}
editDataType=${hasEdit(FocusType.columnDataType, column.id)}
editDefault=${hasEdit(FocusType.columnDefault, column.id)}
editComment=${hasEdit(FocusType.columnComment, column.id)}
/>
`
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/erd-editor/src/components/erd/canvas/table/column/Column.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const root = css`
align-items: center;
fill: transparent;
color: transparent;
padding: ${COLUMN_PADDING}px ${TABLE_PADDING}px;
padding: 0 ${TABLE_PADDING}px;
transition: background-color 0.15s;
&:hover {
Expand All @@ -28,7 +28,7 @@ export const root = css`
}
& > .column-col {
margin-right: ${INPUT_MARGIN_RIGHT}px;
padding: ${COLUMN_PADDING}px ${INPUT_MARGIN_RIGHT}px ${COLUMN_PADDING}px 0;
}
`;

Expand Down
Loading

0 comments on commit 8311186

Please sign in to comment.