diff --git a/packages/erd-editor/.storybook/ThemeProvider.ts b/packages/erd-editor/.storybook/ThemeProvider.ts index f24b430d..75faeb7a 100644 --- a/packages/erd-editor/.storybook/ThemeProvider.ts +++ b/packages/erd-editor/.storybook/ThemeProvider.ts @@ -16,8 +16,8 @@ type ThemeProviderProps = { story: any; }; -const ThemeProvider: FC = props => { - return () => html` +const ThemeProvider: FC = props => () => + html` <${GlobalStyles} /> <${Theme} .theme=${createTheme({ @@ -27,6 +27,5 @@ const ThemeProvider: FC = props => { /> ${props.story} `; -}; export default ThemeProvider; diff --git a/packages/erd-editor/src/components/erd/Erd.ts b/packages/erd-editor/src/components/erd/Erd.ts index 9dbd7668..6b18a147 100644 --- a/packages/erd-editor/src/components/erd/Erd.ts +++ b/packages/erd-editor/src/components/erd/Erd.ts @@ -80,15 +80,11 @@ const Erd: FC = (props, ctx) => { @wheel=${handleWheel} > <${Canvas} /> - ${contextMenu.state.show - ? html` - <${ErdContextMenu} - type=${ErdContextMenuType.ERD} - root=${root} - .onClose=${handleContextmenuClose} - /> - ` - : null} + <${ErdContextMenu} + type=${ErdContextMenuType.ERD} + root=${root} + .onClose=${handleContextmenuClose} + /> `; }; diff --git a/packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts b/packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts index bcce13c7..23f66301 100644 --- a/packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts +++ b/packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts @@ -57,222 +57,198 @@ const ErdContextMenu: FC = (props, ctx) => { ? html`` : props.type === ErdContextMenuType.relationship ? html`` - : html`<${ContextMenu.Content} - children=${html` - <${ContextMenu.Item} - .onClick=${handleAddTable} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} name="table" size=${14} />`} - name="New Table" - right=${html` - <${Kbd} shortcut=${keyBindingMap.addTable[0]?.shortcut} /> - `} - /> - `} - /> - <${ContextMenu.Item} - .onClick=${handleAddMemo} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} name="note-sticky" size=${14} />`} - name="New Memo" - right=${html` - <${Kbd} shortcut=${keyBindingMap.addMemo[0]?.shortcut} /> - `} - /> - `} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} - children=${html` - <${ContextMenu.Menu} - icon=${html` - <${Icon} prefix="mdi" name="vector-line" size=${14} /> - `} - name="Relationship" - right=${chevronRightIcon} - /> - `} - /> - <${ContextMenu.SubContent} - children=${html` - ${createDrawRelationshipMenus(app.value, props.onClose).map( - menu => html` - <${ContextMenu.Item} - .onClick=${menu.onClick} - children=${html` - <${ContextMenu.Menu} - icon=${html` - <${Icon} - prefix="base64" - name=${menu.iconName} - size=${14} - /> - `} - name=${menu.name} - right=${html` - <${Kbd} shortcut=${menu.shortcut} /> - `} - /> - `} - /> - ` - )} - `} - /> - `} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} name="eye" size=${14} />`} - name="View Option" - right=${chevronRightIcon} - /> - `} - /> - <${ContextMenu.SubContent} - children=${html` - ${createShowMenus(app.value).map( - menu => html` - <${ContextMenu.Item} - .onClick=${menu.onClick} - children=${html` - <${ContextMenu.Menu} - icon=${menu.checked - ? html`<${Icon} name="check" size=${14} />` - : null} - name=${menu.name} - /> - `} - /> - ` - )} - `} - /> - `} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} - children=${html` - <${ContextMenu.Menu} - icon=${html` - <${Icon} prefix="mdi" name="database" size=${14} /> - `} - name="Database" - right=${chevronRightIcon} - /> - `} - /> - <${ContextMenu.SubContent} - children=${html` - ${createDatabaseMenus(app.value).map( - menu => html` - <${ContextMenu.Item} - .onClick=${menu.onClick} - children=${html` - <${ContextMenu.Menu} - icon=${menu.checked - ? html`<${Icon} name="check" size=${14} />` - : null} - name=${menu.name} - /> - `} - /> - ` - )} - `} - /> - `} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} name="file-import" size=${14} />`} - name="Import" - right=${chevronRightIcon} - /> - `} - /> - <${ContextMenu.SubContent} - children=${html` - ${createImportMenus(app.value, props.onClose).map( - menu => html` - <${ContextMenu.Item} - .onClick=${menu.onClick} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} - prefix=${menu.icon.prefix} - name=${menu.icon.name} + : html` + <${ContextMenu.Root} + children=${html` + <${ContextMenu.Item} + .onClick=${handleAddTable} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} name="table" size=${14} />`} + name="New Table" + right=${html` + <${Kbd} shortcut=${keyBindingMap.addTable[0]?.shortcut} /> + `} + /> + `} + /> + <${ContextMenu.Item} + .onClick=${handleAddMemo} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} name="note-sticky" size=${14} />`} + name="New Memo" + right=${html` + <${Kbd} shortcut=${keyBindingMap.addMemo[0]?.shortcut} /> + `} + /> + `} + /> + <${ContextMenu.Item} + children=${html` + <${ContextMenu.Menu} + icon=${html` + <${Icon} prefix="mdi" name="vector-line" size=${14} /> + `} + name="Relationship" + right=${chevronRightIcon} + /> + `} + subChildren=${html` + ${createDrawRelationshipMenus(app.value, props.onClose).map( + menu => html` + <${ContextMenu.Item} + .onClick=${menu.onClick} + children=${html` + <${ContextMenu.Menu} + icon=${html` + <${Icon} + prefix="base64" + name=${menu.iconName} size=${14} - />`} - name=${menu.name} - /> - `} - /> - ` - )} - `} - /> - `} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} name="file-export" size=${14} />`} - name="Export" - right=${chevronRightIcon} - /> - `} - /> - <${ContextMenu.SubContent} - children=${html` - ${createExportMenus( - app.value, - props.onClose, - props.root.value - ).map( - menu => html` - <${ContextMenu.Item} - .onClick=${menu.onClick} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} - prefix=${menu.icon.prefix} - name=${menu.icon.name} - size=${14} - />`} - name=${menu.name} - /> - `} - /> - ` - )} - `} - /> - `} - /> - <${ContextMenu.Item} - .onClick=${handleAutomaticTablePlacement} - children=${html` - <${ContextMenu.Menu} - icon=${html`<${Icon} prefix="mdi" name="atom" size=${14} />`} - name="Automatic Table Placement" - /> - `} - /> - `} - />`; + /> + `} + name=${menu.name} + right=${html` + <${Kbd} shortcut=${menu.shortcut} /> + `} + /> + `} + /> + ` + )} + `} + /> + <${ContextMenu.Item} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} name="eye" size=${14} />`} + name="View Option" + right=${chevronRightIcon} + /> + `} + subChildren=${html` + ${createShowMenus(app.value).map( + menu => html` + <${ContextMenu.Item} + .onClick=${menu.onClick} + children=${html` + <${ContextMenu.Menu} + icon=${menu.checked + ? html`<${Icon} name="check" size=${14} />` + : null} + name=${menu.name} + /> + `} + /> + ` + )} + `} + /> + <${ContextMenu.Item} + children=${html` + <${ContextMenu.Menu} + icon=${html` + <${Icon} prefix="mdi" name="database" size=${14} /> + `} + name="Database" + right=${chevronRightIcon} + /> + `} + subChildren=${html` + ${createDatabaseMenus(app.value).map( + menu => html` + <${ContextMenu.Item} + .onClick=${menu.onClick} + children=${html` + <${ContextMenu.Menu} + icon=${menu.checked + ? html`<${Icon} name="check" size=${14} />` + : null} + name=${menu.name} + /> + `} + /> + ` + )} + `} + /> + <${ContextMenu.Item} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} name="file-import" size=${14} />`} + name="Import" + right=${chevronRightIcon} + /> + `} + subChildren=${html` + ${createImportMenus(app.value, props.onClose).map( + menu => html` + <${ContextMenu.Item} + .onClick=${menu.onClick} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} + prefix=${menu.icon.prefix} + name=${menu.icon.name} + size=${14} + />`} + name=${menu.name} + /> + `} + /> + ` + )} + `} + /> + <${ContextMenu.Item} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} name="file-export" size=${14} />`} + name="Export" + right=${chevronRightIcon} + /> + `} + subChildren=${html` + ${createExportMenus( + app.value, + props.onClose, + props.root.value + ).map( + menu => html` + <${ContextMenu.Item} + .onClick=${menu.onClick} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} + prefix=${menu.icon.prefix} + name=${menu.icon.name} + size=${14} + />`} + name=${menu.name} + /> + `} + /> + ` + )} + `} + /> + <${ContextMenu.Item} + .onClick=${handleAutomaticTablePlacement} + children=${html` + <${ContextMenu.Menu} + icon=${html`<${Icon} + prefix="mdi" + name="atom" + size=${14} + />`} + name="Automatic Table Placement" + /> + `} + /> + `} + /> + `; }; }; diff --git a/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.stories.ts b/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.stories.ts index 23609b50..105b0915 100644 --- a/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.stories.ts +++ b/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.stories.ts @@ -30,72 +30,82 @@ const ContextMenuTemplate: FC = (props, ctx) => { @mousedown=${contextMenu.onMousedown} > Right-click here - ${contextMenu.state.show - ? html` - <${ContextMenu.Content} - children=${html` - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 1'} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 2'} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 3'} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} children=${'Submenu'} /> - <${ContextMenu.SubContent} - children=${html` - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 1'} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 2'} - /> - <${ContextMenu.Sub} - children=${html` - <${ContextMenu.SubTrigger} children=${'Submenu'} /> - <${ContextMenu.SubContent} - children=${html` - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 1'} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 2'} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 3'} - /> - `} - /> - `} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 3'} - /> - `} - /> - `} - /> - <${ContextMenu.Item} - .onClick=${handleClick} - children=${'Item 4'} - /> - `} - /> - ` - : null} + <${ContextMenu.Root} + children=${html` + <${ContextMenu.Item} .onClick=${handleClick} children=${'Item 1'} /> + <${ContextMenu.Item} .onClick=${handleClick} children=${'Item 2'} /> + <${ContextMenu.Item} .onClick=${handleClick} children=${'Item 3'} /> + <${ContextMenu.Item} + children=${'Submenu'} + subChildren=${html` + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 1'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 2'} + /> + <${ContextMenu.Item} + children=${'Submenu'} + subChildren=${html` + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 1'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 2'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 3'} + /> + `} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 3'} + /> + `} + /> + <${ContextMenu.Item} + children=${'Submenu'} + subChildren=${html` + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 1'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 2'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 3'} + /> + `} + /> + <${ContextMenu.Item} + children=${'Submenu'} + subChildren=${html` + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 1'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 2'} + /> + <${ContextMenu.Item} + .onClick=${handleClick} + children=${'Item 3'} + /> + `} + /> + <${ContextMenu.Item} .onClick=${handleClick} children=${'Item 4'} /> + `} + /> `; }; diff --git a/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.ts b/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.ts index 2cba2823..5c2808a8 100644 --- a/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.ts +++ b/packages/erd-editor/src/components/primitives/context-menu/ContextMenu.ts @@ -1,25 +1,16 @@ -import ContextMenuContent from './context-menu-content/ContextMenuContent'; import ContextMenuItem from './context-menu-item/ContextMenuItem'; -import ContextMenuSub from './context-menu-sub/ContextMenuSub'; -import ContextMenuSubContent from './context-menu-sub-content/ContextMenuSubContent'; -import ContextMenuSubTrigger from './context-menu-sub-trigger/ContextMenuSubTrigger'; +import ContextMenuRoot from './context-menu-root/ContextMenuRoot'; import Menu from './menu/Menu'; type CompositionContextMenu = { - Content: typeof ContextMenuContent; + Root: typeof ContextMenuRoot; Item: typeof ContextMenuItem; - Sub: typeof ContextMenuSub; - SubTrigger: typeof ContextMenuSubTrigger; - SubContent: typeof ContextMenuSubContent; Menu: typeof Menu; }; const ContextMenu: CompositionContextMenu = { - Content: ContextMenuContent, + Root: ContextMenuRoot, Item: ContextMenuItem, - Sub: ContextMenuSub, - SubTrigger: ContextMenuSubTrigger, - SubContent: ContextMenuSubContent, Menu, }; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-content/ContextMenuContent.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-content/ContextMenuContent.ts index ead7e315..99ec847e 100644 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-content/ContextMenuContent.ts +++ b/packages/erd-editor/src/components/primitives/context-menu/context-menu-content/ContextMenuContent.ts @@ -1,37 +1,23 @@ import { DOMTemplateLiterals, FC, html } from '@dineug/r-html'; -import { useContextMenuRootContext } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext'; - import * as styles from './ContextMenuContent.styles'; export type ContextMenuContentProps = { + id: string; + x: number; + y: number; children?: DOMTemplateLiterals; }; -const ContextMenuContent: FC = (props, ctx) => { - const root = useContextMenuRootContext(ctx); - - const handleMouseover = (event: MouseEvent) => { - const el = event.target as HTMLElement | null; - if (!el) return; - - if (el.dataset.id) { - root.value.setHoveredId(el.dataset.id); - } - }; - - return () => - root.value.show - ? html` -
- ${props.children} -
- ` - : null; -}; +const ContextMenuContent: FC = (props, ctx) => () => + html` +
+ ${props.children} +
+ `; export default ContextMenuContent; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-item/ContextMenuItem.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-item/ContextMenuItem.ts index 7c97303e..3d1586e7 100644 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-item/ContextMenuItem.ts +++ b/packages/erd-editor/src/components/primitives/context-menu/context-menu-item/ContextMenuItem.ts @@ -1,22 +1,86 @@ -import { DOMTemplateLiterals, FC, html } from '@dineug/r-html'; +import { + createRef, + DOMTemplateLiterals, + FC, + html, + observable, + onMounted, + ref, +} from '@dineug/r-html'; +import ContextMenuContent from '@/components/primitives/context-menu/context-menu-content/ContextMenuContent'; +import { useContextMenuRootContext } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext'; +import { useUnmounted } from '@/hooks/useUnmounted'; import { uuid } from '@/utils'; import * as styles from './ContextMenuItem.styles'; export type ContextMenuItemProps = { children?: DOMTemplateLiterals; + subChildren?: DOMTemplateLiterals; onClick?: (event: MouseEvent) => void; }; const ContextMenuItem: FC = (props, ctx) => { + const root = useContextMenuRootContext(ctx); const id = uuid(); + const $div = createRef(); + const state = observable({ + show: false, + x: 0, + y: 0, + }); + const { addUnsubscribe } = useUnmounted(); + + const handleMouseenter = () => { + const { width, x, y } = $div.value.getBoundingClientRect(); + state.x = width + x; + state.y = y - 8; + state.show = true; + + const parentId = $div.value.parentElement?.dataset.id; + if (parentId) { + root.value.change$.next({ parentId, id }); + } + }; + + onMounted(() => { + if (!props.subChildren) { + return; + } + + addUnsubscribe( + root.value.change$.subscribe(value => { + const parentId = $div.value.parentElement?.dataset.id; + + if (parentId === value.parentId && id !== value.id) { + state.show = false; + } + }) + ); + }); return () => html` -
+
${props.children}
+ ${props.subChildren && state.show + ? html` + <${ContextMenuContent} + id=${id} + x=${state.x} + y=${state.y} + children=${props.subChildren} + /> + ` + : null} `; }; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/ContextMenuRoot.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/ContextMenuRoot.ts new file mode 100644 index 00000000..70ec14f2 --- /dev/null +++ b/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/ContextMenuRoot.ts @@ -0,0 +1,26 @@ +import { DOMTemplateLiterals, FC, html } from '@dineug/r-html'; + +import ContextMenuContent from '@/components/primitives/context-menu/context-menu-content/ContextMenuContent'; +import { useContextMenuRootContext } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext'; + +export type ContextMenuRootProps = { + children?: DOMTemplateLiterals; +}; + +const ContextMenuRoot: FC = (props, ctx) => { + const root = useContextMenuRootContext(ctx); + + return () => + root.value.show + ? html` + <${ContextMenuContent} + id="root" + x=${root.value.x} + y=${root.value.y} + children=${props.children} + /> + ` + : null; +}; + +export default ContextMenuRoot; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/contextMenuRootContext.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/contextMenuRootContext.ts index 7b7005be..1d9e982d 100644 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/contextMenuRootContext.ts +++ b/packages/erd-editor/src/components/primitives/context-menu/context-menu-root/contextMenuRootContext.ts @@ -5,21 +5,23 @@ import { useContext, useProvider, } from '@dineug/r-html'; +import { Subject } from 'rxjs'; export type ContextMenuRootContext = { show: boolean; x: number; y: number; - lastHoveredId: string | null; - setHoveredId: (id: string) => void; + change$: Subject<{ + parentId: string; + id: string; + }>; }; export const contextMenuRootContext = createContext({ show: false, x: 0, y: 0, - lastHoveredId: null, - setHoveredId: () => {}, + change$: new Subject(), }); export const useContextMenuRootContext = ( @@ -33,10 +35,7 @@ export function useContextMenuRootProvider( show: false, x: 0, y: 0, - lastHoveredId: null, - setHoveredId: (id: string) => { - state.lastHoveredId = id; - }, + change$: new Subject(), }); const provider = useProvider(ctx, contextMenuRootContext, state); diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-content/ContextMenuSubContent.styles.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-content/ContextMenuSubContent.styles.ts deleted file mode 100644 index ab85d9d5..00000000 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-content/ContextMenuSubContent.styles.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { css } from '@dineug/r-html'; - -export const content = css` - position: fixed; - display: flex; - flex-direction: column; - border-radius: 6px; - overflow: hidden; - min-width: max-content; - padding: 8px; - background-color: var(--context-menu-background); -`; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-content/ContextMenuSubContent.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-content/ContextMenuSubContent.ts deleted file mode 100644 index 4cc32a7e..00000000 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-content/ContextMenuSubContent.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { DOMTemplateLiterals, FC, html } from '@dineug/r-html'; - -import * as styles from '@/components/primitives/context-menu/context-menu-content/ContextMenuContent.styles'; -import { useContextMenuSubContext } from '@/components/primitives/context-menu/context-menu-sub/contextMenuSubContext'; - -export type ContextMenuSubContentProps = { - children?: DOMTemplateLiterals; -}; - -const ContextMenuSubContent: FC = (props, ctx) => { - const sub = useContextMenuSubContext(ctx); - - const handleMouseover = (event: MouseEvent) => { - event.stopPropagation(); - const el = event.target as HTMLElement | null; - if (!el) return; - - if (el.dataset.id) { - sub.value.setHoveredId(el.dataset.id); - } - }; - - return () => - sub.value.show - ? html` -
- ${props.children} -
- ` - : null; -}; - -export default ContextMenuSubContent; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-trigger/ContextMenuSubTrigger.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-trigger/ContextMenuSubTrigger.ts deleted file mode 100644 index 0f0e39b4..00000000 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub-trigger/ContextMenuSubTrigger.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { DOMTemplateLiterals, FC, html } from '@dineug/r-html'; - -import * as styles from '@/components/primitives/context-menu/context-menu-item/ContextMenuItem.styles'; -import { useContextMenuSubContext } from '@/components/primitives/context-menu/context-menu-sub/contextMenuSubContext'; -import { uuid } from '@/utils'; - -export type ContextMenuSubTriggerProps = { - children?: DOMTemplateLiterals; -}; - -const ContextMenuSubTrigger: FC = (props, ctx) => { - const id = uuid(); - const sub = useContextMenuSubContext(ctx); - - const handleMouseover = (event: MouseEvent) => { - sub.value.onMouseover(event, id); - }; - - return () => - html` -
- ${props.children} -
- `; -}; - -export default ContextMenuSubTrigger; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub/ContextMenuSub.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub/ContextMenuSub.ts deleted file mode 100644 index 5f5153e5..00000000 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub/ContextMenuSub.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { - DOMTemplateLiterals, - FC, - observable, - onBeforeMount, - useProvider, - watch, -} from '@dineug/r-html'; - -import { useContextMenuRootContext } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext'; -import { useUnmounted } from '@/hooks/useUnmounted'; - -import { - ContextMenuSubContext, - contextMenuSubContext, - useContextMenuSubContext, -} from './contextMenuSubContext'; - -export type ContextMenuSubProps = { - children?: DOMTemplateLiterals; -}; - -const ContextMenuSub: FC = (props, ctx) => { - const root = useContextMenuRootContext(ctx); - const sub = useContextMenuSubContext(ctx); - const isSub = sub.value.init; - const { addUnsubscribe } = useUnmounted(); - - const state = observable({ - init: false, - show: false, - x: 0, - y: 0, - lastHoveredId: null, - triggerId: null, - onMouseover: (event: MouseEvent, id: string) => { - const el = event.target as HTMLElement | null; - if (!el) return; - - const trigger = el.closest( - '.context-menu-sub-trigger' - ) as HTMLElement | null; - if (!trigger) return; - - const { width, x, y } = trigger.getBoundingClientRect(); - state.x = width + x; - state.y = y - 8; - state.triggerId = id; - state.show = true; - }, - setHoveredId: (id: string) => { - state.lastHoveredId = id; - }, - }); - - onBeforeMount(() => { - const provider = useProvider(ctx, contextMenuSubContext, state); - - addUnsubscribe( - provider.destroy, - watch(root.value).subscribe(name => { - if (name !== 'lastHoveredId') return; - - if (state.triggerId !== root.value.lastHoveredId) { - state.show = false; - } - }) - ); - - if (!isSub) { - addUnsubscribe( - watch(sub.value).subscribe(name => { - if (name !== 'lastHoveredId') return; - - if (state.triggerId !== sub.value.lastHoveredId) { - state.show = false; - } - }) - ); - } - }); - - return () => props.children; -}; - -export default ContextMenuSub; diff --git a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub/contextMenuSubContext.ts b/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub/contextMenuSubContext.ts deleted file mode 100644 index 1fa6d9a4..00000000 --- a/packages/erd-editor/src/components/primitives/context-menu/context-menu-sub/contextMenuSubContext.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { createContext, useContext } from '@dineug/r-html'; - -export type ContextMenuSubContext = { - init: boolean; - show: boolean; - x: number; - y: number; - lastHoveredId: string | null; - triggerId: string | null; - onMouseover: (event: MouseEvent, id: string) => void; - setHoveredId: (id: string) => void; -}; - -export const contextMenuSubContext = createContext({ - init: true, - show: false, - x: 0, - y: 0, - lastHoveredId: null, - triggerId: null, - onMouseover: () => {}, - setHoveredId: () => {}, -}); - -export const useContextMenuSubContext = ( - ctx: Parameters[0] -) => useContext(ctx, contextMenuSubContext); diff --git a/submodules/r-html b/submodules/r-html index 8eff20a2..520dbcbc 160000 --- a/submodules/r-html +++ b/submodules/r-html @@ -1 +1 @@ -Subproject commit 8eff20a21ebc0187edea2528f6687d4442971753 +Subproject commit 520dbcbce9cb5f58705dfa29f38dac8a80fbc2fa