@finos/legend-extension-dsl-diagram/lib/components/studio/DiagramEditor.js

Legend extension for Diagram DSL

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { useRef, useState, useEffect, useCallback, forwardRef } from 'react';
import { 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 { DIAGRAM_EDITOR_SIDE_PANEL_TAB, DiagramEditorClassViewEditorSidePanelState, DiagramEditorState, } from '../../stores/studio/DiagramEditorState.js';
import { 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 { 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, } from '@finos/legend-lego/graph-editor';
const DiagramEditorContextMenu = observer(forwardRef(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 (_jsx(MenuContent, { children: _jsx(MenuContentItem, { onClick: buildQuery, children: "Query..." }) }));
}));
const DiagramRendererHotkeyInfosModal = observer((props) => {
    const { open, onClose } = props;
    const applicationStore = useApplicationStore();
    return (_jsx(Dialog, { open: open, onClose: onClose, classes: {
            root: 'editor-modal__root-container',
            container: 'editor-modal__container',
            paper: 'editor-modal__content--scrollable',
        }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "modal--scrollable diagram-editor__hotkeys__dialog", children: [_jsx(ModalHeader, { title: "Diagram Hotkeys" }), _jsx(ModalBody, { children: _jsxs("div", { className: "diagram-editor__hotkey__groups", children: [_jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Use view tool" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "V" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Use pan tool" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "M" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Zoom" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "Z" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Recenter" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "R" }) })] }), _jsx("div", { className: "diagram-editor__hotkey__groups__divider" }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Remove selected element(s)" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "Remove" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Edit the selected element" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "E" }) })] }), _jsx("div", { className: "diagram-editor__hotkey__groups__divider" }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Use property tool" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "P" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Use inheritance tool" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "I" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Add class" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "C" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Add simple property to selected class" }), _jsxs("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: [_jsx("div", { className: "hotkey__key", children: "Alt" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "\u2193" })] })] }), _jsx("div", { className: "diagram-editor__hotkey__groups__divider" }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Toggle display for properties of selected classes" }), _jsxs("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: [_jsx("div", { className: "hotkey__key", children: "Alt" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "P" })] })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Toggle display for tagged values of selected classes" }), _jsxs("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: [_jsx("div", { className: "hotkey__key", children: "Alt" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "T" })] })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Toggle display for stereotypes of selected classes" }), _jsxs("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: [_jsx("div", { className: "hotkey__key", children: "Alt" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "S" })] })] }), _jsx("div", { className: "diagram-editor__hotkey__groups__divider" }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Eject the property" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "\u2192" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Add subtypes of the selected classes to the diagram" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "\u2193" }) })] }), _jsxs("div", { className: "diagram-editor__hotkey__group", children: [_jsx("div", { className: "diagram-editor__hotkey__annotation", children: "Add supertypes of the selected classes to the diagram" }), _jsx("div", { className: "hotkey__combination diagram-editor__hotkey__keys", children: _jsx("div", { className: "hotkey__key", children: "\u2191" }) })] })] }) })] }) }));
});
const DiagramEditorToolPanel = observer((props) => {
    const { diagramEditorState } = props;
    const renderer = diagramEditorState.renderer;
    const isReadOnly = diagramEditorState.isReadOnly;
    const showDiagramRendererHokeysModal = () => diagramEditorState.setShowHotkeyInfosModal(true);
    const hideDiagramRendererHokeysModal = () => diagramEditorState.setShowHotkeyInfosModal(false);
    const createModeSwitcher = (editMode, relationshipMode) => () => {
        if (!isReadOnly) {
            renderer.changeMode(editMode, relationshipMode);
        }
    };
    return (_jsxs("div", { className: "diagram-editor__tools", children: [_jsx("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)", children: _jsx(MousePointerIcon, { className: "diagram-editor__icon--layout" }) }), _jsx("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)", children: _jsx(MoveIcon, { className: "diagram-editor__icon--pan" }) }), _jsx("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), children: _jsx(ZoomInIcon, { className: "diagram-editor__icon--zoom-in" }) }), _jsx("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), children: _jsx(ZoomOutIcon, { className: "diagram-editor__icon--zoom-out" }) }), _jsx("div", { className: "diagram-editor__tools__divider" }), _jsx("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), children: _jsx(MinusIcon, { className: "diagram-editor__icon--property" }) }), _jsx("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), children: _jsx(TriangleIcon, { className: "diagram-editor__icon--inheritance" }) }), _jsx("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, children: _jsx(ResizeIcon, { className: "diagram-editor__icon--association" }) }), _jsx("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), children: _jsx(PlusCircleIcon, { className: "diagram-editor__icon--add-class" }) }), _jsx("div", { className: "diagram-editor__tools__divider" }), _jsx("button", { className: "diagram-editor__tool", tabIndex: -1, title: "Show Hotkeys", onClick: showDiagramRendererHokeysModal, children: _jsx(KeyboardIcon, { className: "diagram-editor__icon--hotkey-info" }) }), _jsx(DiagramRendererHotkeyInfosModal, { open: diagramEditorState.showHotkeyInfosModal, onClose: hideDiagramRendererHokeysModal })] }));
});
const DiagramEditorClassViewEditor = observer((props) => {
    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) => () => {
        classViewEditorState.setSelectedTab(tab);
    };
    const redrawOnClassChange = useCallback(() => {
        cleanUpDeadReferencesInDiagram(diagramEditorState.diagram, editorStore.graphManagerState.graph);
        diagramEditorState.renderer.render();
    }, [diagramEditorState, editorStore]);
    const toggleHideProperties = () => {
        if (isReadOnly) {
            return;
        }
        classView_setHideProperties(classView, !classView.hideProperties);
        diagramEditorState.renderer.render();
    };
    const toggleHideTaggedValues = () => {
        if (isReadOnly) {
            return;
        }
        classView_setHideTaggedValues(classView, !classView.hideTaggedValues);
        diagramEditorState.renderer.render();
    };
    const toggleHideStereotypes = () => {
        if (isReadOnly) {
            return;
        }
        classView_setHideStereotypes(classView, !classView.hideStereotypes);
        diagramEditorState.renderer.render();
    };
    return (_jsxs("div", { className: "diagram-editor__class-view-editor", children: [_jsx("div", { className: "diagram-editor__class-view-editor__header", children: _jsx("div", { className: "diagram-editor__class-view-editor__header__tabs", children: tabs.map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('diagram-editor__class-view-editor__header__tab', {
                            'diagram-editor__class-view-editor__header__tab--active': tab === selectedTab,
                        }), children: prettyCONSTName(tab) }, tab))) }) }), _jsxs("div", { className: "diagram-editor__class-view-editor__content", children: [DIAGRAM_EDITOR_SIDE_PANEL_TAB.ELEMENT === selectedTab && (_jsx(ClassFormEditor, { _class: classViewEditorState.classEditorState.class, editorState: classViewEditorState.classEditorState, onHashChange: redrawOnClassChange })), DIAGRAM_EDITOR_SIDE_PANEL_TAB.VIEW === selectedTab && (_jsx("div", { className: "panel__content__form diagram-editor__class-view-editor__content__form", children: _jsxs("div", { className: "panel__content__form__section", children: [_jsxs("div", { className: clsx('panel__content__form__section__toggler'), onClick: toggleHideProperties, children: [_jsx("button", { className: clsx('panel__content__form__section__toggler__btn', {
                                                'panel__content__form__section__toggler__btn--toggled': classView.hideProperties,
                                            }), disabled: isReadOnly, children: classView.hideProperties ? (_jsx(CheckSquareIcon, {})) : (_jsx(SquareIcon, {})) }), _jsx("div", { className: "panel__content__form__section__toggler__prompt", children: "Specifies if properties should be hidden" })] }), _jsxs("div", { className: clsx('panel__content__form__section__toggler'), onClick: toggleHideTaggedValues, children: [_jsx("button", { className: clsx('panel__content__form__section__toggler__btn', {
                                                'panel__content__form__section__toggler__btn--toggled': classView.hideTaggedValues,
                                            }), disabled: isReadOnly, children: classView.hideTaggedValues ? (_jsx(CheckSquareIcon, {})) : (_jsx(SquareIcon, {})) }), _jsx("div", { className: "panel__content__form__section__toggler__prompt", children: "Specifies if tagged values should be hidden" })] }), _jsxs("div", { className: clsx('panel__content__form__section__toggler'), onClick: toggleHideStereotypes, children: [_jsx("button", { className: clsx('panel__content__form__section__toggler__btn', {
                                                'panel__content__form__section__toggler__btn--toggled': classView.hideStereotypes,
                                            }), disabled: isReadOnly, children: classView.hideStereotypes ? (_jsx(CheckSquareIcon, {})) : (_jsx(SquareIcon, {})) }), _jsx("div", { className: "panel__content__form__section__toggler__prompt", children: "Specifies if stereotypes should be hidden" })] })] }) }))] })] }));
});
const DiagramEditorOverlay = observer((props) => {
    const { diagramEditorState } = props;
    const sidePanelState = diagramEditorState.sidePanelState;
    const resizeSidePanel = (handleProps) => diagramEditorState.sidePanelDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
        .width);
    // layout
    const sidePanelCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(diagramEditorState.sidePanelDisplayState.size === 0, {
        classes: ['diagram-editor__overlay__panel'],
        onStopResize: resizeSidePanel,
        size: diagramEditorState.sidePanelDisplayState.size,
    });
    return (_jsxs(ResizablePanelGroup, { className: "diagram-editor__overlay", orientation: "vertical", children: [_jsx(ResizablePanel, { ...sidePanelCollapsiblePanelGroupProps.remainingPanel, minSize: 300, children: _jsx("div", { className: "diagram-editor__view-finder" }) }), _jsx(ResizablePanelSplitter, { className: "diagram-editor__overlay__panel-resizer" }), _jsx(ResizablePanel, { ...sidePanelCollapsiblePanelGroupProps.collapsiblePanel, direction: -1, children: _jsxs("div", { className: "panel diagram-editor__side-panel", children: [sidePanelState instanceof
                            DiagramEditorClassViewEditorSidePanelState && (_jsx(DiagramEditorClassViewEditor, { classViewEditorState: sidePanelState })), !sidePanelState && (_jsx(BlankPanelContent, { children: "No element selected" }))] }) })] }));
});
const DiagramEditorInlineClassRenamerContent = observer((props) => {
    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) => {
        event.preventDefault();
        if (canRenameClass) {
            diagramEditorState.setInlineClassRenamerState(undefined);
            flowResult(editorStore.graphEditorMode.renameElement(_class, newClassPath)).catch(applicationStore.alertUnhandledError);
        }
    };
    const pathInputRef = useRef(null);
    const changePath = (event) => setName(event.target.value);
    useEffect(() => {
        pathInputRef.current?.focus();
    }, [inlineClassRenamerState]);
    return (_jsxs("form", { className: "diagram-editor__inline-class-creator", children: [_jsxs("div", { className: "input-group", children: [_jsx("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 && (_jsx("div", { className: "input-group__error-message", children: classCreationValidationErrorMessage }))] }), _jsx("button", { type: "submit", className: "diagram-editor__inline-class-creator__close-btn", onClick: close })] }));
});
const DiagramEditorInlineClassRenamer = observer((props) => {
    const { diagramEditorState } = props;
    const closeEditor = () => {
        diagramEditorState.setInlineClassRenamerState(undefined);
    };
    const inlineClassRenamerState = diagramEditorState.inlineClassRenamerState;
    const anchorPositionPoint = inlineClassRenamerState
        ? diagramEditorState.renderer.canvasCoordinateToEventCoordinate(diagramEditorState.renderer.modelCoordinateToCanvasCoordinate(inlineClassRenamerState.point))
        : new Point(0, 0);
    return (_jsx(BasePopover, { onClose: closeEditor, anchorPosition: {
            left: anchorPositionPoint.x,
            top: anchorPositionPoint.y,
        }, anchorReference: "anchorPosition", open: Boolean(inlineClassRenamerState), BackdropProps: {
            invisible: true,
        }, elevation: 0, marginThreshold: 0, disableRestoreFocus: true, children: _jsx("div", { className: "diagram-editor__inline-class-creator__container", children: inlineClassRenamerState && (_jsx(DiagramEditorInlineClassRenamerContent, { inlineClassRenamerState: inlineClassRenamerState })) }) }));
});
const DiagramEditorInlineClassCreatorContent = observer((props) => {
    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) => {
        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) => {
        createClass(event).catch(applicationStore.alertUnhandledError);
    };
    const pathInputRef = useRef(null);
    const changePath = (event) => setPath(event.target.value);
    useEffect(() => {
        pathInputRef.current?.focus();
    }, [inlineClassCreatorState]);
    return (_jsxs("form", { className: "diagram-editor__inline-class-creator", children: [_jsxs("div", { className: "input-group", children: [_jsx("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 && (_jsx("div", { className: "input-group__error-message", children: classCreationValidationErrorMessage }))] }), _jsx("button", { type: "submit", className: "diagram-editor__inline-class-creator__close-btn", onClick: close })] }));
});
const DiagramEditorInlineClassCreator = observer((props) => {
    const { diagramEditorState } = props;
    const closeEditor = () => {
        diagramEditorState.setInlineClassCreatorState(undefined);
    };
    const inlineClassCreatorState = diagramEditorState.inlineClassCreatorState;
    const anchorPositionPoint = inlineClassCreatorState
        ? diagramEditorState.renderer.canvasCoordinateToEventCoordinate(diagramEditorState.renderer.modelCoordinateToCanvasCoordinate(inlineClassCreatorState.point))
        : new Point(0, 0);
    return (_jsx(BasePopover, { onClose: closeEditor, anchorPosition: {
            left: anchorPositionPoint.x,
            top: anchorPositionPoint.y,
        }, anchorReference: "anchorPosition", open: Boolean(inlineClassCreatorState), BackdropProps: {
            invisible: true,
        }, elevation: 0, marginThreshold: 0, disableRestoreFocus: true, children: _jsx("div", { className: "diagram-editor__inline-class-creator__container", children: inlineClassCreatorState && (_jsx(DiagramEditorInlineClassCreatorContent, { inlineClassCreatorState: inlineClassCreatorState })) }) }));
});
const DiagramEditorInlinePropertyMultiplicityEditor = observer((props) => {
    const { value, updateValue, isReadOnly } = props;
    const [lowerBound, setLowerBound] = useState(value.lowerBound);
    const [upperBound, setUpperBound] = useState(value.upperBound ?? MULTIPLICITY_INFINITE);
    const editorStore = useEditorStore();
    const updateMultiplicity = (lower, upper) => {
        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 = (event) => {
        setLowerBound(event.target.value);
        updateMultiplicity(event.target.value, upperBound);
    };
    const changeUpperBound = (event) => {
        setUpperBound(event.target.value);
        updateMultiplicity(lowerBound, event.target.value);
    };
    return (_jsxs("div", { className: "diagram-editor__inline-property-editor__multiplicity-editor", children: [_jsx("input", { className: "diagram-editor__inline-property-editor__multiplicity-editor__bound input--dark", disabled: isReadOnly, spellCheck: false, value: lowerBound, onChange: changeLowerBound }), _jsx("div", { className: "diagram-editor__inline-property-editor__multiplicity-editor__range", children: ".." }), _jsx("input", { className: "diagram-editor__inline-property-editor__multiplicity-editor__bound input--dark", disabled: isReadOnly, spellCheck: false, value: upperBound, onChange: changeUpperBound })] }));
});
const DiagramEditorInlinePropertyEditorContent = observer((props) => {
    const { inlinePropertyEditorState } = props;
    const editorStore = useEditorStore();
    const applicationStore = editorStore.applicationStore;
    const diagramEditorState = inlinePropertyEditorState.diagramEditorState;
    const isReadOnly = diagramEditorState.isReadOnly;
    const propertyNameInputRef = useRef(null);
    const property = inlinePropertyEditorState.property.value;
    const close = (event) => {
        event.preventDefault();
        diagramEditorState.setInlinePropertyEditorState(undefined);
    };
    const changePropertyName = (event) => {
        if (property instanceof DerivedProperty || property instanceof Property) {
            property_setName(property, event.target.value);
            diagramEditorState.renderer.render();
        }
    };
    const changeMultiplicity = (val) => {
        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) => option.data.value.path,
    });
    const selectedPropertyType = {
        value: currentPropertyType,
        label: currentPropertyType.name,
    };
    const changePropertyType = (val) => {
        if (property instanceof Property || property instanceof DerivedProperty) {
            property_setGenericType(property, new GenericType(val.value));
        }
    };
    useEffect(() => {
        propertyNameInputRef.current?.focus();
    }, [inlinePropertyEditorState]);
    return (_jsxs("form", { className: clsx('diagram-editor__inline-property-editor', {
            'diagram-editor__inline-property-editor--with-type': !inlinePropertyEditorState.isEditingPropertyView,
        }), children: [_jsx("input", { className: "diagram-editor__inline-property-editor__name input--dark", ref: propertyNameInputRef, disabled: isReadOnly, value: property.name, onChange: changePropertyName }), !inlinePropertyEditorState.isEditingPropertyView && (_jsx(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 })), _jsx(DiagramEditorInlinePropertyMultiplicityEditor, { isReadOnly: isReadOnly, value: property.multiplicity, updateValue: changeMultiplicity }), _jsx("button", { type: "submit", className: "diagram-editor__inline-property-editor__close-btn", onClick: close })] }));
});
const DiagramEditorInlinePropertyEditor = observer((props) => {
    const { diagramEditorState } = props;
    const closeEditor = () => {
        diagramEditorState.setInlinePropertyEditorState(undefined);
    };
    const inlinePropertyEditorState = diagramEditorState.inlinePropertyEditorState;
    const anchorPositionPoint = inlinePropertyEditorState
        ? diagramEditorState.renderer.canvasCoordinateToEventCoordinate(diagramEditorState.renderer.modelCoordinateToCanvasCoordinate(inlinePropertyEditorState.point))
        : new Point(0, 0);
    return (_jsx(BasePopover, { onClose: closeEditor, anchorPosition: {
            left: anchorPositionPoint.x,
            top: anchorPositionPoint.y,
        }, anchorReference: "anchorPosition", open: Boolean(inlinePropertyEditorState), BackdropProps: {
            invisible: true,
        }, elevation: 0, marginThreshold: 0, disableRestoreFocus: true, children: _jsx("div", { className: "diagram-editor__inline-property-editor__container", children: inlinePropertyEditorState && (_jsx(DiagramEditorInlinePropertyEditorContent, { inlinePropertyEditorState: inlinePropertyEditorState })) }) }));
});
const DiagramEditorDiagramCanvas = observer(forwardRef(function DiagramEditorDiagramCanvas(props, _ref) {
    const { diagramEditorState } = props;
    const ref = _ref;
    const isReadOnly = diagramEditorState.isReadOnly;
    const { width, height } = useResizeDetector({
        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, monitor) => {
        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(() => ({
        accept: CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
        drop: (item, monitor) => handleDrop(item, monitor),
    }), [handleDrop]);
    dropConnector(ref);
    return (_jsx("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) => {
    const { diagramEditorState } = props;
    const createCenterZoomer = (zoomLevel) => () => {
        diagramEditorState.renderer.zoomCenter(zoomLevel / 100);
    };
    const zoomToFit = () => diagramEditorState.renderer.zoomToFit();
    const toggleSidePanel = () => {
        diagramEditorState.sidePanelDisplayState.toggle();
        if (!diagramEditorState.sidePanelDisplayState.isOpen) {
            diagramEditorState.setSidePanelState(undefined);
        }
    };
    const isAlignerDisabled = diagramEditorState.renderer.selectedClasses.length < 2;
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "diagram-editor__header__group", children: [_jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Align left", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.ALIGN_LEFT), children: _jsx(AlignStartIcon, { className: "diagram-editor__icon--aligner" }) }), _jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Align center", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.ALIGN_CENTER), children: _jsx(AlignCenterIcon, { className: "diagram-editor__icon--aligner" }) }), _jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Align right", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.ALIGN_RIGHT), children: _jsx(AlignEndIcon, { className: "diagram-editor__icon--aligner" }) })] }), _jsx("div", { className: "diagram-editor__header__group__separator" }), _jsxs("div", { className: "diagram-editor__header__group", children: [_jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Align top", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.ALIGN_TOP), children: _jsx(AlignTopIcon, { className: "diagram-editor__icon--aligner" }) }), _jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Align middle", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.ALIGN_MIDDLE), children: _jsx(AlignMiddleIcon, { className: "diagram-editor__icon--aligner" }) }), _jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Align bottom", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.ALIGN_BOTTOM), children: _jsx(AlignBottomIcon, { className: "diagram-editor__icon--aligner" }) })] }), _jsx("div", { className: "diagram-editor__header__group__separator" }), _jsxs("div", { className: "diagram-editor__header__group", children: [_jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Space horizontally", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.SPACE_HORIZONTALLY), children: _jsx(DistributeHorizontalIcon, { className: "diagram-editor__icon--aligner" }) }), _jsx("button", { className: "diagram-editor__header__action diagram-editor__header__group__action", title: "Space vertically", disabled: isAlignerDisabled, tabIndex: -1, onClick: () => diagramEditorState.renderer.align(DIAGRAM_ALIGNER_OPERATOR.SPACE_VERTICALLY), children: _jsx(DistributeVerticalIcon, { className: "diagram-editor__icon--aligner" }) })] }), _jsxs(ControlledDropdownMenu, { className: "diagram-editor__header__dropdown", title: "Zoom...", content: _jsxs(MenuContent, { children: [_jsx(MenuContentItem, { className: "diagram-editor__header__zoomer__dropdown__menu__item", onClick: zoomToFit, children: "Fit" }), _jsx(MenuContentDivider, {}), DIAGRAM_ZOOM_LEVELS.map((zoomLevel) => (_jsxs(MenuContentItem, { className: "diagram-editor__header__zoomer__dropdown__menu__item", onClick: createCenterZoomer(zoomLevel), children: [zoomLevel, "%"] }, zoomLevel)))] }), menuProps: {
                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
                    transformOrigin: { vertical: 'top', horizontal: 'right' },
                    elevation: 7,
                }, children: [_jsxs("div", { className: "diagram-editor__header__dropdown__label diagram-editor__header__zoomer__dropdown__label", children: [Math.round(diagramEditorState.renderer.zoom * 100), "%"] }), _jsx("div", { className: "diagram-editor__header__dropdown__trigger diagram-editor__header__zoomer__dropdown__trigger", children: _jsx(CaretDownIcon, {}) })] }), _jsx("div", { className: "diagram-editor__header__actions", children: _jsx("button", { className: clsx('diagram-editor__header__action', {
                        'diagram-editor__header__action--active': diagramEditorState.sidePanelDisplayState.isOpen,
                    }), tabIndex: -1, onClick: toggleSidePanel, children: _jsx(SidebarIcon, { className: "diagram-editor__icon--sidebar" }) }) })] }));
});
export const DiagramEditor = observer(() => {
    const editorStore = useEditorStore();
    const diagramEditorState = editorStore.tabManagerState.getCurrentEditorState(DiagramEditorState);
    const diagramCanvasRef = useRef(null);
    const onContextMenuClose = () => diagramEditorState.closeContextMenu();
    useApplicationNavigationContext(DSL_DIAGRAM_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DIAGRAM_EDITOR);
    useCommands(diagramEditorState);
    return (_jsxs("div", { className: "diagram-editor", children: [_jsx("div", { className: "diagram-editor__header", children: diagramEditorState.isDiagramRendererInitialized && (_jsx(DiagramEditorHeader, { diagramEditorState: diagramEditorState })) }), _jsxs("div", { className: "diagram-editor__content", children: [diagramEditorState.isDiagramRendererInitialized && (_jsx(DiagramEditorOverlay, { diagramEditorState: diagramEditorState })), _jsxs(ContextMenu, { className: "diagram-editor__stage", content: _jsx(DiagramEditorContextMenu, { diagramEditorState: diagramEditorState }), disabled: !diagramEditorState.showContextMenu, menuProps: { elevation: 7 }, onClose: onContextMenuClose, children: [diagramEditorState.isDiagramRendererInitialized && (_jsx(DiagramEditorToolPanel, { diagramEditorState: diagramEditorState })), _jsx(DiagramEditorDiagramCanvas, { diagramEditorState: diagramEditorState, ref: diagramCanvasRef }), diagramEditorState.isDiagramRendererInitialized && (_jsxs(_Fragment, { children: [_jsx(DiagramEditorInlinePropertyEditor, { diagramEditorState: diagramEditorState }), _jsx(DiagramEditorInlineClassCreator, { diagramEditorState: diagramEditorState }), _jsx(DiagramEditorInlineClassRenamer, { diagramEditorState: diagramEditorState })] }))] })] })] }));
});
//# sourceMappingURL=DiagramEditor.js.map