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

package/lib/components/Diagram/DiagramEditor.d.ts

@@ -0,0 +1,9 @@
+import '../../../style/index.scss';
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+export declare const DiagramEditor: ((props: {
+    diagramId: string;
+    diagramEditorState: DiagramEditorState;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=DiagramEditor.d.ts.map

package/lib/components/Diagram/DiagramEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramEditor.tsx"],"names":[],"mappings":"AAmBA,OAAO,2BAA2B,CAAC;AAOnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAM7E,eAAO,MAAM,aAAa,WAChB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,kBAAkB,EAAE,kBAAkB,CAAA;CAAE;;CA+EtE,CAAC"}

package/lib/components/Diagram/DiagramEditor.js

@@ -0,0 +1,61 @@
+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 { getDiagram } from '@finos/legend-extension-dsl-diagram';
+import { useRef, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import '../../../style/index.scss';
+import { postMessage } from '../../utils/VsCodeUtils.js';
+import { GET_PROJECT_ENTITIES, GET_PROJECT_ENTITIES_RESPONSE, } from '../../utils/Const.js';
+import { getPureGraph } from '../../graph-manager/index.js';
+import { LegendStyleProvider } from '@finos/legend-art';
+import { DiagramEditorHeader } from './DiagramHeader.js';
+import { DiagramEditorDiagramCanvas } from './DiagramEditorDiagramCanvas.js';
+import { DiagramEditorToolPanel } from './DiagramEditorToolPanel.js';
+export const DiagramEditor = observer((props) => {
+    const diagramCanvasRef = useRef(null);
+    const { diagramId, diagramEditorState } = props;
+    const [entities, setEntities] = useState([]);
+    const [error, setError] = useState();
+    useEffect(() => {
+        postMessage({
+            command: GET_PROJECT_ENTITIES,
+        });
+    }, [diagramId]);
+    window.addEventListener('message', (event) => {
+        const message = event.data;
+        if (message.command === GET_PROJECT_ENTITIES_RESPONSE) {
+            const es = message.result;
+            setEntities(es);
+        }
+    });
+    useEffect(() => {
+        if (entities.length && diagramId) {
+            getPureGraph(entities, [])
+                .then((pureModel) => {
+                const diagram = getDiagram(diagramId, pureModel);
+                diagramEditorState.setDiagram(diagram);
+                diagramEditorState.setGraph(pureModel);
+                setError(null);
+            })
+                .catch((e) => {
+                setError(e.message);
+            });
+        }
+    }, [entities, diagramId, diagramEditorState]);
+    return (_jsx(LegendStyleProvider, { children: _jsx("div", { className: "diagram-editor", children: error ? (_jsxs("div", { className: "diagram-editor__error", children: [_jsx("span", { children: "Something went wrong. Diagram cannot be created." }), _jsx("span", { className: "diagram-editor__error__details", title: `${error}`, children: "Error Details." })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "diagram-editor__header", children: diagramEditorState.isDiagramRendererInitialized && (_jsx(DiagramEditorHeader, { diagramEditorState: diagramEditorState })) }), _jsx("div", { className: "diagram-editor__content", children: _jsxs("div", { className: "diagram-editor__stage", children: [diagramEditorState.isDiagramRendererInitialized && (_jsx(DiagramEditorToolPanel, { diagramEditorState: diagramEditorState })), _jsx(DiagramEditorDiagramCanvas, { diagramEditorState: diagramEditorState, ref: diagramCanvasRef })] }) })] })) }) }));
+});
+//# sourceMappingURL=DiagramEditor.js.map

package/lib/components/Diagram/DiagramEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditor.js","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramEditor.tsx"],"names":[],"mappings":"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"}

package/lib/components/Diagram/DiagramEditorDiagramCanvas.d.ts

@@ -0,0 +1,5 @@
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+export declare const DiagramEditorDiagramCanvas: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<{
+    diagramEditorState: DiagramEditorState;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+//# sourceMappingURL=DiagramEditorDiagramCanvas.d.ts.map

package/lib/components/Diagram/DiagramEditorDiagramCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditorDiagramCanvas.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramEditorDiagramCanvas.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAG7E,eAAO,MAAM,0BAA0B;wBAIb,kBAAkB;2GA4G3C,CAAC"}

package/lib/components/Diagram/DiagramEditorDiagramCanvas.js

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

package/lib/components/Diagram/DiagramEditorDiagramCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditorDiagramCanvas.js","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramEditorDiagramCanvas.tsx"],"names":[],"mappings":"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"}

package/lib/components/Diagram/DiagramEditorToolPanel.d.ts

@@ -0,0 +1,7 @@
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+export declare const DiagramEditorToolPanel: ((props: {
+    diagramEditorState: DiagramEditorState;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=DiagramEditorToolPanel.d.ts.map

package/lib/components/Diagram/DiagramEditorToolPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditorToolPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramEditorToolPanel.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,eAAO,MAAM,sBAAsB,WACzB;IAAE,kBAAkB,EAAE,kBAAkB,CAAA;CAAE;;CA0EnD,CAAC"}

package/lib/components/Diagram/DiagramEditorToolPanel.js

@@ -0,0 +1,37 @@
+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 { clsx, MousePointerIcon, MoveIcon, ZoomInIcon, ZoomOutIcon, } from '@finos/legend-art';
+import { DIAGRAM_INTERACTION_MODE, DIAGRAM_RELATIONSHIP_EDIT_MODE, } from '@finos/legend-extension-dsl-diagram';
+import { observer } from 'mobx-react-lite';
+export const DiagramEditorToolPanel = observer((props) => {
+    const { diagramEditorState } = props;
+    const renderer = diagramEditorState.renderer;
+    //const isReadOnly = diagramEditorState.isReadOnly;
+    const createModeSwitcher = (editMode, relationshipMode) => () => {
+        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" }) })] }));
+});
+//# sourceMappingURL=DiagramEditorToolPanel.js.map

package/lib/components/Diagram/DiagramEditorToolPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditorToolPanel.js","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramEditorToolPanel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,wBAAwB,EACxB,8BAA8B,GAC/B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAC5C,CAAC,KAAiD,EAAE,EAAE;IACpD,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;IAC7C,mDAAmD;IACnD,MAAM,kBAAkB,GACtB,CACE,QAAkC,EAClC,gBAAgD,EAClC,EAAE,CAClB,GAAS,EAAE;QACT,QAAQ,CAAC,UAAU,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAClD,CAAC,CAAC;IAEJ,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,iBACE,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE;oBACtC,8BAA8B,EAC5B,QAAQ,CAAC,eAAe,KAAK,wBAAwB,CAAC,MAAM;iBAC/D,CAAC,EACF,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,kBAAkB,CACzB,wBAAwB,CAAC,MAAM,EAC/B,8BAA8B,CAAC,IAAI,CACpC,EACD,KAAK,EAAC,eAAe,YAErB,KAAC,gBAAgB,IAAC,SAAS,EAAC,8BAA8B,GAAG,GACtD,EACT,iBACE,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE;oBACtC,8BAA8B,EAC5B,QAAQ,CAAC,eAAe,KAAK,wBAAwB,CAAC,GAAG;iBAC5D,CAAC,EACF,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,kBAAkB,CACzB,wBAAwB,CAAC,GAAG,EAC5B,8BAA8B,CAAC,IAAI,CACpC,EACD,KAAK,EAAC,cAAc,YAEpB,KAAC,QAAQ,IAAC,SAAS,EAAC,2BAA2B,GAAG,GAC3C,EACT,iBACE,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE;oBACtC,8BAA8B,EAC5B,QAAQ,CAAC,eAAe,KAAK,wBAAwB,CAAC,OAAO;iBAChE,CAAC,EACF,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,kBAAkB,CACzB,wBAAwB,CAAC,OAAO,EAChC,8BAA8B,CAAC,IAAI,CACpC,YAED,KAAC,UAAU,IAAC,SAAS,EAAC,+BAA+B,GAAG,GACjD,EACT,iBACE,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE;oBACtC,8BAA8B,EAC5B,QAAQ,CAAC,eAAe,KAAK,wBAAwB,CAAC,QAAQ;iBACjE,CAAC,EACF,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,kBAAkB,CACzB,wBAAwB,CAAC,QAAQ,EACjC,8BAA8B,CAAC,IAAI,CACpC,YAED,KAAC,WAAW,IAAC,SAAS,EAAC,gCAAgC,GAAG,GACnD,IACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/components/Diagram/DiagramHeader.d.ts

@@ -0,0 +1,7 @@
+import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
+export declare const DiagramEditorHeader: ((props: {
+    diagramEditorState: DiagramEditorState;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=DiagramHeader.d.ts.map

package/lib/components/Diagram/DiagramHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramHeader.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAI7E,eAAO,MAAM,mBAAmB,WACtB;IAAE,kBAAkB,EAAE,kBAAkB,CAAA;CAAE;;CAuLnD,CAAC"}

package/lib/components/Diagram/DiagramHeader.js

@@ -0,0 +1,39 @@
+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 { DIAGRAM_ALIGNER_OPERATOR, DIAGRAM_ZOOM_LEVELS, V1_diagramModelSchema, V1_transformDiagram, } from '@finos/legend-extension-dsl-diagram';
+import { observer } from 'mobx-react-lite';
+import { serialize } from 'serializr';
+import { WRITE_ENTITY } from '../../utils/Const.js';
+import { AlignBottomIcon, AlignCenterIcon, AlignEndIcon, AlignMiddleIcon, AlignStartIcon, AlignTopIcon, CaretDownIcon, ControlledDropdownMenu, DistributeHorizontalIcon, DistributeVerticalIcon, MenuContent, MenuContentDivider, MenuContentItem, SaveIcon, } from '@finos/legend-art';
+import { postMessage } from '../../utils/VsCodeUtils.js';
+export const DiagramEditorHeader = observer((props) => {
+    const { diagramEditorState } = props;
+    const createCenterZoomer = (zoomLevel) => () => {
+        diagramEditorState.renderer.zoomCenter(zoomLevel / 100);
+    };
+    const zoomToFit = () => diagramEditorState.renderer.zoomToFit();
+    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: "Save", tabIndex: -1, onClick: () => postMessage({
+                            command: WRITE_ENTITY,
+                            msg: serialize(V1_diagramModelSchema, V1_transformDiagram(diagramEditorState._renderer?.diagram)),
+                        }), children: _jsx(SaveIcon, { className: "diagram-editor__icon--aligner" }) }), _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, {}) })] })] }));
+});
+//# sourceMappingURL=DiagramHeader.js.map

package/lib/components/Diagram/DiagramHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramHeader.js","sourceRoot":"","sources":["../../../src/components/Diagram/DiagramHeader.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './components/DiagramRenderer.js';
+export * from './components/Diagram/DiagramEditor.js';
 export * from './graph-manager/index.js';
+export * from './stores/DiagramEditorState.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC"}

package/lib/index.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './components/DiagramRenderer.js';
+export * from './components/Diagram/DiagramEditor.js';
 export * from './graph-manager/index.js';
+export * from './stores/DiagramEditorState.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC"}

package/lib/stores/DiagramEditorState.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type Diagram, type Point } from '@finos/legend-extension-dsl-diagram/graph';
+import { type PureModel } from '@finos/legend-graph';
+import { type GeneratorFn } from '@finos/legend-shared';
+import { type DiagramRenderer } from '@finos/legend-extension-dsl-diagram/application';
+export declare class DiagramEditorState {
+    _renderer?: DiagramRenderer | undefined;
+    diagramId: string;
+    diagram?: Diagram;
+    graph?: PureModel;
+    constructor(diagramId: string);
+    get renderer(): DiagramRenderer;
+    get isDiagramRendererInitialized(): boolean;
+    get diagramCursorClass(): string;
+    setupRenderer(): void;
+    setRenderer(val: DiagramRenderer): void;
+    setDiagram(val: Diagram): void;
+    setGraph(val: PureModel): void;
+    addClassView(path: string, position: Point | undefined): GeneratorFn<void>;
+}
+//# sourceMappingURL=DiagramEditorState.d.ts.map

package/lib/stores/DiagramEditorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditorState.d.ts","sourceRoot":"","sources":["../../src/stores/DiagramEditorState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,KAAK,EACX,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,KAAK,WAAW,EAAwB,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,iDAAiD,CAAC;AAEzD,qBAAa,kBAAkB;IAC7B,SAAS,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;gBAEN,SAAS,EAAE,MAAM;IAY7B,IAAI,QAAQ,IAAI,eAAe,CAK9B;IAED,IAAI,4BAA4B,IAAI,OAAO,CAE1C;IAMD,IAAI,kBAAkB,IAAI,MAAM,CAmC/B;IAED,aAAa,IAAI,IAAI;IAIrB,WAAW,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI;IAIvC,UAAU,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI;IAI9B,QAAQ,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI;IAI7B,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC;CAO5E"}

package/lib/stores/DiagramEditorState.js

@@ -0,0 +1,102 @@
+/**
+ * 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 {} from '@finos/legend-extension-dsl-diagram/graph';
+import {} from '@finos/legend-graph';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { action, computed, flow, makeObservable, observable } from 'mobx';
+import { DIAGRAM_INTERACTION_MODE, } from '@finos/legend-extension-dsl-diagram/application';
+export class DiagramEditorState {
+    _renderer;
+    diagramId;
+    diagram;
+    graph;
+    constructor(diagramId) {
+        makeObservable(this, {
+            _renderer: observable,
+            diagram: observable,
+            diagramCursorClass: computed,
+            addClassView: flow,
+            setRenderer: action,
+        });
+        this.diagramId = diagramId;
+    }
+    get renderer() {
+        return guaranteeNonNullable(this._renderer, `Diagram renderer must be initialized (this is likely caused by calling this method at the wrong place)`);
+    }
+    get isDiagramRendererInitialized() {
+        return Boolean(this._renderer);
+    }
+    // NOTE: we have tried to use React to control the cursor and
+    // could not overcome the jank/lag problem, so we settle with CSS-based approach
+    // See https://css-tricks.com/using-css-cursors/
+    // See https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+    get diagramCursorClass() {
+        if (!this.isDiagramRendererInitialized) {
+            return '';
+        }
+        if (this.renderer.middleClick || this.renderer.rightClick) {
+            return 'diagram-editor__cursor--grabbing';
+        }
+        switch (this.renderer.interactionMode) {
+            case DIAGRAM_INTERACTION_MODE.PAN: {
+                return this.renderer.leftClick
+                    ? 'diagram-editor__cursor--grabbing'
+                    : 'diagram-editor__cursor--grab';
+            }
+            case DIAGRAM_INTERACTION_MODE.ZOOM_IN: {
+                return 'diagram-editor__cursor--zoom-in';
+            }
+            case DIAGRAM_INTERACTION_MODE.ZOOM_OUT: {
+                return 'diagram-editor__cursor--zoom-out';
+            }
+            case DIAGRAM_INTERACTION_MODE.LAYOUT: {
+                if (this.renderer.selectionStart) {
+                    return 'diagram-editor__cursor--crosshair';
+                }
+                else if (this.renderer.mouseOverClassCorner ||
+                    this.renderer.selectedClassCorner) {
+                    return 'diagram-editor__cursor--resize';
+                }
+                else if (this.renderer.mouseOverClassView) {
+                    return 'diagram-editor__cursor--pointer';
+                }
+                return '';
+            }
+            default:
+                return '';
+        }
+    }
+    setupRenderer() {
+        this.renderer.setIsReadOnly(false);
+    }
+    setRenderer(val) {
+        this._renderer = val;
+    }
+    setDiagram(val) {
+        this.diagram = val;
+    }
+    setGraph(val) {
+        this.graph = val;
+    }
+    *addClassView(path, position) {
+        if (!this.graph || !this.diagram) {
+            return;
+        }
+        const _class = this.graph.getClass(path);
+        this.renderer.addClassView(_class, position);
+    }
+}
+//# sourceMappingURL=DiagramEditorState.js.map

package/lib/stores/DiagramEditorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramEditorState.js","sourceRoot":"","sources":["../../src/stores/DiagramEditorState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAGN,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAoB,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAC1E,OAAO,EACL,wBAAwB,GAEzB,MAAM,iDAAiD,CAAC;AAEzD,MAAM,OAAO,kBAAkB;IAC7B,SAAS,CAA+B;IACxC,SAAS,CAAS;IAClB,OAAO,CAAW;IAClB,KAAK,CAAa;IAElB,YAAY,SAAiB;QAC3B,cAAc,CAAC,IAAI,EAAE;YACnB,SAAS,EAAE,UAAU;YACrB,OAAO,EAAE,UAAU;YACnB,kBAAkB,EAAE,QAAQ;YAC5B,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,MAAM;SACpB,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,oBAAoB,CACzB,IAAI,CAAC,SAAS,EACd,wGAAwG,CACzG,CAAC;IACJ,CAAC;IAED,IAAI,4BAA4B;QAC9B,OAAO,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC;IAED,6DAA6D;IAC7D,gFAAgF;IAChF,gDAAgD;IAChD,8DAA8D;IAC9D,IAAI,kBAAkB;QACpB,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACvC,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;YAC1D,OAAO,kCAAkC,CAAC;QAC5C,CAAC;QACD,QAAQ,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC;YACtC,KAAK,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC;gBAClC,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS;oBAC5B,CAAC,CAAC,kCAAkC;oBACpC,CAAC,CAAC,8BAA8B,CAAC;YACrC,CAAC;YACD,KAAK,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;gBACtC,OAAO,iCAAiC,CAAC;YAC3C,CAAC;YACD,KAAK,wBAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACvC,OAAO,kCAAkC,CAAC;YAC5C,CAAC;YACD,KAAK,wBAAwB,CAAC,MAAM,CAAC,CAAC,CAAC;gBACrC,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;oBACjC,OAAO,mCAAmC,CAAC;gBAC7C,CAAC;qBAAM,IACL,IAAI,CAAC,QAAQ,CAAC,oBAAoB;oBAClC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EACjC,CAAC;oBACD,OAAO,gCAAgC,CAAC;gBAC1C,CAAC;qBAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;oBAC5C,OAAO,iCAAiC,CAAC;gBAC3C,CAAC;gBACD,OAAO,EAAE,CAAC;YACZ,CAAC;YACD;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,WAAW,CAAC,GAAoB;QAC9B,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;IACvB,CAAC;IAED,UAAU,CAAC,GAAY;QACrB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,GAAc;QACrB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;IACnB,CAAC;IAED,CAAC,YAAY,CAAC,IAAY,EAAE,QAA2B;QACrD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC/C,CAAC;CACF"}

package/lib/utils/Const.d.ts

@@ -15,4 +15,6 @@
  */
 export declare const GET_PROJECT_ENTITIES = "getProjectEntities";
 export declare const GET_PROJECT_ENTITIES_RESPONSE = "getProjectEntitiesResponse";
+export declare const DIAGRAM_DROP_CLASS_ERROR = "diagramDropClassError";
+export declare const WRITE_ENTITY = "writeEntity";
 //# sourceMappingURL=Const.d.ts.map

package/lib/utils/Const.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Const.d.ts","sourceRoot":"","sources":["../../src/utils/Const.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,6BAA6B,+BAA+B,CAAC"}
+{"version":3,"file":"Const.d.ts","sourceRoot":"","sources":["../../src/utils/Const.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,6BAA6B,+BAA+B,CAAC;AAC1E,eAAO,MAAM,wBAAwB,0BAA0B,CAAC;AAChE,eAAO,MAAM,YAAY,gBAAgB,CAAC"}

package/lib/utils/Const.js

@@ -16,4 +16,6 @@
 // Event Types
 export const GET_PROJECT_ENTITIES = 'getProjectEntities';
 export const GET_PROJECT_ENTITIES_RESPONSE = 'getProjectEntitiesResponse';
+export const DIAGRAM_DROP_CLASS_ERROR = 'diagramDropClassError';
+export const WRITE_ENTITY = 'writeEntity';
 //# sourceMappingURL=Const.js.map

package/lib/utils/Const.js.map

@@ -1 +1 @@
-{"version":3,"file":"Const.js","sourceRoot":"","sources":["../../src/utils/Const.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc;AACd,MAAM,CAAC,MAAM,oBAAoB,GAAG,oBAAoB,CAAC;AACzD,MAAM,CAAC,MAAM,6BAA6B,GAAG,4BAA4B,CAAC"}
+{"version":3,"file":"Const.js","sourceRoot":"","sources":["../../src/utils/Const.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc;AACd,MAAM,CAAC,MAAM,oBAAoB,GAAG,oBAAoB,CAAC;AACzD,MAAM,CAAC,MAAM,6BAA6B,GAAG,4BAA4B,CAAC;AAC1E,MAAM,CAAC,MAAM,wBAAwB,GAAG,uBAAuB,CAAC;AAChE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC"}

package/lib/utils/VsCodeUtils.d.ts

@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const postMessage: (message: unknown) => void;
+import type { PlainObject } from '@finos/legend-shared';
+export declare const postMessage: (message: PlainObject) => void;
 //# sourceMappingURL=VsCodeUtils.d.ts.map

package/lib/utils/VsCodeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VsCodeUtils.d.ts","sourceRoot":"","sources":["../../src/utils/VsCodeUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAQH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,IAE9C,CAAC"}
+{"version":3,"file":"VsCodeUtils.d.ts","sourceRoot":"","sources":["../../src/utils/VsCodeUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQxD,eAAO,MAAM,WAAW,YAAa,WAAW,KAAG,IAElD,CAAC"}

package/lib/utils/VsCodeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"VsCodeUtils.js","sourceRoot":"","sources":["../../src/utils/VsCodeUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAQH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAQ,EAAE;IACpD,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9B,CAAC,CAAC"}
+{"version":3,"file":"VsCodeUtils.js","sourceRoot":"","sources":["../../src/utils/VsCodeUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAUH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAQ,EAAE;IACxD,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-vscode-extension-dependencies",
-  "version": "2.1.15",
+  "version": "3.0.1",
   "homepage": "https://github.com/finos/legend-studio/tree/master/packages/legend-vscode-extension-dependencies",
   "bugs": {
     "url": "https://github.com/finos/legend-studio/issues"
@@ -40,13 +40,17 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application-studio": "28.18.24",
-    "@finos/legend-extension-dsl-diagram": "8.0.216",
-    "@finos/legend-graph": "31.10.25",
+    "@finos/legend-application-studio": "28.18.25",
+    "@finos/legend-art": "7.1.53",
+    "@finos/legend-extension-dsl-diagram": "8.1.1",
+    "@finos/legend-graph": "31.10.26",
     "@finos/legend-shared": "10.0.53",
     "@finos/legend-storage": "3.0.103",
-    "@types/react": "18.3.4",
-    "react": "18.3.1"
+    "@types/react": "18.3.5",
+    "mobx": "6.13.1",
+    "mobx-react-lite": "4.0.7",
+    "react": "18.3.1",
+    "serializr": "3.0.2"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
@@ -63,7 +67,7 @@
     "postcss": "8.4.41",
     "postcss-url": "10.1.3",
     "rimraf": "6.0.1",
-    "rollup": "4.21.1",
+    "rollup": "4.21.2",
     "rollup-plugin-flow": "1.1.1",
     "rollup-plugin-import-css": "3.5.1",
     "rollup-plugin-postcss": "4.0.2",