adds diagram editor (finos#95)

package.json

@@ -75,7 +75,7 @@
     "commands": [
       {
         "command": "legend.show.diagram",
-        "title": "View Diagram",
+        "title": "View/Edit Diagram",
         "icon": "$(graph-line)",
         "category": "Legend"
       },
@@ -306,7 +306,7 @@
     "@ag-grid-enterprise/menu": "30.2.0",
     "@ag-grid-enterprise/row-grouping": "30.2.0",
     "@ag-grid-enterprise/server-side-row-model": "30.2.0",
-    "@finos/legend-vscode-extension-dependencies": "2.1.0",
+    "@finos/legend-vscode-extension-dependencies": "3.0.0",
     "@types/vscode": "1.83.0",
     "glob": "11.0.0",
     "path": "0.12.7",

src/LegendLanguageClient.ts

@@ -25,6 +25,7 @@ import {
   VIRTUAL_FILE_SYSTEM_FILE_REQUEST_ID,
   ENTITIES_REQUEST_ID,
   ONE_ENTITY_PER_FILE_REQUEST_ID,
+  LEGEND_WRITE_ENTITY,
 } from './utils/Const';
 import type { PlainObject } from './utils/SerializationUtils';
 import {
@@ -44,6 +45,10 @@ export class LegendEntitiesRequest {
   }
 }
 
+interface LegendWriteEntityRequest {
+  content: PlainObject;
+}
+
 export class LegendLanguageClient extends LanguageClient {
   async sendTDSRequest(
     request: FunctionTDSRequest,
@@ -128,4 +133,15 @@ export class LegendLanguageClient extends LanguageClient {
       return this.sendRequest(ONE_ENTITY_PER_FILE_REQUEST_ID);
     }
   }
+
+  async writeEntity(
+    request: LegendWriteEntityRequest,
+    token?: CancellationToken,
+  ): Promise<string> {
+    if (token) {
+      return this.sendRequest(LEGEND_WRITE_ENTITY, request, token);
+    } else {
+      return this.sendRequest(LEGEND_WRITE_ENTITY, request);
+    }
+  }
 }

src/components/diagram/DiagramRendererRoot.tsx

@@ -16,7 +16,10 @@
 
 import '@finos/legend-vscode-extension-dependencies/style/index.css';
 import { createRoot } from 'react-dom/client';
-import { DiagramRendererComponent } from '@finos/legend-vscode-extension-dependencies';
+import {
+  DiagramEditor,
+  DiagramEditorState,
+} from '@finos/legend-vscode-extension-dependencies';
 import { type PlainObject } from '../../utils/SerializationUtils';
 
 const rootElement = document.getElementById('root');
@@ -27,9 +30,11 @@ if (inputParamtersFromHtml) {
   const parsedParams = JSON.parse(inputParamtersFromHtml) as PlainObject;
 
   createRoot(rootElement as HTMLElement).render(
-    <DiagramRendererComponent
+    <DiagramEditor
+      diagramEditorState={
+        new DiagramEditorState(parsedParams.diagramId as string)
+      }
       diagramId={parsedParams.diagramId as string}
-      presets={[]}
     />,
   );
 }

src/conceptTree.ts

@@ -158,8 +158,8 @@ class LegendConceptTreeProvider
     LegendConceptTreeItem | LegendConceptTreeItem[] | void
   > = this._onDidChangeTreeData.event;
 
-  readonly dragMimeTypes = [MIME_TYPE];
-  readonly dropMimeTypes = [];
+  readonly dragMimeTypes = [MIME_TYPE, 'text/uri-list'];
+  readonly dropMimeTypes = [MIME_TYPE];
 
   constructor(
     private client: LegendLanguageClient,
@@ -176,6 +176,7 @@ class LegendConceptTreeProvider
     dataTransfer: DataTransfer,
   ): void {
     dataTransfer.set(MIME_TYPE, new DataTransferItem(source));
+    //dataTransfer.set('text/uri-list', new DataTransferItem(source.map(s => s.id).join(',')));
   }
 
   getTreeItem(element: LegendConceptTreeItem): TreeItem {

src/extension.ts

@@ -264,10 +264,11 @@ export function registerCommands(context: ExtensionContext): void {
     async (...args: unknown[]) => {
       const diagramRendererWebView = window.createWebviewPanel(
         DIAGRAM_RENDERER,
-        `Diagram Render`,
+        `Diagram Editor`,
         ViewColumn.One,
         {
           enableScripts: true,
+          retainContextWhenHidden: true,
         },
       );
 
@@ -278,6 +279,7 @@ export function registerCommands(context: ExtensionContext): void {
         (args[0] as LegendConceptTreeItem).id as string,
         entities,
         workspace.getConfiguration('legend').get('studio.forms.file', ''),
+        client,
       );
     },
   );

src/utils/Const.ts

@@ -48,6 +48,7 @@ export const TEST_CASES_REQUEST_ID = 'legend/testCases';
 export const EXECUTE_TESTS_REQUEST_ID = 'legend/executeTests';
 export const ENTITIES_REQUEST_ID = 'legend/entities';
 export const VIRTUAL_FILE_SYSTEM_FILE_REQUEST_ID = 'legend/legendVirtualFile';
+export const LEGEND_WRITE_ENTITY = 'legend/writeEntity';
 export const GET_TDS_REQUEST_RESULTS_ID = 'getTDSRequestResultsId';
 export const LEGEND_SHOW_DIAGRAM = 'legend.show.diagram';
 export const ONE_ENTITY_PER_FILE_REQUEST_ID =
@@ -58,6 +59,8 @@ export const ONE_ENTITY_PER_FILE_COMMAND_ID =
 // Event Types
 export const GET_PROJECT_ENTITIES = 'getProjectEntities';
 export const GET_PROJECT_ENTITIES_RESPONSE = 'getProjectEntitiesResponse';
+export const DIAGRAM_DROP_CLASS_ERROR = 'diagramDropClassError';
+export const WRITE_ENTITY = 'writeEntity';
 
 // Context variables
 export const SHOW_EXECUTION_RESULTS = 'showExecutionResults';

src/webviews/DiagramWebView.ts

@@ -15,19 +15,23 @@
  */
 
 import * as path from 'path';
-import { Uri, type ExtensionContext, type WebviewPanel } from 'vscode';
+import { Uri, type ExtensionContext, type WebviewPanel, window } from 'vscode';
 import type { LegendEntity } from '../model/LegendEntity';
 import {
+  DIAGRAM_DROP_CLASS_ERROR,
   GET_PROJECT_ENTITIES,
   GET_PROJECT_ENTITIES_RESPONSE,
+  WRITE_ENTITY,
 } from '../utils/Const';
+import type { LegendLanguageClient } from '../LegendLanguageClient';
 
 export const renderDiagramRendererWebView = (
   diagramRendererWebViewPanel: WebviewPanel,
   context: ExtensionContext,
   diagramId: string,
   entities: LegendEntity[],
   renderFilePath: string,
+  client: LegendLanguageClient,
 ): void => {
   let diagramRendererScript;
   const { webview } = diagramRendererWebViewPanel;
@@ -59,17 +63,28 @@ export const renderDiagramRendererWebView = (
     </html>
   `;
 
-  webview.onDidReceiveMessage(async (msg) => {
-    switch (msg.command) {
+  webview.onDidReceiveMessage(async (message) => {
+    switch (message.command) {
       case GET_PROJECT_ENTITIES: {
         webview.postMessage({
           command: GET_PROJECT_ENTITIES_RESPONSE,
           result: entities,
         });
         break;
       }
+      case DIAGRAM_DROP_CLASS_ERROR: {
+        window.showErrorMessage('Unsupported operation', {
+          modal: true,
+          detail: 'Only Class drop is supported.',
+        });
+        break;
+      }
+      case WRITE_ENTITY: {
+        client.writeEntity({ content: message.msg });
+        break;
+      }
       default:
-        throw new Error(`Unsupported request ${msg.command}`);
+        throw new Error(`Unsupported request ${message.command}`);
     }
   }, undefined);
 };

webpack.config.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+const { type } = require('os');
 const path = require('path');
 const webpack = require('webpack');
 
@@ -29,6 +30,7 @@ const webViewConfig = {
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
+    assetModuleFilename: 'assets/[hash][ext][query]'
   },
   devtool: 'nosources-source-map',
   module: {
@@ -38,7 +40,6 @@ const webViewConfig = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
-      // Allow importing CSS modules:
       {
         test: /\.s?(a|c)ss$/,
         use: [
@@ -49,6 +50,10 @@ const webViewConfig = {
           },
         ],
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset',
+      }
     ],
   },
   plugins: [