@finos/legend-extension-dsl-diagram 8.1.195 → 8.1.197

package/src/components/studio/DiagramEditor.tsx

@@ -1,1514 +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 { useRef, useState, useEffect, useCallback, forwardRef } from 'react';
-import { type DropTargetMonitor, useDrop } from 'react-dnd';
-import { observer } from 'mobx-react-lite';
-import {
-  DIAGRAM_ALIGNER_OPERATOR,
-  DiagramRenderer,
-  DIAGRAM_INTERACTION_MODE,
-  DIAGRAM_RELATIONSHIP_EDIT_MODE,
-  DIAGRAM_ZOOM_LEVELS,
-} from '../DiagramRenderer.js';
-import {
-  type DiagramEditorInlineClassCreatorState,
-  type DiagramEditorInlineClassRenamerState,
-  type DiagramEditorInlinePropertyEditorState,
-  DIAGRAM_EDITOR_SIDE_PANEL_TAB,
-  DiagramEditorClassViewEditorSidePanelState,
-  DiagramEditorState,
-} from '../../stores/studio/DiagramEditorState.js';
-import {
-  type ResizablePanelHandlerProps,
-  ContextMenu,
-  getCollapsiblePanelGroupProps,
-  BasePopover,
-  BlankPanelContent,
-  CaretDownIcon,
-  CheckSquareIcon,
-  clsx,
-  createFilter,
-  CustomSelectorInput,
-  KeyboardIcon,
-  ControlledDropdownMenu,
-  MenuContent,
-  MenuContentDivider,
-  MenuContentItem,
-  PlusIcon,
-  SquareIcon,
-  ResizablePanelGroup,
-  ResizablePanelSplitter,
-  ResizablePanel,
-  ResizeIcon,
-  MinusIcon,
-  MousePointerIcon,
-  MoveIcon,
-  PlusCircleIcon,
-  SidebarIcon,
-  TriangleIcon,
-  ZoomInIcon,
-  ZoomOutIcon,
-  Dialog,
-  AlignEndIcon,
-  DistributeHorizontalIcon,
-  DistributeVerticalIcon,
-  AlignStartIcon,
-  AlignCenterIcon,
-  AlignTopIcon,
-  AlignMiddleIcon,
-  AlignBottomIcon,
-  useResizeDetector,
-  Modal,
-  ModalBody,
-  ModalHeader,
-} from '@finos/legend-art';
-import {
-  type Type,
-  type Multiplicity,
-  Class,
-  DerivedProperty,
-  Property,
-  ELEMENT_PATH_DELIMITER,
-  MULTIPLICITY_INFINITE,
-  GenericType,
-  createPath,
-  isValidFullPath,
-  isValidPathIdentifier,
-  resolvePackagePathAndElementName,
-} from '@finos/legend-graph';
-import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
-import { flowResult } from 'mobx';
-import {
-  useApplicationStore,
-  useApplicationNavigationContext,
-  useCommands,
-} from '@finos/legend-application';
-import {
-  ClassFormEditor,
-  CORE_DND_TYPE,
-  ElementDragSource,
-  useEditorStore,
-  property_setName,
-  property_setGenericType,
-  property_setMultiplicity,
-  queryClass,
-} from '@finos/legend-application-studio';
-import { cleanUpDeadReferencesInDiagram } from '../../graph/helpers/DSL_Diagram_Helper.js';
-import { Point } from '../../graph/metamodel/pure/packageableElements/diagram/geometry/DSL_Diagram_Point.js';
-import {
-  classView_setHideProperties,
-  classView_setHideStereotypes,
-  classView_setHideTaggedValues,
-} from '../../stores/studio/DSL_Diagram_GraphModifierHelper.js';
-import { DSL_DIAGRAM_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/studio/DSL_Diagram_LegendStudioApplicationNavigationContext.js';
-import { DSL_DIAGRAM_TEST_ID } from '../../__lib__/studio/DSL_Diagram_LegendStudioTesting.js';
-import {
-  buildElementOption,
-  type PackageableElementOption,
-} from '@finos/legend-lego/graph-editor';
-
-const DiagramEditorContextMenu = observer(
-  forwardRef<
-    HTMLDivElement,
-    {
-      diagramEditorState: DiagramEditorState;
-    }
-  >(function DiagramEditorContextMenu(props, ref) {
-    const { diagramEditorState } = props;
-    const editorStore = useEditorStore();
-
-    // actions
-    const buildQuery = editorStore.applicationStore.guardUnhandledError(
-      async () => {
-        const classView = guaranteeNonNullable(
-          diagramEditorState.contextMenuClassView,
-        );
-        await queryClass(classView.class.value, editorStore);
-      },
-    );
-
-    return (
-      <MenuContent>
-        <MenuContentItem onClick={buildQuery}>Query...</MenuContentItem>
-      </MenuContent>
-    );
-  }),
-);
-
-const DiagramRendererHotkeyInfosModal = observer(
-  (props: { open: boolean; onClose: () => void }) => {
-    const { open, onClose } = props;
-    const applicationStore = useApplicationStore();
-    return (
-      <Dialog
-        open={open}
-        onClose={onClose}
-        classes={{
-          root: 'editor-modal__root-container',
-          container: 'editor-modal__container',
-          paper: 'editor-modal__content--scrollable',
-        }}
-      >
-        <Modal
-          darkMode={
-            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
-          }
-          className="modal--scrollable diagram-editor__hotkeys__dialog"
-        >
-          <ModalHeader title="Diagram Hotkeys" />
-          <ModalBody>
-            <div className="diagram-editor__hotkey__groups">
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Use view tool
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">V</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Use pan tool
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">M</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">Zoom</div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">Z</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Recenter
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">R</div>
-                </div>
-              </div>
-
-              <div className="diagram-editor__hotkey__groups__divider" />
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Remove selected element(s)
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">Remove</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Edit the selected element
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">E</div>
-                </div>
-              </div>
-
-              <div className="diagram-editor__hotkey__groups__divider" />
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Use property tool
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">P</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Use inheritance tool
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">I</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Add class
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">C</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Add simple property to selected class
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">Alt</div>
-                  <div className="hotkey__plus">
-                    <PlusIcon />
-                  </div>
-                  <div className="hotkey__key">&darr;</div>
-                </div>
-              </div>
-
-              <div className="diagram-editor__hotkey__groups__divider" />
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Toggle display for properties of selected classes
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">Alt</div>
-                  <div className="hotkey__plus">
-                    <PlusIcon />
-                  </div>
-                  <div className="hotkey__key">P</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Toggle display for tagged values of selected classes
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">Alt</div>
-                  <div className="hotkey__plus">
-                    <PlusIcon />
-                  </div>
-                  <div className="hotkey__key">T</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Toggle display for stereotypes of selected classes
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">Alt</div>
-                  <div className="hotkey__plus">
-                    <PlusIcon />
-                  </div>
-                  <div className="hotkey__key">S</div>
-                </div>
-              </div>
-
-              <div className="diagram-editor__hotkey__groups__divider" />
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Eject the property
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">&rarr;</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Add subtypes of the selected classes to the diagram
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">&darr;</div>
-                </div>
-              </div>
-              <div className="diagram-editor__hotkey__group">
-                <div className="diagram-editor__hotkey__annotation">
-                  Add supertypes of the selected classes to the diagram
-                </div>
-                <div className="hotkey__combination diagram-editor__hotkey__keys">
-                  <div className="hotkey__key">&uarr;</div>
-                </div>
-              </div>
-            </div>
-          </ModalBody>
-        </Modal>
-      </Dialog>
-    );
-  },
-);
-
-const DiagramEditorToolPanel = observer(
-  (props: { diagramEditorState: DiagramEditorState }) => {
-    const { diagramEditorState } = props;
-    const renderer = diagramEditorState.renderer;
-    const isReadOnly = diagramEditorState.isReadOnly;
-    const showDiagramRendererHokeysModal = (): void =>
-      diagramEditorState.setShowHotkeyInfosModal(true);
-    const hideDiagramRendererHokeysModal = (): void =>
-      diagramEditorState.setShowHotkeyInfosModal(false);
-    const createModeSwitcher =
-      (
-        editMode: DIAGRAM_INTERACTION_MODE,
-        relationshipMode: DIAGRAM_RELATIONSHIP_EDIT_MODE,
-      ): (() => void) =>
-      (): void => {
-        if (!isReadOnly) {
-          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 className="diagram-editor__tools__divider" />
-        <button
-          className={clsx('diagram-editor__tool', {
-            'diagram-editor__tool--active':
-              renderer.interactionMode ===
-                DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP &&
-              renderer.relationshipMode ===
-                DIAGRAM_RELATIONSHIP_EDIT_MODE.PROPERTY,
-          })}
-          tabIndex={-1}
-          title="Property Tool (P)"
-          disabled={isReadOnly}
-          onClick={createModeSwitcher(
-            DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
-            DIAGRAM_RELATIONSHIP_EDIT_MODE.PROPERTY,
-          )}
-        >
-          <MinusIcon className="diagram-editor__icon--property" />
-        </button>
-        <button
-          className={clsx('diagram-editor__tool', {
-            'diagram-editor__tool--active':
-              renderer.interactionMode ===
-                DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP &&
-              renderer.relationshipMode ===
-                DIAGRAM_RELATIONSHIP_EDIT_MODE.INHERITANCE,
-          })}
-          tabIndex={-1}
-          title="Inheritance Tool (I)"
-          disabled={isReadOnly}
-          onClick={createModeSwitcher(
-            DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
-            DIAGRAM_RELATIONSHIP_EDIT_MODE.INHERITANCE,
-          )}
-        >
-          <TriangleIcon className="diagram-editor__icon--inheritance" />
-        </button>
-        <button
-          className={clsx('diagram-editor__tool', {
-            // 'diagram-editor__tool--active':
-            //   diagramRenderer.editMode === DIAGRAM_EDIT_MODE.RELATIONSHIP &&
-            //   diagramRenderer.relationshipMode ===
-            //     DIAGRAM_RELATIONSHIP_EDIT_MODE.ASSOCIATION,
-          })}
-          tabIndex={-1}
-          title="Association Tool"
-          disabled={true}
-          // onClick={changeMode(
-          //   DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
-          //   DIAGRAM_RELATIONSHIP_EDIT_MODE.ASSOCIATION,
-          // )}
-        >
-          <ResizeIcon className="diagram-editor__icon--association" />
-        </button>
-        <button
-          className={clsx('diagram-editor__tool', {
-            'diagram-editor__tool--active':
-              renderer.interactionMode === DIAGRAM_INTERACTION_MODE.ADD_CLASS,
-          })}
-          tabIndex={-1}
-          title="Add class tool (C)"
-          disabled={isReadOnly}
-          onClick={createModeSwitcher(
-            DIAGRAM_INTERACTION_MODE.ADD_CLASS,
-            DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
-          )}
-        >
-          <PlusCircleIcon className="diagram-editor__icon--add-class" />
-        </button>
-        <div className="diagram-editor__tools__divider" />
-        <button
-          className="diagram-editor__tool"
-          tabIndex={-1}
-          title="Show Hotkeys"
-          onClick={showDiagramRendererHokeysModal}
-        >
-          <KeyboardIcon className="diagram-editor__icon--hotkey-info" />
-        </button>
-        <DiagramRendererHotkeyInfosModal
-          open={diagramEditorState.showHotkeyInfosModal}
-          onClose={hideDiagramRendererHokeysModal}
-        />
-      </div>
-    );
-  },
-);
-
-const DiagramEditorClassViewEditor = observer(
-  (props: {
-    classViewEditorState: DiagramEditorClassViewEditorSidePanelState;
-  }) => {
-    const { classViewEditorState } = props;
-    const editorStore = useEditorStore();
-    const classView = classViewEditorState.classView;
-    const diagramEditorState = classViewEditorState.diagramEditorState;
-    const isReadOnly = diagramEditorState.isReadOnly;
-
-    // Tabs
-    const selectedTab = classViewEditorState.selectedTab;
-    const tabs = [
-      DIAGRAM_EDITOR_SIDE_PANEL_TAB.ELEMENT,
-      DIAGRAM_EDITOR_SIDE_PANEL_TAB.VIEW,
-    ];
-    const changeTab =
-      (tab: DIAGRAM_EDITOR_SIDE_PANEL_TAB): (() => void) =>
-      (): void => {
-        classViewEditorState.setSelectedTab(tab);
-      };
-
-    const redrawOnClassChange = useCallback((): void => {
-      cleanUpDeadReferencesInDiagram(
-        diagramEditorState.diagram,
-        editorStore.graphManagerState.graph,
-      );
-      diagramEditorState.renderer.render();
-    }, [diagramEditorState, editorStore]);
-
-    const toggleHideProperties = (): void => {
-      if (isReadOnly) {
-        return;
-      }
-      classView_setHideProperties(classView, !classView.hideProperties);
-      diagramEditorState.renderer.render();
-    };
-    const toggleHideTaggedValues = (): void => {
-      if (isReadOnly) {
-        return;
-      }
-      classView_setHideTaggedValues(classView, !classView.hideTaggedValues);
-      diagramEditorState.renderer.render();
-    };
-    const toggleHideStereotypes = (): void => {
-      if (isReadOnly) {
-        return;
-      }
-      classView_setHideStereotypes(classView, !classView.hideStereotypes);
-      diagramEditorState.renderer.render();
-    };
-
-    return (
-      <div className="diagram-editor__class-view-editor">
-        <div className="diagram-editor__class-view-editor__header">
-          <div className="diagram-editor__class-view-editor__header__tabs">
-            {tabs.map((tab) => (
-              <div
-                key={tab}
-                onClick={changeTab(tab)}
-                className={clsx(
-                  'diagram-editor__class-view-editor__header__tab',
-                  {
-                    'diagram-editor__class-view-editor__header__tab--active':
-                      tab === selectedTab,
-                  },
-                )}
-              >
-                {prettyCONSTName(tab)}
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className="diagram-editor__class-view-editor__content">
-          {DIAGRAM_EDITOR_SIDE_PANEL_TAB.ELEMENT === selectedTab && (
-            <ClassFormEditor
-              _class={classViewEditorState.classEditorState.class}
-              editorState={classViewEditorState.classEditorState}
-              onHashChange={redrawOnClassChange}
-            />
-          )}
-          {DIAGRAM_EDITOR_SIDE_PANEL_TAB.VIEW === selectedTab && (
-            <div className="panel__content__form diagram-editor__class-view-editor__content__form">
-              <div className="panel__content__form__section">
-                {/* Hide properties */}
-                <div
-                  className={clsx('panel__content__form__section__toggler')}
-                  onClick={toggleHideProperties}
-                >
-                  <button
-                    className={clsx(
-                      'panel__content__form__section__toggler__btn',
-                      {
-                        'panel__content__form__section__toggler__btn--toggled':
-                          classView.hideProperties,
-                      },
-                    )}
-                    disabled={isReadOnly}
-                  >
-                    {classView.hideProperties ? (
-                      <CheckSquareIcon />
-                    ) : (
-                      <SquareIcon />
-                    )}
-                  </button>
-                  <div className="panel__content__form__section__toggler__prompt">
-                    Specifies if properties should be hidden
-                  </div>
-                </div>
-                {/* Hide tagged-values */}
-                <div
-                  className={clsx('panel__content__form__section__toggler')}
-                  onClick={toggleHideTaggedValues}
-                >
-                  <button
-                    className={clsx(
-                      'panel__content__form__section__toggler__btn',
-                      {
-                        'panel__content__form__section__toggler__btn--toggled':
-                          classView.hideTaggedValues,
-                      },
-                    )}
-                    disabled={isReadOnly}
-                  >
-                    {classView.hideTaggedValues ? (
-                      <CheckSquareIcon />
-                    ) : (
-                      <SquareIcon />
-                    )}
-                  </button>
-                  <div className="panel__content__form__section__toggler__prompt">
-                    Specifies if tagged values should be hidden
-                  </div>
-                </div>
-                {/* Hide stereotypes */}
-                <div
-                  className={clsx('panel__content__form__section__toggler')}
-                  onClick={toggleHideStereotypes}
-                >
-                  <button
-                    className={clsx(
-                      'panel__content__form__section__toggler__btn',
-                      {
-                        'panel__content__form__section__toggler__btn--toggled':
-                          classView.hideStereotypes,
-                      },
-                    )}
-                    disabled={isReadOnly}
-                  >
-                    {classView.hideStereotypes ? (
-                      <CheckSquareIcon />
-                    ) : (
-                      <SquareIcon />
-                    )}
-                  </button>
-                  <div className="panel__content__form__section__toggler__prompt">
-                    Specifies if stereotypes should be hidden
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-const DiagramEditorOverlay = observer(
-  (props: { diagramEditorState: DiagramEditorState }) => {
-    const { diagramEditorState } = props;
-    const sidePanelState = diagramEditorState.sidePanelState;
-
-    const resizeSidePanel = (handleProps: ResizablePanelHandlerProps): void =>
-      diagramEditorState.sidePanelDisplayState.setSize(
-        (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
-          .width,
-      );
-
-    // layout
-    const sidePanelCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
-      diagramEditorState.sidePanelDisplayState.size === 0,
-      {
-        classes: ['diagram-editor__overlay__panel'],
-        onStopResize: resizeSidePanel,
-        size: diagramEditorState.sidePanelDisplayState.size,
-      },
-    );
-
-    return (
-      <ResizablePanelGroup
-        className="diagram-editor__overlay"
-        orientation="vertical"
-      >
-        <ResizablePanel
-          {...sidePanelCollapsiblePanelGroupProps.remainingPanel}
-          minSize={300}
-        >
-          <div className="diagram-editor__view-finder" />
-        </ResizablePanel>
-        <ResizablePanelSplitter className="diagram-editor__overlay__panel-resizer" />
-        <ResizablePanel
-          {...sidePanelCollapsiblePanelGroupProps.collapsiblePanel}
-          direction={-1}
-        >
-          <div className="panel diagram-editor__side-panel">
-            {sidePanelState instanceof
-              DiagramEditorClassViewEditorSidePanelState && (
-              <DiagramEditorClassViewEditor
-                classViewEditorState={sidePanelState}
-              />
-            )}
-            {!sidePanelState && (
-              <BlankPanelContent>No element selected</BlankPanelContent>
-            )}
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    );
-  },
-);
-
-const DiagramEditorInlineClassRenamerContent = observer(
-  (props: {
-    inlineClassRenamerState: DiagramEditorInlineClassRenamerState;
-  }) => {
-    const { inlineClassRenamerState } = props;
-    const editorStore = useEditorStore();
-    const applicationStore = useApplicationStore();
-    const diagramEditorState = inlineClassRenamerState.diagramEditorState;
-    const _class = inlineClassRenamerState.classView.class.value;
-    const isReadOnly = diagramEditorState.isReadOnly;
-    const [name, setName] = useState(_class.name);
-    const [packagePath] = resolvePackagePathAndElementName(_class.path);
-    const newClassPath = createPath(packagePath, name);
-    const isClassNameNonEmpty = name !== '';
-    const isClassNameValid = isValidPathIdentifier(name);
-    const existingElement =
-      editorStore.graphManagerState.graph.getNullableElement(newClassPath);
-    const isClassNameUnique = !existingElement || existingElement === _class;
-    // const class
-    const classCreationValidationErrorMessage = !isClassNameNonEmpty
-      ? `Class name cannot be empty`
-      : !isClassNameValid
-        ? `Class name is not valid`
-        : !isClassNameUnique
-          ? `Element of the same name already existed`
-          : undefined;
-    const canRenameClass =
-      isClassNameNonEmpty && isClassNameValid && isClassNameUnique;
-
-    const close = (event: React.MouseEvent<HTMLButtonElement>): void => {
-      event.preventDefault();
-      if (canRenameClass) {
-        diagramEditorState.setInlineClassRenamerState(undefined);
-        flowResult(
-          editorStore.graphEditorMode.renameElement(_class, newClassPath),
-        ).catch(applicationStore.alertUnhandledError);
-      }
-    };
-    const pathInputRef = useRef<HTMLInputElement>(null);
-
-    const changePath: React.ChangeEventHandler<HTMLInputElement> = (event) =>
-      setName(event.target.value);
-
-    useEffect(() => {
-      pathInputRef.current?.focus();
-    }, [inlineClassRenamerState]);
-
-    return (
-      <form className="diagram-editor__inline-class-creator">
-        <div className="input-group">
-          <input
-            className="diagram-editor__inline-class-creator__path input-group__input input--dark"
-            ref={pathInputRef}
-            disabled={isReadOnly}
-            value={name}
-            placeholder="Enter class name"
-            onChange={changePath}
-          />
-          {classCreationValidationErrorMessage && (
-            <div className="input-group__error-message">
-              {classCreationValidationErrorMessage}
-            </div>
-          )}
-        </div>
-        <button
-          type="submit"
-          className="diagram-editor__inline-class-creator__close-btn"
-          onClick={close}
-        />
-      </form>
-    );
-  },
-);
-
-const DiagramEditorInlineClassRenamer = observer(
-  (props: { diagramEditorState: DiagramEditorState }) => {
-    const { diagramEditorState } = props;
-    const closeEditor = (): void => {
-      diagramEditorState.setInlineClassRenamerState(undefined);
-    };
-    const inlineClassRenamerState = diagramEditorState.inlineClassRenamerState;
-    const anchorPositionPoint = inlineClassRenamerState
-      ? diagramEditorState.renderer.canvasCoordinateToEventCoordinate(
-          diagramEditorState.renderer.modelCoordinateToCanvasCoordinate(
-            inlineClassRenamerState.point,
-          ),
-        )
-      : new Point(0, 0);
-
-    return (
-      <BasePopover
-        onClose={closeEditor}
-        anchorPosition={{
-          left: anchorPositionPoint.x,
-          top: anchorPositionPoint.y,
-        }}
-        anchorReference="anchorPosition"
-        open={Boolean(inlineClassRenamerState)}
-        BackdropProps={{
-          invisible: true,
-        }}
-        elevation={0}
-        marginThreshold={0}
-        disableRestoreFocus={true}
-      >
-        <div className="diagram-editor__inline-class-creator__container">
-          {inlineClassRenamerState && (
-            <DiagramEditorInlineClassRenamerContent
-              inlineClassRenamerState={inlineClassRenamerState}
-            />
-          )}
-        </div>
-      </BasePopover>
-    );
-  },
-);
-
-const DiagramEditorInlineClassCreatorContent = observer(
-  (props: {
-    inlineClassCreatorState: DiagramEditorInlineClassCreatorState;
-  }) => {
-    const { inlineClassCreatorState } = props;
-    const editorStore = useEditorStore();
-    const applicationStore = useApplicationStore();
-    const diagramEditorState = inlineClassCreatorState.diagramEditorState;
-    const isReadOnly = diagramEditorState.isReadOnly;
-    const [path, setPath] = useState(
-      `${
-        diagramEditorState.diagram.package
-          ? `${diagramEditorState.diagram.package.path}${ELEMENT_PATH_DELIMITER}`
-          : ''
-      }Class_${editorStore.graphManagerState.graph.ownClasses.length + 1}`,
-    );
-    const isClassPathNonEmpty = path !== '';
-    const isNotTopLevelClass = path.includes(ELEMENT_PATH_DELIMITER);
-    const isValidPath = isValidFullPath(path);
-    const isClassUnique =
-      !editorStore.graphManagerState.graph.getNullableElement(path);
-    const classCreationValidationErrorMessage = !isClassPathNonEmpty
-      ? `Class path cannot be empty`
-      : !isNotTopLevelClass
-        ? `Creating top level class is not allowed`
-        : !isValidPath
-          ? `Class path is not valid`
-          : !isClassUnique
-            ? `Class already existed`
-            : undefined;
-    const canCreateClass =
-      isClassPathNonEmpty && isNotTopLevelClass && isValidPath && isClassUnique;
-
-    const createClass = async (
-      event: React.MouseEvent<HTMLButtonElement>,
-    ): Promise<void> => {
-      event.preventDefault();
-      if (canCreateClass) {
-        diagramEditorState.setInlineClassCreatorState(undefined);
-        const [packagePath, name] = resolvePackagePathAndElementName(path);
-        const _class = new Class(name);
-        await flowResult(
-          editorStore.graphEditorMode.addElement(_class, packagePath, false),
-        );
-        diagramEditorState.renderer.addClassView(
-          _class,
-          inlineClassCreatorState.point,
-        );
-      }
-    };
-    const close = (event: React.MouseEvent<HTMLButtonElement>): void => {
-      createClass(event).catch(applicationStore.alertUnhandledError);
-    };
-    const pathInputRef = useRef<HTMLInputElement>(null);
-
-    const changePath: React.ChangeEventHandler<HTMLInputElement> = (event) =>
-      setPath(event.target.value);
-
-    useEffect(() => {
-      pathInputRef.current?.focus();
-    }, [inlineClassCreatorState]);
-
-    return (
-      <form className="diagram-editor__inline-class-creator">
-        <div className="input-group">
-          <input
-            className="diagram-editor__inline-class-creator__path input-group__input input--dark"
-            ref={pathInputRef}
-            disabled={isReadOnly}
-            value={path}
-            placeholder="Enter class path"
-            onChange={changePath}
-          />
-          {classCreationValidationErrorMessage && (
-            <div className="input-group__error-message">
-              {classCreationValidationErrorMessage}
-            </div>
-          )}
-        </div>
-        <button
-          type="submit"
-          className="diagram-editor__inline-class-creator__close-btn"
-          onClick={close}
-        />
-      </form>
-    );
-  },
-);
-
-const DiagramEditorInlineClassCreator = observer(
-  (props: { diagramEditorState: DiagramEditorState }) => {
-    const { diagramEditorState } = props;
-    const closeEditor = (): void => {
-      diagramEditorState.setInlineClassCreatorState(undefined);
-    };
-    const inlineClassCreatorState = diagramEditorState.inlineClassCreatorState;
-    const anchorPositionPoint = inlineClassCreatorState
-      ? diagramEditorState.renderer.canvasCoordinateToEventCoordinate(
-          diagramEditorState.renderer.modelCoordinateToCanvasCoordinate(
-            inlineClassCreatorState.point,
-          ),
-        )
-      : new Point(0, 0);
-
-    return (
-      <BasePopover
-        onClose={closeEditor}
-        anchorPosition={{
-          left: anchorPositionPoint.x,
-          top: anchorPositionPoint.y,
-        }}
-        anchorReference="anchorPosition"
-        open={Boolean(inlineClassCreatorState)}
-        BackdropProps={{
-          invisible: true,
-        }}
-        elevation={0}
-        marginThreshold={0}
-        disableRestoreFocus={true}
-      >
-        <div className="diagram-editor__inline-class-creator__container">
-          {inlineClassCreatorState && (
-            <DiagramEditorInlineClassCreatorContent
-              inlineClassCreatorState={inlineClassCreatorState}
-            />
-          )}
-        </div>
-      </BasePopover>
-    );
-  },
-);
-
-const DiagramEditorInlinePropertyMultiplicityEditor = observer(
-  (props: {
-    value: Multiplicity;
-    updateValue: (val: Multiplicity) => void;
-    isReadOnly: boolean;
-  }) => {
-    const { value, updateValue, isReadOnly } = props;
-    const [lowerBound, setLowerBound] = useState<string | number>(
-      value.lowerBound,
-    );
-    const [upperBound, setUpperBound] = useState<string | number>(
-      value.upperBound ?? MULTIPLICITY_INFINITE,
-    );
-    const editorStore = useEditorStore();
-    const updateMultiplicity = (
-      lower: number | string,
-      upper: number | string,
-    ): void => {
-      const lBound = typeof lower === 'number' ? lower : parseInt(lower, 10);
-      const uBound =
-        upper === MULTIPLICITY_INFINITE
-          ? undefined
-          : typeof upper === 'number'
-            ? upper
-            : parseInt(upper, 10);
-      if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
-        updateValue(
-          editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
-        );
-      }
-    };
-    const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      setLowerBound(event.target.value);
-      updateMultiplicity(event.target.value, upperBound);
-    };
-    const changeUpperBound: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      setUpperBound(event.target.value);
-      updateMultiplicity(lowerBound, event.target.value);
-    };
-
-    return (
-      <div className="diagram-editor__inline-property-editor__multiplicity-editor">
-        <input
-          className="diagram-editor__inline-property-editor__multiplicity-editor__bound input--dark"
-          disabled={isReadOnly}
-          spellCheck={false}
-          value={lowerBound}
-          onChange={changeLowerBound}
-        />
-        <div className="diagram-editor__inline-property-editor__multiplicity-editor__range">
-          ..
-        </div>
-        <input
-          className="diagram-editor__inline-property-editor__multiplicity-editor__bound input--dark"
-          disabled={isReadOnly}
-          spellCheck={false}
-          value={upperBound}
-          onChange={changeUpperBound}
-        />
-      </div>
-    );
-  },
-);
-
-const DiagramEditorInlinePropertyEditorContent = observer(
-  (props: {
-    inlinePropertyEditorState: DiagramEditorInlinePropertyEditorState;
-  }) => {
-    const { inlinePropertyEditorState } = props;
-    const editorStore = useEditorStore();
-    const applicationStore = editorStore.applicationStore;
-    const diagramEditorState = inlinePropertyEditorState.diagramEditorState;
-    const isReadOnly = diagramEditorState.isReadOnly;
-    const propertyNameInputRef = useRef<HTMLInputElement>(null);
-    const property = inlinePropertyEditorState.property.value;
-    const close = (event: React.MouseEvent<HTMLButtonElement>): void => {
-      event.preventDefault();
-      diagramEditorState.setInlinePropertyEditorState(undefined);
-    };
-
-    const changePropertyName: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      if (property instanceof DerivedProperty || property instanceof Property) {
-        property_setName(property, event.target.value);
-        diagramEditorState.renderer.render();
-      }
-    };
-
-    const changeMultiplicity = (val: Multiplicity): void => {
-      if (property instanceof DerivedProperty || property instanceof Property) {
-        property_setMultiplicity(property, val);
-        diagramEditorState.renderer.render();
-      }
-    };
-
-    // Type
-    const currentPropertyType = property.genericType.value.rawType;
-    const propertyTypeOptions =
-      editorStore.graphManagerState.usableClassPropertyTypes.map(
-        buildElementOption,
-      );
-    const propertyTypeFilterOption = createFilter({
-      ignoreCase: true,
-      ignoreAccents: false,
-      stringify: (option: { data: PackageableElementOption<Type> }): string =>
-        option.data.value.path,
-    });
-    const selectedPropertyType = {
-      value: currentPropertyType,
-      label: currentPropertyType.name,
-    };
-    const changePropertyType = (val: PackageableElementOption<Type>): void => {
-      if (property instanceof Property || property instanceof DerivedProperty) {
-        property_setGenericType(property, new GenericType(val.value));
-      }
-    };
-
-    useEffect(() => {
-      propertyNameInputRef.current?.focus();
-    }, [inlinePropertyEditorState]);
-
-    return (
-      <form
-        className={clsx('diagram-editor__inline-property-editor', {
-          'diagram-editor__inline-property-editor--with-type':
-            !inlinePropertyEditorState.isEditingPropertyView,
-        })}
-      >
-        <input
-          className="diagram-editor__inline-property-editor__name input--dark"
-          ref={propertyNameInputRef}
-          disabled={isReadOnly}
-          value={property.name}
-          onChange={changePropertyName}
-        />
-        {!inlinePropertyEditorState.isEditingPropertyView && (
-          <CustomSelectorInput
-            className="diagram-editor__inline-property-editor__type"
-            disabled={isReadOnly}
-            options={propertyTypeOptions}
-            onChange={changePropertyType}
-            value={selectedPropertyType}
-            placeholder="Choose a type..."
-            darkMode={
-              !applicationStore.layoutService
-                .TEMPORARY__isLightColorThemeEnabled
-            }
-            filterOption={propertyTypeFilterOption}
-          />
-        )}
-        <DiagramEditorInlinePropertyMultiplicityEditor
-          isReadOnly={isReadOnly}
-          value={property.multiplicity}
-          updateValue={changeMultiplicity}
-        />
-        <button
-          type="submit"
-          className="diagram-editor__inline-property-editor__close-btn"
-          onClick={close}
-        />
-      </form>
-    );
-  },
-);
-
-const DiagramEditorInlinePropertyEditor = observer(
-  (props: { diagramEditorState: DiagramEditorState }) => {
-    const { diagramEditorState } = props;
-    const closeEditor = (): void => {
-      diagramEditorState.setInlinePropertyEditorState(undefined);
-    };
-    const inlinePropertyEditorState =
-      diagramEditorState.inlinePropertyEditorState;
-    const anchorPositionPoint = inlinePropertyEditorState
-      ? diagramEditorState.renderer.canvasCoordinateToEventCoordinate(
-          diagramEditorState.renderer.modelCoordinateToCanvasCoordinate(
-            inlinePropertyEditorState.point,
-          ),
-        )
-      : new Point(0, 0);
-
-    return (
-      <BasePopover
-        onClose={closeEditor}
-        anchorPosition={{
-          left: anchorPositionPoint.x,
-          top: anchorPositionPoint.y,
-        }}
-        anchorReference="anchorPosition"
-        open={Boolean(inlinePropertyEditorState)}
-        BackdropProps={{
-          invisible: true,
-        }}
-        elevation={0}
-        marginThreshold={0}
-        disableRestoreFocus={true}
-      >
-        <div className="diagram-editor__inline-property-editor__container">
-          {inlinePropertyEditorState && (
-            <DiagramEditorInlinePropertyEditorContent
-              inlinePropertyEditorState={inlinePropertyEditorState}
-            />
-          )}
-        </div>
-      </BasePopover>
-    );
-  },
-);
-
-const DiagramEditorDiagramCanvas = observer(
-  forwardRef<
-    HTMLDivElement,
-    {
-      diagramEditorState: DiagramEditorState;
-    }
-  >(function DiagramEditorDiagramCanvas(props, _ref) {
-    const { diagramEditorState } = props;
-    const ref = _ref as React.RefObject<HTMLDivElement>;
-    const isReadOnly = diagramEditorState.isReadOnly;
-
-    const { width, height } = useResizeDetector<HTMLDivElement>({
-      refreshMode: 'debounce',
-      refreshRate: 50,
-      targetRef: ref,
-    });
-
-    useEffect(() => {
-      const renderer = new DiagramRenderer(
-        ref.current,
-        diagramEditorState.diagram,
-      );
-      diagramEditorState.setRenderer(renderer);
-      diagramEditorState.setupRenderer();
-      renderer.render({ initial: true });
-    }, [ref, diagramEditorState]);
-
-    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]);
-
-    // Drag and Drop
-    const handleDrop = useCallback(
-      (item: ElementDragSource, monitor: DropTargetMonitor): void => {
-        if (!isReadOnly) {
-          if (item instanceof ElementDragSource) {
-            if (item.data.packageableElement instanceof Class) {
-              const dropPosition = monitor.getClientOffset();
-              diagramEditorState.renderer.addClassView(
-                item.data.packageableElement,
-                dropPosition
-                  ? diagramEditorState.renderer.canvasCoordinateToModelCoordinate(
-                      diagramEditorState.renderer.eventCoordinateToCanvasCoordinate(
-                        new Point(dropPosition.x, dropPosition.y),
-                      ),
-                    )
-                  : undefined,
-              );
-            }
-          }
-        }
-      },
-      [diagramEditorState, isReadOnly],
-    );
-    const [, dropConnector] = useDrop<ElementDragSource>(
-      () => ({
-        accept: CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
-        drop: (item, monitor): void => handleDrop(item, monitor),
-      }),
-      [handleDrop],
-    );
-    dropConnector(ref);
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          'diagram-canvas diagram-editor__canvas',
-          diagramEditorState.diagramCursorClass,
-        )}
-        data-testid={DSL_DIAGRAM_TEST_ID.DIAGRAM_EDITOR}
-        tabIndex={0}
-      />
-    );
-  }),
-);
-
-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 toggleSidePanel = (): void => {
-      diagramEditorState.sidePanelDisplayState.toggle();
-      if (!diagramEditorState.sidePanelDisplayState.isOpen) {
-        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(
-                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>
-        <div className="diagram-editor__header__actions">
-          <button
-            className={clsx('diagram-editor__header__action', {
-              'diagram-editor__header__action--active':
-                diagramEditorState.sidePanelDisplayState.isOpen,
-            })}
-            tabIndex={-1}
-            onClick={toggleSidePanel}
-          >
-            <SidebarIcon className="diagram-editor__icon--sidebar" />
-          </button>
-        </div>
-      </>
-    );
-  },
-);
-
-export const DiagramEditor = observer(() => {
-  const editorStore = useEditorStore();
-  const diagramEditorState =
-    editorStore.tabManagerState.getCurrentEditorState(DiagramEditorState);
-  const diagramCanvasRef = useRef<HTMLDivElement>(null);
-  const onContextMenuClose = (): void => diagramEditorState.closeContextMenu();
-
-  useApplicationNavigationContext(
-    DSL_DIAGRAM_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DIAGRAM_EDITOR,
-  );
-
-  useCommands(diagramEditorState);
-
-  return (
-    <div className="diagram-editor">
-      <div className="diagram-editor__header">
-        {diagramEditorState.isDiagramRendererInitialized && (
-          <DiagramEditorHeader diagramEditorState={diagramEditorState} />
-        )}
-      </div>
-      <div className="diagram-editor__content">
-        {diagramEditorState.isDiagramRendererInitialized && (
-          <DiagramEditorOverlay diagramEditorState={diagramEditorState} />
-        )}
-        <ContextMenu
-          className="diagram-editor__stage"
-          content={
-            <DiagramEditorContextMenu diagramEditorState={diagramEditorState} />
-          }
-          disabled={!diagramEditorState.showContextMenu}
-          menuProps={{ elevation: 7 }}
-          onClose={onContextMenuClose}
-        >
-          {diagramEditorState.isDiagramRendererInitialized && (
-            <DiagramEditorToolPanel diagramEditorState={diagramEditorState} />
-          )}
-          <DiagramEditorDiagramCanvas
-            diagramEditorState={diagramEditorState}
-            ref={diagramCanvasRef}
-          />
-          {diagramEditorState.isDiagramRendererInitialized && (
-            <>
-              <DiagramEditorInlinePropertyEditor
-                diagramEditorState={diagramEditorState}
-              />
-              <DiagramEditorInlineClassCreator
-                diagramEditorState={diagramEditorState}
-              />
-              <DiagramEditorInlineClassRenamer
-                diagramEditorState={diagramEditorState}
-              />
-            </>
-          )}
-        </ContextMenu>
-      </div>
-    </div>
-  );
-});