@finos/legend-application-pure-ide/lib/components/PureIDE.js

Legend Pure IDE application core

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { PanelGroup } from './panel-group/PanelGroup.js';
import { SideBar } from './side-bar/SideBar.js';
import { ActivityBar } from './ActivityBar.js';
import { withEditorStore, usePureIDEStore } from './PureIDEStoreProvider.js';
import { StatusBar } from './StatusBar.js';
import { EditorGroup } from './editor-group/EditorGroup.js';
import { FileSearchCommand } from './command-center/FileSearchCommand.js';
import { flowResult } from 'mobx';
import { useApplicationStore, useCommands } from '@finos/legend-application';
import { useResizeDetector, ResizablePanelSplitterLine, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, getCollapsiblePanelGroupProps, } from '@finos/legend-art';
import { LEGEND_PURE_IDE_ROUTE_PATTERN_TOKEN } from '../__lib__/LegendPureIDENavigation.js';
import { SelectPCTAdapterCommand } from './command-center/SelectPCTAdapterCommand.js';
export const Editor = withEditorStore(observer(() => {
    const ideStore = usePureIDEStore();
    const applicationStore = useApplicationStore();
    // layout
    const { ref, width, height } = useResizeDetector();
    // These create snapping effect on panel resizing
    const resizeSideBar = (handleProps) => ideStore.sideBarDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
        .width);
    const resizePanel = (handleProps) => ideStore.panelGroupDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
        .height);
    const collapsibleSideBarGroupProps = getCollapsiblePanelGroupProps(ideStore.sideBarDisplayState.size === 0, {
        onStopResize: resizeSideBar,
        size: ideStore.sideBarDisplayState.size,
    });
    const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(ideStore.panelGroupDisplayState.size === 0, {
        onStopResize: resizePanel,
        size: ideStore.panelGroupDisplayState.size,
    });
    const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(ideStore.panelGroupDisplayState.isMaximized);
    useEffect(() => {
        if (ref.current) {
            ideStore.panelGroupDisplayState.setMaxSize(ref.current.offsetHeight);
        }
    }, [ideStore, ref, height, width]);
    // Cleanup the editor
    useEffect(() => () => {
        ideStore.cleanUp();
    }, [ideStore]);
    // Initialize the app
    useEffect(() => {
        flowResult(ideStore.initialize(false, undefined, applicationStore.navigationService.navigator.getCurrentLocationParameterValue(LEGEND_PURE_IDE_ROUTE_PATTERN_TOKEN.MODE), applicationStore.navigationService.navigator.getCurrentLocationParameterValue(LEGEND_PURE_IDE_ROUTE_PATTERN_TOKEN.FAST_COMPILE))).catch(applicationStore.alertUnhandledError);
    }, [ideStore, applicationStore]);
    useEffect(() => {
        applicationStore.navigationService.navigator.blockNavigation([() => true], undefined, () => applicationStore.notificationService.notifyWarning(`Navigation from the editor is blocked`));
        return () => {
            applicationStore.navigationService.navigator.unblockNavigation();
        };
    }, [ideStore, applicationStore]);
    useCommands(ideStore);
    return (_jsxs("div", { className: "ide", children: [_jsxs("div", { className: "ide__body", children: [_jsx(ActivityBar, {}), _jsx("div", { className: "ide__content-container", ref: ref, children: _jsx("div", { className: "ide__content", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { ...collapsibleSideBarGroupProps.collapsiblePanel, direction: 1, children: _jsx(SideBar, {}) }), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { ...collapsibleSideBarGroupProps.remainingPanel, minSize: 300, children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { ...maximizedCollapsiblePanelGroupProps.collapsiblePanel, ...(ideStore.panelGroupDisplayState.size === 0
                                                        ? collapsiblePanelGroupProps.remainingPanel
                                                        : {}), children: _jsx(EditorGroup, {}) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: ideStore.panelGroupDisplayState.isMaximized
                                                            ? 'transparent'
                                                            : 'var(--color-dark-grey-250)' }) }), _jsx(ResizablePanel, { ...collapsiblePanelGroupProps.collapsiblePanel, ...(ideStore.panelGroupDisplayState.isMaximized
                                                        ? maximizedCollapsiblePanelGroupProps.remainingPanel
                                                        : {}), direction: -1, children: _jsx(PanelGroup, {}) })] }) })] }) }) })] }), _jsx(StatusBar, {}), _jsx(FileSearchCommand, {}), _jsx(SelectPCTAdapterCommand, {})] }));
}));
//# sourceMappingURL=PureIDE.js.map