@finos/legend-vscode-extension-dependencies 2.1.15 → 3.0.1

package/src/stores/DiagramEditorState.ts

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  type Diagram,
+  type Point,
+} from '@finos/legend-extension-dsl-diagram/graph';
+import { type PureModel } from '@finos/legend-graph';
+import { type GeneratorFn, guaranteeNonNullable } from '@finos/legend-shared';
+import { action, computed, flow, makeObservable, observable } from 'mobx';
+import {
+  DIAGRAM_INTERACTION_MODE,
+  type DiagramRenderer,
+} from '@finos/legend-extension-dsl-diagram/application';
+
+export class DiagramEditorState {
+  _renderer?: DiagramRenderer | undefined;
+  diagramId: string;
+  diagram?: Diagram;
+  graph?: PureModel;
+
+  constructor(diagramId: string) {
+    makeObservable(this, {
+      _renderer: observable,
+      diagram: observable,
+      diagramCursorClass: computed,
+      addClassView: flow,
+      setRenderer: action,
+    });
+
+    this.diagramId = diagramId;
+  }
+
+  get renderer(): DiagramRenderer {
+    return guaranteeNonNullable(
+      this._renderer,
+      `Diagram renderer must be initialized (this is likely caused by calling this method at the wrong place)`,
+    );
+  }
+
+  get isDiagramRendererInitialized(): boolean {
+    return Boolean(this._renderer);
+  }
+
+  // NOTE: we have tried to use React to control the cursor and
+  // could not overcome the jank/lag problem, so we settle with CSS-based approach
+  // See https://css-tricks.com/using-css-cursors/
+  // See https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+  get diagramCursorClass(): string {
+    if (!this.isDiagramRendererInitialized) {
+      return '';
+    }
+    if (this.renderer.middleClick || this.renderer.rightClick) {
+      return 'diagram-editor__cursor--grabbing';
+    }
+    switch (this.renderer.interactionMode) {
+      case DIAGRAM_INTERACTION_MODE.PAN: {
+        return this.renderer.leftClick
+          ? 'diagram-editor__cursor--grabbing'
+          : 'diagram-editor__cursor--grab';
+      }
+      case DIAGRAM_INTERACTION_MODE.ZOOM_IN: {
+        return 'diagram-editor__cursor--zoom-in';
+      }
+      case DIAGRAM_INTERACTION_MODE.ZOOM_OUT: {
+        return 'diagram-editor__cursor--zoom-out';
+      }
+      case DIAGRAM_INTERACTION_MODE.LAYOUT: {
+        if (this.renderer.selectionStart) {
+          return 'diagram-editor__cursor--crosshair';
+        } else if (
+          this.renderer.mouseOverClassCorner ||
+          this.renderer.selectedClassCorner
+        ) {
+          return 'diagram-editor__cursor--resize';
+        } else if (this.renderer.mouseOverClassView) {
+          return 'diagram-editor__cursor--pointer';
+        }
+        return '';
+      }
+      default:
+        return '';
+    }
+  }
+
+  setupRenderer(): void {
+    this.renderer.setIsReadOnly(false);
+  }
+
+  setRenderer(val: DiagramRenderer): void {
+    this._renderer = val;
+  }
+
+  setDiagram(val: Diagram): void {
+    this.diagram = val;
+  }
+
+  setGraph(val: PureModel): void {
+    this.graph = val;
+  }
+
+  *addClassView(path: string, position: Point | undefined): GeneratorFn<void> {
+    if (!this.graph || !this.diagram) {
+      return;
+    }
+    const _class = this.graph.getClass(path);
+    this.renderer.addClassView(_class, position);
+  }
+}

package/src/utils/Const.ts

@@ -17,3 +17,5 @@
 // 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';

package/src/utils/VsCodeUtils.ts

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
+import type { PlainObject } from '@finos/legend-shared';
+
 interface Vscode {
-  postMessage(message: unknown): void;
+  postMessage(message: PlainObject): void;
 }
 
 declare const vscode: Vscode;
 
-export const postMessage = (message: unknown): void => {
+export const postMessage = (message: PlainObject): void => {
   vscode.postMessage(message);
 };

package/tsconfig.json

@@ -51,9 +51,13 @@
     "./src/index.ts",
     "./src/graph-manager/index.ts",
     "./src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts",
+    "./src/stores/DiagramEditorState.ts",
     "./src/utils/Const.ts",
     "./src/utils/VsCodeUtils.ts",
-    "./src/components/DiagramRenderer.tsx"
+    "./src/components/Diagram/DiagramEditor.tsx",
+    "./src/components/Diagram/DiagramEditorDiagramCanvas.tsx",
+    "./src/components/Diagram/DiagramEditorToolPanel.tsx",
+    "./src/components/Diagram/DiagramHeader.tsx"
   ],
   "include": [
     "src/**/*.ts",

package/lib/components/DiagramRenderer.d.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2020-present, Goldman Sachs
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import '../../style/index.scss';
-import type { AbstractPreset } from '@finos/legend-shared';
-export declare const DiagramRendererComponent: React.FC<{
-    diagramId: string;
-    presets: AbstractPreset[];
-}>;
-//# sourceMappingURL=DiagramRenderer.d.ts.map

package/lib/components/DiagramRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DiagramRenderer.d.ts","sourceRoot":"","sources":["../../src/components/DiagramRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AASH,OAAO,wBAAwB,CAAC;AAOhC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CA8DA,CAAC"}

package/lib/components/DiagramRenderer.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Copyright (c) 2020-present, Goldman Sachs
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { getDiagram, DiagramRenderer, } from '@finos/legend-extension-dsl-diagram';
-import { createRef, useEffect, useState } from 'react';
-import '../../style/index.scss';
-import { postMessage } from '../utils/VsCodeUtils.js';
-import { GET_PROJECT_ENTITIES, GET_PROJECT_ENTITIES_RESPONSE, } from '../utils/Const.js';
-import { getPureGraph } from '../graph-manager/index.js';
-export const DiagramRendererComponent = ({ diagramId, presets }) => {
-    const ref = createRef();
-    const [diagram, setDiagram] = useState(null);
-    const [entities, setEntities] = useState([]);
-    const [error, setError] = useState();
-    useEffect(() => {
-        postMessage({
-            command: GET_PROJECT_ENTITIES,
-        });
-    }, [diagramId]);
-    window.addEventListener('message', (event) => {
-        const message = event.data;
-        if (message.command === GET_PROJECT_ENTITIES_RESPONSE) {
-            const es = message.result;
-            setEntities(es);
-        }
-    });
-    useEffect(() => {
-        if (entities.length && diagramId) {
-            getPureGraph(entities, presets)
-                .then((pureModel) => {
-                setDiagram(getDiagram(diagramId, pureModel));
-                setError(null);
-            })
-                .catch((e) => {
-                setError(e.message);
-                setDiagram(null);
-            });
-        }
-    }, [entities, diagramId, presets]);
-    useEffect(() => {
-        if (diagram) {
-            const diagramRenderer = new DiagramRenderer(ref.current, diagram);
-            diagramRenderer.render({ initial: true });
-        }
-    }, [ref, diagram]);
-    return (_jsx("div", { className: "diagram__renderer", ref: ref, children: error ? (_jsxs("div", { className: "diagram__renderer__error", children: [_jsx("span", { children: "Something went wrong. Diagram cannot be created." }), _jsx("span", { className: "diagram__renderer__error__details", title: `${error}`, children: "Error Details." })] })) : null }));
-};
-//# sourceMappingURL=DiagramRenderer.js.map

package/lib/components/DiagramRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DiagramRenderer.js","sourceRoot":"","sources":["../../src/components/DiagramRenderer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,UAAU,EACV,eAAe,GAChB,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,MAAM,CAAC,MAAM,wBAAwB,GAGhC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9B,MAAM,GAAG,GAAG,SAAS,EAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAiB,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC;YACV,OAAO,EAAE,oBAAoB;SAC9B,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,CAAC,gBAAgB,CACrB,SAAS,EACT,CAAC,KAA0D,EAAE,EAAE;QAC7D,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;QAC3B,IAAI,OAAO,CAAC,OAAO,KAAK,6BAA6B,EAAE,CAAC;YACtD,MAAM,EAAE,GAAa,OAAO,CAAC,MAAM,CAAC;YACpC,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YACjC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC;iBAC5B,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE;gBAClB,UAAU,CAAC,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;gBAC7C,QAAQ,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;gBACX,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;gBACpB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;QACP,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,eAAe,GAAG,IAAI,eAAe,CACzC,GAAG,CAAC,OAAyB,EAC7B,OAAO,CACR,CAAC;YACF,eAAe,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,YACxC,KAAK,CAAC,CAAC,CAAC,CACP,eAAK,SAAS,EAAC,0BAA0B,aACvC,8EAA6D,EAC7D,eACE,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE,GAAG,KAAK,EAAE,+BAGZ,IACH,CACP,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/components/DiagramRenderer.tsx

@@ -1,98 +0,0 @@
-/**
- * Copyright (c) 2020-present, Goldman Sachs
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
-  type Diagram,
-  getDiagram,
-  DiagramRenderer,
-} from '@finos/legend-extension-dsl-diagram';
-import type { Entity } from '@finos/legend-storage';
-import { createRef, useEffect, useState } from 'react';
-import '../../style/index.scss';
-import { postMessage } from '../utils/VsCodeUtils.js';
-import {
-  GET_PROJECT_ENTITIES,
-  GET_PROJECT_ENTITIES_RESPONSE,
-} from '../utils/Const.js';
-import { getPureGraph } from '../graph-manager/index.js';
-import type { AbstractPreset } from '@finos/legend-shared';
-
-export const DiagramRendererComponent: React.FC<{
-  diagramId: string;
-  presets: AbstractPreset[];
-}> = ({ diagramId, presets }) => {
-  const ref = createRef<HTMLDivElement>();
-  const [diagram, setDiagram] = useState<Diagram | null>(null);
-  const [entities, setEntities] = useState<Entity[]>([]);
-  const [error, setError] = useState<string | null>();
-
-  useEffect(() => {
-    postMessage({
-      command: GET_PROJECT_ENTITIES,
-    });
-  }, [diagramId]);
-
-  window.addEventListener(
-    'message',
-    (event: MessageEvent<{ result: Entity[]; command: string }>) => {
-      const message = event.data;
-      if (message.command === GET_PROJECT_ENTITIES_RESPONSE) {
-        const es: Entity[] = message.result;
-        setEntities(es);
-      }
-    },
-  );
-
-  useEffect(() => {
-    if (entities.length && diagramId) {
-      getPureGraph(entities, presets)
-        .then((pureModel) => {
-          setDiagram(getDiagram(diagramId, pureModel));
-          setError(null);
-        })
-        .catch((e) => {
-          setError(e.message);
-          setDiagram(null);
-        });
-    }
-  }, [entities, diagramId, presets]);
-
-  useEffect(() => {
-    if (diagram) {
-      const diagramRenderer = new DiagramRenderer(
-        ref.current as HTMLDivElement,
-        diagram,
-      );
-      diagramRenderer.render({ initial: true });
-    }
-  }, [ref, diagram]);
-
-  return (
-    <div className="diagram__renderer" ref={ref}>
-      {error ? (
-        <div className="diagram__renderer__error">
-          <span>Something went wrong. Diagram cannot be created.</span>
-          <span
-            className="diagram__renderer__error__details"
-            title={`${error}`}
-          >
-            Error Details.
-          </span>
-        </div>
-      ) : null}
-    </div>
-  );
-};