-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
1,604 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
packages/erd-editor/src/components/generator-code/GeneratorCode.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { css } from '@dineug/r-html'; | ||
|
|
||
| export const root = css` | ||
| position: relative; | ||
| height: 100%; | ||
| overflow: auto; | ||
| background-color: var(--canvas-background); | ||
| `; |
97 changes: 97 additions & 0 deletions
97
packages/erd-editor/src/components/generator-code/GeneratorCode.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { delay } from '@dineug/go'; | ||
| import { FC, html, observable, onBeforeMount, watch } from '@dineug/r-html'; | ||
| import { arrayHas } from '@dineug/shared'; | ||
|
|
||
| import { useAppContext } from '@/components/appContext'; | ||
| import GeneratorCodeContextMenu from '@/components/generator-code/generator-code-context-menu/GeneratorCodeContextMenu'; | ||
| import CodeBlock from '@/components/primitives/code-block/CodeBlock'; | ||
| import { useContextMenuRootProvider } from '@/components/primitives/context-menu/context-menu-root/contextMenuRootContext'; | ||
| import Toast from '@/components/primitives/toast/Toast'; | ||
| import { LanguageToLangMap } from '@/constants/language'; | ||
| import { useUnmounted } from '@/hooks/useUnmounted'; | ||
| import { copyToClipboard } from '@/utils/clipboard'; | ||
| import { openToastAction } from '@/utils/emitter'; | ||
| import { createGeneratorCode } from '@/utils/generator-code'; | ||
|
|
||
| import * as styles from './GeneratorCode.styles'; | ||
|
|
||
| const hasPropName = arrayHas<string | number | symbol>([ | ||
| 'language', | ||
| 'tableNameCase', | ||
| 'columnNameCase', | ||
| ]); | ||
|
|
||
| export type GeneratorCodeProps = { | ||
| isDarkMode: boolean; | ||
| }; | ||
|
|
||
| const GeneratorCode: FC<GeneratorCodeProps> = (props, ctx) => { | ||
| const app = useAppContext(ctx); | ||
| const { addUnsubscribe } = useUnmounted(); | ||
| const contextMenu = useContextMenuRootProvider(ctx); | ||
|
|
||
| const state = observable({ | ||
| code: '', | ||
| }); | ||
|
|
||
| const setCode = () => { | ||
| const { store } = app.value; | ||
| state.code = createGeneratorCode(store.state); | ||
| }; | ||
|
|
||
| const handleCopy = () => { | ||
| const { emitter } = app.value; | ||
|
|
||
| copyToClipboard(state.code).then(() => { | ||
| emitter.emit( | ||
| openToastAction({ | ||
| close: delay(2000), | ||
| message: html`<${Toast} description="Copied!" />`, | ||
| }) | ||
| ); | ||
| }); | ||
| }; | ||
|
|
||
| const handleContextmenuClose = () => { | ||
| contextMenu.state.show = false; | ||
| }; | ||
|
|
||
| onBeforeMount(() => { | ||
| const { store } = app.value; | ||
| const { settings } = store.state; | ||
|
|
||
| setCode(); | ||
|
|
||
| addUnsubscribe( | ||
| watch(settings).subscribe(propName => { | ||
| hasPropName(propName) && setCode(); | ||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| return () => { | ||
| const { store } = app.value; | ||
| const { | ||
| settings: { language }, | ||
| } = store.state; | ||
| const lang = LanguageToLangMap[language]; | ||
|
|
||
| return html` | ||
| <div | ||
| class=${styles.root} | ||
| @contextmenu=${contextMenu.onContextmenu} | ||
| @mousedown=${contextMenu.onMousedown} | ||
| > | ||
| <${CodeBlock} | ||
| lang=${lang} | ||
| theme=${props.isDarkMode ? 'dark' : 'light'} | ||
| value=${state.code} | ||
| .onCopy=${handleCopy} | ||
| /> | ||
| <${GeneratorCodeContextMenu} .onClose=${handleContextmenuClose} /> | ||
| </div> | ||
| `; | ||
| }; | ||
| }; | ||
|
|
||
| export default GeneratorCode; |
106 changes: 106 additions & 0 deletions
106
...tor/src/components/generator-code/generator-code-context-menu/GeneratorCodeContextMenu.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { FC, html } from '@dineug/r-html'; | ||
|
|
||
| import { useAppContext } from '@/components/appContext'; | ||
| import ContextMenu from '@/components/primitives/context-menu/ContextMenu'; | ||
| import Icon from '@/components/primitives/icon/Icon'; | ||
|
|
||
| import { createColumnNameCaseMenus } from './menus/columnNameCaseMenus'; | ||
| import { createLanguageMenus } from './menus/languageMenus'; | ||
| import { createTableNameCaseMenus } from './menus/tableNameCaseMenus'; | ||
|
|
||
| export type GeneratorCodeContextMenuProps = {}; | ||
|
|
||
| const GeneratorCodeContextMenu: FC<GeneratorCodeContextMenuProps> = ( | ||
| props, | ||
| ctx | ||
| ) => { | ||
| const app = useAppContext(ctx); | ||
| const chevronRightIcon = html`<${Icon} name="chevron-right" size=${14} />`; | ||
|
|
||
| return () => html` | ||
| <${ContextMenu.Root} | ||
| children=${html` | ||
| <${ContextMenu.Item} | ||
| children=${html` | ||
| <${ContextMenu.Menu} | ||
| icon=${html`<${Icon} name="code" size=${14} />`} | ||
| name="Language" | ||
| right=${chevronRightIcon} | ||
| /> | ||
| `} | ||
| subChildren=${html`${createLanguageMenus(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="format-letter-case" size=${14} /> | ||
| `} | ||
| name="Table Name Case" | ||
| right=${chevronRightIcon} | ||
| /> | ||
| `} | ||
| subChildren=${html`${createTableNameCaseMenus(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="format-letter-case" | ||
| size=${14} | ||
| />`} | ||
| name="Column Name Case" | ||
| right=${chevronRightIcon} | ||
| /> | ||
| `} | ||
| subChildren=${html`${createColumnNameCaseMenus(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} | ||
| /> | ||
| `} | ||
| /> | ||
| ` | ||
| )}`} | ||
| /> | ||
| `} | ||
| /> | ||
| `; | ||
| }; | ||
|
|
||
| export default GeneratorCodeContextMenu; |
47 changes: 47 additions & 0 deletions
47
...or/src/components/generator-code/generator-code-context-menu/menus/columnNameCaseMenus.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { AppContext } from '@/components/appContext'; | ||
| import { NameCase } from '@/constants/schema'; | ||
| import { changeColumnNameCaseAction } from '@/engine/modules/settings/atom.actions'; | ||
|
|
||
| type Menu = { | ||
| name: string; | ||
| value: number; | ||
| }; | ||
|
|
||
| const menus: Menu[] = [ | ||
| { | ||
| name: 'Pascal', | ||
| value: NameCase.pascalCase, | ||
| }, | ||
| { | ||
| name: 'Camel', | ||
| value: NameCase.camelCase, | ||
| }, | ||
| { | ||
| name: 'Snake', | ||
| value: NameCase.snakeCase, | ||
| }, | ||
| { | ||
| name: 'None', | ||
| value: NameCase.none, | ||
| }, | ||
| ]; | ||
|
|
||
| export function createColumnNameCaseMenus({ store }: AppContext) { | ||
| const { settings } = store.state; | ||
|
|
||
| return menus.map(menu => { | ||
| const checked = menu.value === settings.columnNameCase; | ||
|
|
||
| return { | ||
| checked, | ||
| name: menu.name, | ||
| onClick: () => { | ||
| store.dispatch( | ||
| changeColumnNameCaseAction({ | ||
| value: menu.value, | ||
| }) | ||
| ); | ||
| }, | ||
| }; | ||
| }); | ||
| } |
Oops, something went wrong.