From fc097b26425671cbac018e3b5515db0e4f9694b1 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 11:37:07 +0200 Subject: [PATCH 1/4] feat(vscode-extension): integrate new diagram creation functionality --- .../components/new-button/new-button.component.tsx | 11 +++++++++-- packages/vscode-bridge-protocol/src/constant.ts | 1 + packages/vscode-bridge-protocol/src/model.ts | 3 ++- .../src/commands/new-diagram/index.ts | 4 ++++ .../commands/new-diagram/new-diagram.command.ts | 14 ++++++++++++++ .../new-diagram.handler.ts} | 13 +++---------- .../src/commands/new-diagram/new-diagram.id.ts | 1 + packages/vscode-extension/src/editor/handlers.ts | 8 +++++++- 8 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 packages/vscode-extension/src/commands/new-diagram/index.ts create mode 100644 packages/vscode-extension/src/commands/new-diagram/new-diagram.command.ts rename packages/vscode-extension/src/commands/{new-diagram.ts => new-diagram/new-diagram.handler.ts} (78%) create mode 100644 packages/vscode-extension/src/commands/new-diagram/new-diagram.id.ts diff --git a/apps/web/src/pods/toolbar/components/new-button/new-button.component.tsx b/apps/web/src/pods/toolbar/components/new-button/new-button.component.tsx index 2f1e40a7..9f87dece 100644 --- a/apps/web/src/pods/toolbar/components/new-button/new-button.component.tsx +++ b/apps/web/src/pods/toolbar/components/new-button/new-button.component.tsx @@ -1,16 +1,23 @@ +import { ActionButton } from '@/common/components/action-button'; import { NewIcon } from '@/common/components/icons/new-icon.component'; +import { SHORTCUTS } from '@/common/shortcut'; import { useCanvasSchemaContext, useCanvasViewSettingsContext, } from '@/core/providers'; -import { ActionButton } from '@/common/components/action-button'; -import { SHORTCUTS } from '@/common/shortcut'; +import { isVSCodeEnv } from '@/core/vscode/env.helpers'; +import { sendToExtension } from '@/core/vscode/vscode-bridge.helpers'; +import { APP_MESSAGE_TYPE } from '@lemoncode/mongo-modeler-bridge-protocol'; export const NewButton = () => { const { createEmptySchema } = useCanvasSchemaContext(); const { setFilename, setLoadSample } = useCanvasViewSettingsContext(); const handleNewButtonClick = () => { + if (isVSCodeEnv()) { + sendToExtension({ type: APP_MESSAGE_TYPE.NEW_DIAGRAM }); + return; + } setFilename(''); createEmptySchema(); setLoadSample(false); diff --git a/packages/vscode-bridge-protocol/src/constant.ts b/packages/vscode-bridge-protocol/src/constant.ts index ce5ae477..0bb8da12 100644 --- a/packages/vscode-bridge-protocol/src/constant.ts +++ b/packages/vscode-bridge-protocol/src/constant.ts @@ -8,4 +8,5 @@ export const APP_MESSAGE_TYPE = { READY: 'mm:ready', SAVE: 'mm:save', WEBVIEW_READY: 'mm:webview-ready', + NEW_DIAGRAM: 'mm:new-diagram', } as const; diff --git a/packages/vscode-bridge-protocol/src/model.ts b/packages/vscode-bridge-protocol/src/model.ts index eb66c1c2..15fa118f 100644 --- a/packages/vscode-bridge-protocol/src/model.ts +++ b/packages/vscode-bridge-protocol/src/model.ts @@ -19,7 +19,8 @@ export type HostMessage = export type AppMessage = | { type: typeof APP_MESSAGE_TYPE.READY } | { type: typeof APP_MESSAGE_TYPE.WEBVIEW_READY } - | { type: typeof APP_MESSAGE_TYPE.SAVE; payload: { content: string } }; + | { type: typeof APP_MESSAGE_TYPE.SAVE; payload: { content: string } } + | { type: typeof APP_MESSAGE_TYPE.NEW_DIAGRAM }; export type PayloadOf = Extract extends { payload: infer P } ? P : undefined; diff --git a/packages/vscode-extension/src/commands/new-diagram/index.ts b/packages/vscode-extension/src/commands/new-diagram/index.ts new file mode 100644 index 00000000..e3a4a4d4 --- /dev/null +++ b/packages/vscode-extension/src/commands/new-diagram/index.ts @@ -0,0 +1,4 @@ +export * from './new-diagram.command'; +export * from './new-diagram.handler'; +export * from './new-diagram.id'; + diff --git a/packages/vscode-extension/src/commands/new-diagram/new-diagram.command.ts b/packages/vscode-extension/src/commands/new-diagram/new-diagram.command.ts new file mode 100644 index 00000000..3dea6e11 --- /dev/null +++ b/packages/vscode-extension/src/commands/new-diagram/new-diagram.command.ts @@ -0,0 +1,14 @@ +import * as vscode from 'vscode'; +import { handleNewDiagram } from './new-diagram.handler'; +import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from './new-diagram.id'; + +export const registerNewDiagramCommand = ( + context: vscode.ExtensionContext +): void => { + context.subscriptions.push( + vscode.commands.registerCommand( + MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID, + handleNewDiagram + ) + ); +}; diff --git a/packages/vscode-extension/src/commands/new-diagram.ts b/packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts similarity index 78% rename from packages/vscode-extension/src/commands/new-diagram.ts rename to packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts index b0b98659..923c716b 100644 --- a/packages/vscode-extension/src/commands/new-diagram.ts +++ b/packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts @@ -6,7 +6,7 @@ const VIEW_TYPE = 'mongo-modeler.editor'; const FILE_EXTENSION = 'mml'; const DEFAULT_FILENAME = `untitled.${FILE_EXTENSION}`; -const DEFAULT_DIAGRAM_CONTENT = JSON.stringify( +export const DEFAULT_DIAGRAM_CONTENT = JSON.stringify( { version: '0.1', tables: [], @@ -24,11 +24,12 @@ const getDefaultUri = (): vscode.Uri | undefined => { return folder ? vscode.Uri.joinPath(folder.uri, DEFAULT_FILENAME) : undefined; }; -const createNewDiagram = async (): Promise => { +export const handleNewDiagram = async (): Promise => { const target = await vscode.window.showSaveDialog({ title: 'New Mongo Modeler diagram', defaultUri: getDefaultUri(), filters: { 'Mongo Modeler diagram': [FILE_EXTENSION] }, + saveLabel: 'Create', }); if (!target) return; @@ -42,11 +43,3 @@ const createNewDiagram = async (): Promise => { ); } }; - -export const registerNewDiagramCommand = ( - context: vscode.ExtensionContext -): void => { - context.subscriptions.push( - vscode.commands.registerCommand('mongo-modeler.newDiagram', createNewDiagram) - ); -}; diff --git a/packages/vscode-extension/src/commands/new-diagram/new-diagram.id.ts b/packages/vscode-extension/src/commands/new-diagram/new-diagram.id.ts new file mode 100644 index 00000000..485a7798 --- /dev/null +++ b/packages/vscode-extension/src/commands/new-diagram/new-diagram.id.ts @@ -0,0 +1 @@ +export const MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID = 'mongo-modeler.newDiagram'; diff --git a/packages/vscode-extension/src/editor/handlers.ts b/packages/vscode-extension/src/editor/handlers.ts index bf2c6c87..0a0cb0c1 100644 --- a/packages/vscode-extension/src/editor/handlers.ts +++ b/packages/vscode-extension/src/editor/handlers.ts @@ -1,10 +1,12 @@ -import { basename } from 'node:path'; +import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands'; import { APP_MESSAGE_TYPE, type AppMessage, HOST_MESSAGE_TYPE, type HostMessage, } from '@lemoncode/mongo-modeler-bridge-protocol'; +import { basename } from 'node:path'; +import * as vscode from 'vscode'; import { type MongoModelerDocument, writeFile } from './document'; type PostMessageFn = (msg: HostMessage) => void; @@ -34,5 +36,9 @@ export const handleWebviewMessage = async ( await writeFile(doc.uri, doc.content); postMessage({ type: HOST_MESSAGE_TYPE.SAVED }); break; + + case APP_MESSAGE_TYPE.NEW_DIAGRAM: + await vscode.commands.executeCommand(MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID); + break; } }; From 605e70bc0bf56e57ba15d666a0282218933dfa56 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 11:55:00 +0200 Subject: [PATCH 2/4] feat(vscode-extension): add status bar item for new Mongo Modeler diagram --- packages/vscode-extension/src/index.ts | 2 ++ .../vscode-extension/src/status-bar/index.ts | 2 ++ .../src/status-bar/new-diagram/index.ts | 1 + .../new-diagram/new-diagram.consts.ts | 4 ++++ .../new-diagram/new-diagram.status-bar.ts | 24 +++++++++++++++++++ .../src/status-bar/register.ts | 12 ++++++++++ 6 files changed, 45 insertions(+) create mode 100644 packages/vscode-extension/src/status-bar/index.ts create mode 100644 packages/vscode-extension/src/status-bar/new-diagram/index.ts create mode 100644 packages/vscode-extension/src/status-bar/new-diagram/new-diagram.consts.ts create mode 100644 packages/vscode-extension/src/status-bar/new-diagram/new-diagram.status-bar.ts create mode 100644 packages/vscode-extension/src/status-bar/register.ts diff --git a/packages/vscode-extension/src/index.ts b/packages/vscode-extension/src/index.ts index 972b8dde..049d1820 100644 --- a/packages/vscode-extension/src/index.ts +++ b/packages/vscode-extension/src/index.ts @@ -1,10 +1,12 @@ import { registerCommands } from '#commands'; import { MongoModelerEditorProvider } from '#editor'; +import { registerStatusBarItems } from '#status-bar'; import * as vscode from 'vscode'; export const activate = (context: vscode.ExtensionContext) => { context.subscriptions.push(MongoModelerEditorProvider.register(context)); registerCommands(context); + registerStatusBarItems(context); }; export const deactivate = () => {}; diff --git a/packages/vscode-extension/src/status-bar/index.ts b/packages/vscode-extension/src/status-bar/index.ts new file mode 100644 index 00000000..29ffc893 --- /dev/null +++ b/packages/vscode-extension/src/status-bar/index.ts @@ -0,0 +1,2 @@ +export * from './new-diagram'; +export * from './register'; diff --git a/packages/vscode-extension/src/status-bar/new-diagram/index.ts b/packages/vscode-extension/src/status-bar/new-diagram/index.ts new file mode 100644 index 00000000..fa37230d --- /dev/null +++ b/packages/vscode-extension/src/status-bar/new-diagram/index.ts @@ -0,0 +1 @@ +export * from './new-diagram.status-bar'; diff --git a/packages/vscode-extension/src/status-bar/new-diagram/new-diagram.consts.ts b/packages/vscode-extension/src/status-bar/new-diagram/new-diagram.consts.ts new file mode 100644 index 00000000..36b96626 --- /dev/null +++ b/packages/vscode-extension/src/status-bar/new-diagram/new-diagram.consts.ts @@ -0,0 +1,4 @@ +export const STATUS_BAR_PRIORITY = 100; +export const ITEM_TEXT = '$(database) Mongo Modeler'; +export const ITEM_TOOLTIP = 'Create new Mongo Modeler diagram'; +export const ITEM_COLOR_THEME_TOKEN = 'statusBar.foreground'; diff --git a/packages/vscode-extension/src/status-bar/new-diagram/new-diagram.status-bar.ts b/packages/vscode-extension/src/status-bar/new-diagram/new-diagram.status-bar.ts new file mode 100644 index 00000000..2dd7668d --- /dev/null +++ b/packages/vscode-extension/src/status-bar/new-diagram/new-diagram.status-bar.ts @@ -0,0 +1,24 @@ +import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands'; +import * as vscode from 'vscode'; +import { + ITEM_COLOR_THEME_TOKEN, + ITEM_TEXT, + ITEM_TOOLTIP, + STATUS_BAR_PRIORITY, +} from './new-diagram.consts'; + +export const registerNewDiagramStatusBarItem = ( + context: vscode.ExtensionContext +): void => { + const item = vscode.window.createStatusBarItem( + vscode.StatusBarAlignment.Left, + STATUS_BAR_PRIORITY + ); + item.text = ITEM_TEXT; + item.tooltip = ITEM_TOOLTIP; + item.color = new vscode.ThemeColor(ITEM_COLOR_THEME_TOKEN); + item.command = MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID; + item.show(); + + context.subscriptions.push(item); +}; diff --git a/packages/vscode-extension/src/status-bar/register.ts b/packages/vscode-extension/src/status-bar/register.ts new file mode 100644 index 00000000..5bd0a4de --- /dev/null +++ b/packages/vscode-extension/src/status-bar/register.ts @@ -0,0 +1,12 @@ +import * as vscode from 'vscode'; +import { registerNewDiagramStatusBarItem } from './new-diagram'; + +/** + * Registers all VS Code status bar items exposed by the extension. + * @param context The VS Code extension context. + */ +export const registerStatusBarItems = ( + context: vscode.ExtensionContext +): void => { + registerNewDiagramStatusBarItem(context); +}; From 153da23060a7b9e4da2b1770df85d1b3ca8e6f98 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 12:11:49 +0200 Subject: [PATCH 3/4] fix: update import path for MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID --- packages/vscode-extension/src/editor/handlers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-extension/src/editor/handlers.ts b/packages/vscode-extension/src/editor/handlers.ts index 0a0cb0c1..eb6eacbc 100644 --- a/packages/vscode-extension/src/editor/handlers.ts +++ b/packages/vscode-extension/src/editor/handlers.ts @@ -1,4 +1,4 @@ -import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands'; +import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands/new-diagram/new-diagram.id'; import { APP_MESSAGE_TYPE, type AppMessage, From bb5e55265dcc50015ea32dcd6b2399fb5d590f6b Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 12:19:03 +0200 Subject: [PATCH 4/4] fix: update import paths for writeFile and MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID --- .../src/commands/new-diagram/new-diagram.handler.ts | 2 +- packages/vscode-extension/src/editor/handlers.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts b/packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts index 923c716b..395e58d5 100644 --- a/packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts +++ b/packages/vscode-extension/src/commands/new-diagram/new-diagram.handler.ts @@ -1,5 +1,5 @@ import { logError } from '#core'; -import { writeFile } from '#editor'; +import { writeFile } from '#editor/document'; import * as vscode from 'vscode'; const VIEW_TYPE = 'mongo-modeler.editor'; diff --git a/packages/vscode-extension/src/editor/handlers.ts b/packages/vscode-extension/src/editor/handlers.ts index eb6eacbc..0a0cb0c1 100644 --- a/packages/vscode-extension/src/editor/handlers.ts +++ b/packages/vscode-extension/src/editor/handlers.ts @@ -1,4 +1,4 @@ -import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands/new-diagram/new-diagram.id'; +import { MONGO_MODELER_NEW_DIAGRAM_COMMAND_ID } from '#commands'; import { APP_MESSAGE_TYPE, type AppMessage,