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

package/src/components/Diagram/DiagramEditor.tsx

@@ -0,0 +1,113 @@
+/**
+ * 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 } from '@finos/legend-extension-dsl-diagram';
+import type { Entity } from '@finos/legend-storage';
+import { useRef, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+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 { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+import { LegendStyleProvider } from '@finos/legend-art';
+import { DiagramEditorHeader } from './DiagramHeader.js';
+import { DiagramEditorDiagramCanvas } from './DiagramEditorDiagramCanvas.js';
+import { DiagramEditorToolPanel } from './DiagramEditorToolPanel.js';
+
+export const DiagramEditor = observer(
+  (props: { diagramId: string; diagramEditorState: DiagramEditorState }) => {
+    const diagramCanvasRef = useRef<HTMLDivElement>(null);
+    const { diagramId, diagramEditorState } = props;
+    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, [])
+          .then((pureModel) => {
+            const diagram = getDiagram(diagramId, pureModel);
+            diagramEditorState.setDiagram(diagram);
+            diagramEditorState.setGraph(pureModel);
+            setError(null);
+          })
+          .catch((e) => {
+            setError(e.message);
+          });
+      }
+    }, [entities, diagramId, diagramEditorState]);
+
+    return (
+      <LegendStyleProvider>
+        <div className="diagram-editor">
+          {error ? (
+            <div className="diagram-editor__error">
+              <span>Something went wrong. Diagram cannot be created.</span>
+              <span
+                className="diagram-editor__error__details"
+                title={`${error}`}
+              >
+                Error Details.
+              </span>
+            </div>
+          ) : (
+            <>
+              <div className="diagram-editor__header">
+                {diagramEditorState.isDiagramRendererInitialized && (
+                  <DiagramEditorHeader
+                    diagramEditorState={diagramEditorState}
+                  />
+                )}
+              </div>
+              <div className="diagram-editor__content">
+                <div className="diagram-editor__stage">
+                  {diagramEditorState.isDiagramRendererInitialized && (
+                    <DiagramEditorToolPanel
+                      diagramEditorState={diagramEditorState}
+                    />
+                  )}
+                  <DiagramEditorDiagramCanvas
+                    diagramEditorState={diagramEditorState}
+                    ref={diagramCanvasRef}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </LegendStyleProvider>
+    );
+  },
+);

package/src/components/Diagram/DiagramEditorDiagramCanvas.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 { clsx, useResizeDetector } from '@finos/legend-art';
+import {
+  type Diagram,
+  DiagramRenderer,
+  Point,
+  V1_diagramModelSchema,
+  V1_transformDiagram,
+} from '@finos/legend-extension-dsl-diagram';
+import { Class } from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { flowResult } from 'mobx';
+import {
+  forwardRef,
+  useEffect,
+  type DragEvent,
+  type KeyboardEvent,
+} from 'react';
+import { serialize } from 'serializr';
+import { DIAGRAM_DROP_CLASS_ERROR, WRITE_ENTITY } from '../../utils/Const.js';
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+import { postMessage } from '../../utils/VsCodeUtils.js';
+
+export const DiagramEditorDiagramCanvas = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      diagramEditorState: DiagramEditorState;
+    }
+  >(function DiagramEditorDiagramCanvas(props, ref) {
+    const { diagramEditorState } = props;
+    const diagram = diagramEditorState.diagram;
+    const diagramCanvasRef = ref as React.MutableRefObject<HTMLDivElement>;
+
+    const { width, height } = useResizeDetector<HTMLDivElement>({
+      refreshMode: 'debounce',
+      refreshRate: 50,
+      targetRef: diagramCanvasRef,
+    });
+
+    useEffect(() => {
+      if (diagram) {
+        const renderer = new DiagramRenderer(diagramCanvasRef.current, diagram);
+        diagramEditorState.setRenderer(renderer);
+        diagramEditorState.setupRenderer();
+        renderer.render({ initial: true });
+      }
+    }, [diagramCanvasRef, diagramEditorState, diagram]);
+
+    useEffect(() => {
+      // since after the diagram render is initialized, we start
+      // showing the toolbar and the header, which causes the auto-zoom fit
+      // to be off, we need to call this method again
+      if (diagramEditorState.isDiagramRendererInitialized) {
+        diagramEditorState.renderer.render({ initial: true });
+      }
+    }, [diagramEditorState, diagramEditorState.isDiagramRendererInitialized]);
+
+    useEffect(() => {
+      if (diagramEditorState.isDiagramRendererInitialized) {
+        diagramEditorState.renderer.refresh();
+      }
+    }, [diagramEditorState, width, height]);
+
+    const dropTarget = document.getElementById('root') ?? document.body;
+
+    dropTarget.addEventListener('dragover', (event) => {
+      // accept any DnD
+      event.preventDefault();
+    });
+
+    const drop = (event: DragEvent) => {
+      event.preventDefault();
+      const droppedEntityIds: string[] = (
+        JSON.parse(
+          event.dataTransfer.getData(
+            'application/vnd.code.tree.legendConceptTree',
+          ),
+        ).itemHandles as string[]
+      ).map((item) => item.split('/')[1] ?? '');
+      const position =
+        diagramEditorState.renderer.canvasCoordinateToModelCoordinate(
+          diagramEditorState.renderer.eventCoordinateToCanvasCoordinate(
+            new Point(event.clientX, event.clientY),
+          ),
+        );
+
+      droppedEntityIds
+        .filter((entityId) => {
+          const isClassInstance =
+            diagramEditorState.graph?.getElement(entityId) instanceof Class;
+          if (!isClassInstance) {
+            postMessage({
+              command: DIAGRAM_DROP_CLASS_ERROR,
+            });
+          }
+          return isClassInstance;
+        })
+        .forEach((entityId) => {
+          flowResult(diagramEditorState.addClassView(entityId, position)).catch(
+            // eslint-disable-next-line no-console
+            (error: unknown) => console.error(error),
+          );
+        });
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+        event.preventDefault();
+
+        postMessage({
+          command: WRITE_ENTITY,
+          msg: serialize(
+            V1_diagramModelSchema,
+            V1_transformDiagram(
+              diagramEditorState._renderer?.diagram as Diagram,
+            ),
+          ),
+        });
+      }
+    };
+
+    return (
+      <div
+        onDrop={drop}
+        onKeyDown={handleKeyDown}
+        ref={diagramCanvasRef}
+        className={clsx(
+          'diagram-canvas diagram-editor__canvas',
+          diagramEditorState.diagramCursorClass,
+        )}
+        tabIndex={0}
+      />
+    );
+  }),
+);

package/src/components/Diagram/DiagramEditorToolPanel.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 {
+  clsx,
+  MousePointerIcon,
+  MoveIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+} from '@finos/legend-art';
+import {
+  DIAGRAM_INTERACTION_MODE,
+  DIAGRAM_RELATIONSHIP_EDIT_MODE,
+} from '@finos/legend-extension-dsl-diagram';
+import { observer } from 'mobx-react-lite';
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+
+export const DiagramEditorToolPanel = observer(
+  (props: { diagramEditorState: DiagramEditorState }) => {
+    const { diagramEditorState } = props;
+    const renderer = diagramEditorState.renderer;
+    //const isReadOnly = diagramEditorState.isReadOnly;
+    const createModeSwitcher =
+      (
+        editMode: DIAGRAM_INTERACTION_MODE,
+        relationshipMode: DIAGRAM_RELATIONSHIP_EDIT_MODE,
+      ): (() => void) =>
+      (): void => {
+        renderer.changeMode(editMode, relationshipMode);
+      };
+
+    return (
+      <div className="diagram-editor__tools">
+        <button
+          className={clsx('diagram-editor__tool', {
+            'diagram-editor__tool--active':
+              renderer.interactionMode === DIAGRAM_INTERACTION_MODE.LAYOUT,
+          })}
+          tabIndex={-1}
+          onClick={createModeSwitcher(
+            DIAGRAM_INTERACTION_MODE.LAYOUT,
+            DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+          )}
+          title="View Tool (V)"
+        >
+          <MousePointerIcon className="diagram-editor__icon--layout" />
+        </button>
+        <button
+          className={clsx('diagram-editor__tool', {
+            'diagram-editor__tool--active':
+              renderer.interactionMode === DIAGRAM_INTERACTION_MODE.PAN,
+          })}
+          tabIndex={-1}
+          onClick={createModeSwitcher(
+            DIAGRAM_INTERACTION_MODE.PAN,
+            DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+          )}
+          title="Pan Tool (M)"
+        >
+          <MoveIcon className="diagram-editor__icon--pan" />
+        </button>
+        <button
+          className={clsx('diagram-editor__tool', {
+            'diagram-editor__tool--active':
+              renderer.interactionMode === DIAGRAM_INTERACTION_MODE.ZOOM_IN,
+          })}
+          tabIndex={-1}
+          title="Zoom In (Z)"
+          onClick={createModeSwitcher(
+            DIAGRAM_INTERACTION_MODE.ZOOM_IN,
+            DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+          )}
+        >
+          <ZoomInIcon className="diagram-editor__icon--zoom-in" />
+        </button>
+        <button
+          className={clsx('diagram-editor__tool', {
+            'diagram-editor__tool--active':
+              renderer.interactionMode === DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
+          })}
+          tabIndex={-1}
+          title="Zoom Out (Z)"
+          onClick={createModeSwitcher(
+            DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
+            DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+          )}
+        >
+          <ZoomOutIcon className="diagram-editor__icon--zoom-out" />
+        </button>
+      </div>
+    );
+  },
+);

package/src/components/Diagram/DiagramHeader.tsx

@@ -0,0 +1,230 @@
+/**
+ * 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,
+  DIAGRAM_ALIGNER_OPERATOR,
+  DIAGRAM_ZOOM_LEVELS,
+  V1_diagramModelSchema,
+  V1_transformDiagram,
+} from '@finos/legend-extension-dsl-diagram';
+import { observer } from 'mobx-react-lite';
+import { serialize } from 'serializr';
+import { WRITE_ENTITY } from '../../utils/Const.js';
+import {
+  AlignBottomIcon,
+  AlignCenterIcon,
+  AlignEndIcon,
+  AlignMiddleIcon,
+  AlignStartIcon,
+  AlignTopIcon,
+  CaretDownIcon,
+  ControlledDropdownMenu,
+  DistributeHorizontalIcon,
+  DistributeVerticalIcon,
+  MenuContent,
+  MenuContentDivider,
+  MenuContentItem,
+  SaveIcon,
+} from '@finos/legend-art';
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+import { postMessage } from '../../utils/VsCodeUtils.js';
+import type { PlainObject } from '@finos/legend-shared';
+
+export const DiagramEditorHeader = observer(
+  (props: { diagramEditorState: DiagramEditorState }) => {
+    const { diagramEditorState } = props;
+    const createCenterZoomer =
+      (zoomLevel: number): (() => void) =>
+      (): void => {
+        diagramEditorState.renderer.zoomCenter(zoomLevel / 100);
+      };
+    const zoomToFit = (): void => diagramEditorState.renderer.zoomToFit();
+
+    const isAlignerDisabled =
+      diagramEditorState.renderer.selectedClasses.length < 2;
+
+    return (
+      <>
+        <div className="diagram-editor__header__group">
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Save"
+            tabIndex={-1}
+            onClick={(): void =>
+              postMessage({
+                command: WRITE_ENTITY,
+                msg: serialize(
+                  V1_diagramModelSchema,
+                  V1_transformDiagram(
+                    diagramEditorState._renderer?.diagram as Diagram,
+                  ),
+                ) as PlainObject,
+              })
+            }
+          >
+            <SaveIcon className="diagram-editor__icon--aligner" />
+          </button>
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Align left"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.ALIGN_LEFT,
+              )
+            }
+          >
+            <AlignStartIcon className="diagram-editor__icon--aligner" />
+          </button>
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Align center"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.ALIGN_CENTER,
+              )
+            }
+          >
+            <AlignCenterIcon className="diagram-editor__icon--aligner" />
+          </button>
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Align right"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.ALIGN_RIGHT,
+              )
+            }
+          >
+            <AlignEndIcon className="diagram-editor__icon--aligner" />
+          </button>
+        </div>
+        <div className="diagram-editor__header__group__separator" />
+        <div className="diagram-editor__header__group">
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Align top"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.ALIGN_TOP,
+              )
+            }
+          >
+            <AlignTopIcon className="diagram-editor__icon--aligner" />
+          </button>
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Align middle"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.ALIGN_MIDDLE,
+              )
+            }
+          >
+            <AlignMiddleIcon className="diagram-editor__icon--aligner" />
+          </button>
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Align bottom"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.ALIGN_BOTTOM,
+              )
+            }
+          >
+            <AlignBottomIcon className="diagram-editor__icon--aligner" />
+          </button>
+        </div>
+        <div className="diagram-editor__header__group__separator" />
+        <div className="diagram-editor__header__group">
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Space horizontally"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.SPACE_HORIZONTALLY,
+              )
+            }
+          >
+            <DistributeHorizontalIcon className="diagram-editor__icon--aligner" />
+          </button>
+          <button
+            className="diagram-editor__header__action diagram-editor__header__group__action"
+            title="Space vertically"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(
+                DIAGRAM_ALIGNER_OPERATOR.SPACE_VERTICALLY,
+              )
+            }
+          >
+            <DistributeVerticalIcon className="diagram-editor__icon--aligner" />
+          </button>
+        </div>
+        <ControlledDropdownMenu
+          className="diagram-editor__header__dropdown"
+          title="Zoom..."
+          content={
+            <MenuContent>
+              <MenuContentItem
+                className="diagram-editor__header__zoomer__dropdown__menu__item"
+                onClick={zoomToFit}
+              >
+                Fit
+              </MenuContentItem>
+              <MenuContentDivider />
+              {DIAGRAM_ZOOM_LEVELS.map((zoomLevel) => (
+                <MenuContentItem
+                  key={zoomLevel}
+                  className="diagram-editor__header__zoomer__dropdown__menu__item"
+                  onClick={createCenterZoomer(zoomLevel)}
+                >
+                  {zoomLevel}%
+                </MenuContentItem>
+              ))}
+            </MenuContent>
+          }
+          menuProps={{
+            anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+            transformOrigin: { vertical: 'top', horizontal: 'right' },
+            elevation: 7,
+          }}
+        >
+          <div className="diagram-editor__header__dropdown__label diagram-editor__header__zoomer__dropdown__label">
+            {Math.round(diagramEditorState.renderer.zoom * 100)}%
+          </div>
+          <div className="diagram-editor__header__dropdown__trigger diagram-editor__header__zoomer__dropdown__trigger">
+            <CaretDownIcon />
+          </div>
+        </ControlledDropdownMenu>
+      </>
+    );
+  },
+);

package/src/index.ts

@@ -14,5 +14,6 @@
  * limitations under the License.
  */
 
-export * from './components/DiagramRenderer.js';
+export * from './components/Diagram/DiagramEditor.js';
 export * from './graph-manager/index.js';
+export * from './stores/DiagramEditorState.js';