@finos/legend-extension-dsl-diagram 4.0.0 → 4.1.0

package/src/DiagramRenderer.ts

@@ -103,6 +103,17 @@ export enum DIAGRAM_RELATIONSHIP_EDIT_MODE {
   NONE,
 }
 
+export enum ALIGNER_OPERATOR {
+  ALIGN_LEFT,
+  ALIGN_CENTER,
+  ALIGN_RIGHT,
+  ALIGN_TOP,
+  ALIGN_MIDDLE,
+  ALIGN_BOTTOM,
+  SPACE_HORIZONTALLY,
+  SPACE_VERTICALLY,
+}
+
 const MIN_ZOOM_LEVEL = 0.05; // 5%
 const FIT_ZOOM_PADDING = 10;
 export const DIAGRAM_ZOOM_LEVELS = [
@@ -317,6 +328,7 @@ export class DiagramRenderer {
       setMiddleClick: action,
       setRightClick: action,
       setZoomLevel: action,
+      align: action,
     });
 
     this.diagram = diagram;
@@ -680,6 +692,186 @@ export class DiagramRenderer {
     }
   }
 
+  align(op: ALIGNER_OPERATOR): void {
+    if (this.selectedClasses.length < 2) {
+      return;
+    }
+    switch (op) {
+      case ALIGNER_OPERATOR.ALIGN_LEFT: {
+        const leftBound = this.selectedClasses.reduce(
+          (val, view) => Math.min(val, view.position.x),
+          Number.MAX_SAFE_INTEGER,
+        );
+        this.selectedClasses.forEach((view) =>
+          positionedRectangle_setPosition(
+            view,
+            new Point(leftBound, view.position.y),
+          ),
+        );
+        break;
+      }
+      case ALIGNER_OPERATOR.ALIGN_CENTER: {
+        const center =
+          this.selectedClasses.reduce(
+            (val, view) => val + view.position.x + view.rectangle.width,
+            0,
+          ) / this.selectedClasses.length;
+        this.selectedClasses.forEach((view) =>
+          positionedRectangle_setPosition(
+            view,
+            new Point(center - view.rectangle.width / 2, view.position.y),
+          ),
+        );
+        break;
+      }
+      case ALIGNER_OPERATOR.ALIGN_RIGHT: {
+        const rightBound = this.selectedClasses.reduce(
+          (val, view) => Math.max(val, view.position.x + view.rectangle.width),
+          -Number.MAX_SAFE_INTEGER,
+        );
+        this.selectedClasses.forEach((view) =>
+          positionedRectangle_setPosition(
+            view,
+            new Point(rightBound - view.rectangle.width, view.position.y),
+          ),
+        );
+        break;
+      }
+      case ALIGNER_OPERATOR.ALIGN_TOP: {
+        const topBound = this.selectedClasses.reduce(
+          (val, view) => Math.min(val, view.position.y),
+          Number.MAX_SAFE_INTEGER,
+        );
+        this.selectedClasses.forEach((view) =>
+          positionedRectangle_setPosition(
+            view,
+            new Point(view.position.x, topBound),
+          ),
+        );
+        break;
+      }
+      case ALIGNER_OPERATOR.ALIGN_MIDDLE: {
+        const middle =
+          this.selectedClasses.reduce(
+            (val, view) => val + view.position.y + view.rectangle.height,
+            0,
+          ) / this.selectedClasses.length;
+        this.selectedClasses.forEach((view) =>
+          positionedRectangle_setPosition(
+            view,
+            new Point(view.position.x, middle - view.rectangle.height / 2),
+          ),
+        );
+        break;
+      }
+      case ALIGNER_OPERATOR.ALIGN_BOTTOM: {
+        const bottomBound = this.selectedClasses.reduce(
+          (val, view) => Math.max(val, view.position.y + view.rectangle.height),
+          -Number.MAX_SAFE_INTEGER,
+        );
+        this.selectedClasses.forEach((view) =>
+          positionedRectangle_setPosition(
+            view,
+            new Point(view.position.x, bottomBound - view.rectangle.height),
+          ),
+        );
+        break;
+      }
+      case ALIGNER_OPERATOR.SPACE_HORIZONTALLY: {
+        const sorted = this.selectedClasses
+          .slice()
+          .sort((a, b) => a.position.x - b.position.x);
+        // NOTE: handle special case where there are only 2 views, make them adjacent
+        if (sorted.length === 2) {
+          const previousView = sorted[0] as ClassView;
+          const currentView = sorted[1] as ClassView;
+          positionedRectangle_setPosition(
+            currentView,
+            new Point(
+              previousView.position.x + previousView.rectangle.width,
+              currentView.position.y,
+            ),
+          );
+        } else {
+          const spacings = [];
+          for (let idx = 1; idx < sorted.length; idx++) {
+            const previousView = sorted[idx - 1] as ClassView;
+            const currentView = sorted[idx] as ClassView;
+            spacings.push(
+              currentView.position.x -
+                (previousView.position.x + previousView.rectangle.width),
+            );
+          }
+          const averageSpacing =
+            spacings.reduce((val, distance) => val + distance, 0) /
+            spacings.length;
+          for (let idx = 1; idx < sorted.length; idx++) {
+            const previousView = sorted[idx - 1] as ClassView;
+            const currentView = sorted[idx] as ClassView;
+            positionedRectangle_setPosition(
+              currentView,
+              new Point(
+                previousView.position.x +
+                  previousView.rectangle.width +
+                  averageSpacing,
+                currentView.position.y,
+              ),
+            );
+          }
+        }
+        break;
+      }
+      case ALIGNER_OPERATOR.SPACE_VERTICALLY: {
+        const sorted = this.selectedClasses
+          .slice()
+          .sort((a, b) => a.position.y - b.position.y);
+        // NOTE: handle special case where there are only 2 views, make them adjacent
+        if (sorted.length === 2) {
+          const previousView = sorted[0] as ClassView;
+          const currentView = sorted[1] as ClassView;
+          positionedRectangle_setPosition(
+            currentView,
+            new Point(
+              currentView.position.x,
+              previousView.position.y + previousView.rectangle.height,
+            ),
+          );
+        } else {
+          const spacings = [];
+          for (let idx = 1; idx < sorted.length; idx++) {
+            const previousView = sorted[idx - 1] as ClassView;
+            const currentView = sorted[idx] as ClassView;
+            spacings.push(
+              currentView.position.y -
+                (previousView.position.y + previousView.rectangle.height),
+            );
+          }
+          const averageSpacing =
+            spacings.reduce((val, distance) => val + distance, 0) /
+            spacings.length;
+          for (let idx = 1; idx < sorted.length; idx++) {
+            const previousView = sorted[idx - 1] as ClassView;
+            const currentView = sorted[idx] as ClassView;
+            positionedRectangle_setPosition(
+              currentView,
+              new Point(
+                currentView.position.x,
+                previousView.position.y +
+                  previousView.rectangle.height +
+                  averageSpacing,
+              ),
+            );
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+
+    this.drawScreen();
+  }
+
   truncateTextWithEllipsis(val: string, limit = this.maxLineLength): string {
     const ellipsis = '...';
     return val.length > limit

package/src/components/studio/DSLDiagram_LegendStudioDocumentation.ts

@@ -14,27 +14,7 @@
  * limitations under the License.
  */
 
-import type { LegendApplicationDocumentationEntryConfig } from '@finos/legend-application';
-
 export enum DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY {
   GRAMMAR_PARSER = 'dsl-diagram.grammar.parser',
   GRAMMAR_ELEMENT_DIAGRAM = 'dsl-diagram.grammar.element.diagram',
 }
-
-export const DSL_DIAGRAM_DOCUMENTATION_ENTRIES: Record<
-  string,
-  LegendApplicationDocumentationEntryConfig
-> = {
-  [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER]: {
-    title: `What is Diagram DSL about?`,
-    markdownText: {
-      value: `\`Diagram DSL\`  (coressponding to \`###Diagram\` section in \`Pure\`) concerns with visualizing data models and their relationship`,
-    },
-  },
-  [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM]: {
-    title: `What is a diagram element?`,
-    markdownText: {
-      value: `A \`Diagram\` element specifies the visualization/rendering of data models and their relationship`,
-    },
-  },
-};

package/src/components/studio/DSLDiagram_LegendStudioPlugin.tsx

@@ -42,25 +42,18 @@ import { Diagram } from '../../models/metamodels/pure/packageableElements/diagra
 import { DiagramEditorState } from '../../stores/studio/DiagramEditorState.js';
 import { DiagramEditor } from './DiagramEditor.js';
 import { ClassDiagramPreview } from './ClassDiagramPreview.js';
-import {
-  type LegendApplicationDocumentationEntry,
-  type LegendApplicationKeyedDocumentationEntry,
-  collectKeyedDocumnetationEntriesFromConfig,
-} from '@finos/legend-application';
 import {
   PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL,
   PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
 } from '../../graphManager/DSLDiagram_PureGraphManagerPlugin.js';
-import {
-  DSL_DIAGRAM_DOCUMENTATION_ENTRIES,
-  DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY,
-} from './DSLDiagram_LegendStudioDocumentation.js';
+import { DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY } from './DSLDiagram_LegendStudioDocumentation.js';
 import {
   EMPTY_DIAGRAM_SNIPPET,
   getDiagramSnippetWithGeneralizationView,
   getDiagramSnippetWithOneClassView,
   getDiagramSnippetWithPropertyView,
 } from './DSLDiagram_CodeSnippets.js';
+import type { LegendApplicationDocumentationEntry } from '@finos/legend-application';
 
 const DIAGRAM_ELEMENT_TYPE = 'DIAGRAM';
 const DIAGRAM_ELEMENT_PROJECT_EXPLORER_DND_TYPE = 'PROJECT_EXPLORER_DIAGRAM';
@@ -73,10 +66,11 @@ export class DSLDiagram_LegendStudioPlugin
     super(packageJson.extensions.studioPlugin, packageJson.version);
   }
 
-  override getExtraKeyedDocumentationEntries(): LegendApplicationKeyedDocumentationEntry[] {
-    return collectKeyedDocumnetationEntriesFromConfig(
-      DSL_DIAGRAM_DOCUMENTATION_ENTRIES,
-    );
+  override getExtraRequiredDocumentationKeys(): string[] {
+    return [
+      DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM,
+      DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
+    ];
   }
 
   override getExtraClassPreviewRenderers(): ClassPreviewRenderer[] {

package/src/components/studio/DiagramEditor.tsx

@@ -26,6 +26,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { type DropTargetMonitor, useDrop } from 'react-dnd';
 import { observer } from 'mobx-react-lite';
 import {
+  ALIGNER_OPERATOR,
   DiagramRenderer,
   DIAGRAM_INTERACTION_MODE,
   DIAGRAM_RELATIONSHIP_EDIT_MODE,
@@ -70,6 +71,14 @@ import {
   ZoomInIcon,
   ZoomOutIcon,
   Dialog,
+  AlignEndIcon,
+  DistributeHorizontalIcon,
+  DistributeVerticalIcon,
+  AlignStartIcon,
+  AlignCenterIcon,
+  AlignTopIcon,
+  AlignMiddleIcon,
+  AlignBottomIcon,
 } from '@finos/legend-art';
 import {
   type Type,
@@ -1258,9 +1267,111 @@ const DiagramEditorHeader = observer(
         diagramEditorState.setSidePanelState(undefined);
       }
     };
+    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="Align left"
+            disabled={isAlignerDisabled}
+            tabIndex={-1}
+            onClick={(): void =>
+              diagramEditorState.renderer.align(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(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(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(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(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(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(
+                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(
+                ALIGNER_OPERATOR.SPACE_VERTICALLY,
+              )
+            }
+          >
+            <DistributeVerticalIcon className="diagram-editor__icon--aligner" />
+          </button>
+        </div>
         <DropdownMenu
           className="diagram-editor__header__dropdown"
           content={

package/src/models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.ts

@@ -43,7 +43,7 @@ export class AssociationView extends PropertyHolderView implements Hashable {
     return hashArray([
       DIAGRAM_HASH_STRUCTURE.ASSOCIATION_VIEW,
       super.hashCode,
-      this.association.hashValue,
+      this.association.valueForSerialization ?? '',
     ]);
   }
 }

package/src/models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.ts

@@ -47,7 +47,7 @@ export class ClassView extends PositionedRectangle implements Hashable {
       DIAGRAM_HASH_STRUCTURE.CLASS_VIEW,
       super.hashCode,
       this.id,
-      this.class.hashValue,
+      this.class.valueForSerialization ?? '',
       this.hideProperties?.toString() ?? '',
       this.hideTaggedValues?.toString() ?? '',
       this.hideStereotypes?.toString() ?? '',

package/src/models/protocols/pure/DSLDiagram_PureProtocolProcessorPlugin.ts

@@ -157,12 +157,4 @@ export class DSLDiagram_PureProtocolProcessorPlugin extends PureProtocolProcesso
       },
     ];
   }
-
-  override V1_getExtraSourceInformationKeys(): string[] {
-    return [
-      'classSourceInformation',
-      'sourceViewSourceInformation',
-      'targetViewSourceInformation',
-    ];
-  }
 }

package/src/models/protocols/pure/v1/transformation/pureGraph/V1_DSLDiagram_TransformerHelper.ts

@@ -28,7 +28,6 @@ import { V1_Rectangle } from '../../model/packageableElements/diagram/geometry/V
 import { V1_PropertyView } from '../../model/packageableElements/diagram/V1_DSLDiagram_PropertyView.js';
 import {
   V1_initPackageableElement,
-  V1_transformElementReference,
   V1_transformPropertyReference,
 } from '@finos/legend-graph';
 
@@ -74,7 +73,7 @@ const transformGenerationView = (
 
 const transformClassView = (element: ClassView): V1_ClassView => {
   const _classView = new V1_ClassView();
-  _classView.class = V1_transformElementReference(element.class);
+  _classView.class = element.class.valueForSerialization ?? '';
   _classView.hideProperties = element.hideProperties;
   _classView.hideStereotypes = element.hideStereotypes;
   _classView.hideTaggedValues = element.hideTaggedValues;