@finos/legend-vscode-extension-dependencies 3.0.3 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/bundles/bundle.cjs.js +103 -103
- package/lib/bundles/style/bundle.css +2 -2
- package/lib/index.d.ts +6 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -2
- package/lib/index.js.map +1 -1
- package/package.json +2 -8
- package/src/index.ts +46 -2
- package/tsconfig.json +1 -8
- package/lib/components/Diagram/DiagramEditor.d.ts +0 -9
- package/lib/components/Diagram/DiagramEditor.d.ts.map +0 -1
- package/lib/components/Diagram/DiagramEditor.js +0 -61
- package/lib/components/Diagram/DiagramEditor.js.map +0 -1
- package/lib/components/Diagram/DiagramEditorDiagramCanvas.d.ts +0 -5
- package/lib/components/Diagram/DiagramEditorDiagramCanvas.d.ts.map +0 -1
- package/lib/components/Diagram/DiagramEditorDiagramCanvas.js +0 -92
- package/lib/components/Diagram/DiagramEditorDiagramCanvas.js.map +0 -1
- package/lib/components/Diagram/DiagramEditorToolPanel.d.ts +0 -7
- package/lib/components/Diagram/DiagramEditorToolPanel.d.ts.map +0 -1
- package/lib/components/Diagram/DiagramEditorToolPanel.js +0 -37
- package/lib/components/Diagram/DiagramEditorToolPanel.js.map +0 -1
- package/lib/components/Diagram/DiagramHeader.d.ts +0 -7
- package/lib/components/Diagram/DiagramHeader.d.ts.map +0 -1
- package/lib/components/Diagram/DiagramHeader.js +0 -39
- package/lib/components/Diagram/DiagramHeader.js.map +0 -1
- package/lib/stores/DiagramEditorState.d.ts +0 -35
- package/lib/stores/DiagramEditorState.d.ts.map +0 -1
- package/lib/stores/DiagramEditorState.js +0 -102
- package/lib/stores/DiagramEditorState.js.map +0 -1
- package/lib/utils/Const.d.ts +0 -20
- package/lib/utils/Const.d.ts.map +0 -1
- package/lib/utils/Const.js +0 -21
- package/lib/utils/Const.js.map +0 -1
- package/lib/utils/VsCodeUtils.d.ts +0 -18
- package/lib/utils/VsCodeUtils.d.ts.map +0 -1
- package/lib/utils/VsCodeUtils.js +0 -19
- package/lib/utils/VsCodeUtils.js.map +0 -1
- package/src/components/Diagram/DiagramEditor.tsx +0 -113
- package/src/components/Diagram/DiagramEditorDiagramCanvas.tsx +0 -150
- package/src/components/Diagram/DiagramEditorToolPanel.tsx +0 -105
- package/src/components/Diagram/DiagramHeader.tsx +0 -230
- package/src/stores/DiagramEditorState.ts +0 -121
- package/src/utils/Const.ts +0 -21
- package/src/utils/VsCodeUtils.ts +0 -27
package/lib/utils/Const.d.ts
DELETED
@@ -1,20 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
export declare const GET_PROJECT_ENTITIES = "getProjectEntities";
|
17
|
-
export declare const GET_PROJECT_ENTITIES_RESPONSE = "getProjectEntitiesResponse";
|
18
|
-
export declare const DIAGRAM_DROP_CLASS_ERROR = "diagramDropClassError";
|
19
|
-
export declare const WRITE_ENTITY = "writeEntity";
|
20
|
-
//# sourceMappingURL=Const.d.ts.map
|
package/lib/utils/Const.d.ts.map
DELETED
@@ -1 +0,0 @@
|
|
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;AAC1E,eAAO,MAAM,wBAAwB,0BAA0B,CAAC;AAChE,eAAO,MAAM,YAAY,gBAAgB,CAAC"}
|
package/lib/utils/Const.js
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
// Event Types
|
17
|
-
export const GET_PROJECT_ENTITIES = 'getProjectEntities';
|
18
|
-
export const GET_PROJECT_ENTITIES_RESPONSE = 'getProjectEntitiesResponse';
|
19
|
-
export const DIAGRAM_DROP_CLASS_ERROR = 'diagramDropClassError';
|
20
|
-
export const WRITE_ENTITY = 'writeEntity';
|
21
|
-
//# sourceMappingURL=Const.js.map
|
package/lib/utils/Const.js.map
DELETED
@@ -1 +0,0 @@
|
|
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;AAC1E,MAAM,CAAC,MAAM,wBAAwB,GAAG,uBAAuB,CAAC;AAChE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC"}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
import type { PlainObject } from '@finos/legend-shared';
|
17
|
-
export declare const postMessage: (message: PlainObject) => void;
|
18
|
-
//# sourceMappingURL=VsCodeUtils.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"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
DELETED
@@ -1,19 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
export const postMessage = (message) => {
|
17
|
-
vscode.postMessage(message);
|
18
|
-
};
|
19
|
-
//# sourceMappingURL=VsCodeUtils.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"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"}
|
@@ -1,113 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
import { getDiagram } from '@finos/legend-extension-dsl-diagram';
|
17
|
-
import type { Entity } from '@finos/legend-storage';
|
18
|
-
import { useRef, useEffect, useState } from 'react';
|
19
|
-
import { observer } from 'mobx-react-lite';
|
20
|
-
import '../../../style/index.scss';
|
21
|
-
import { postMessage } from '../../utils/VsCodeUtils.js';
|
22
|
-
import {
|
23
|
-
GET_PROJECT_ENTITIES,
|
24
|
-
GET_PROJECT_ENTITIES_RESPONSE,
|
25
|
-
} from '../../utils/Const.js';
|
26
|
-
import { getPureGraph } from '../../graph-manager/index.js';
|
27
|
-
import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
|
28
|
-
import { LegendStyleProvider } from '@finos/legend-art';
|
29
|
-
import { DiagramEditorHeader } from './DiagramHeader.js';
|
30
|
-
import { DiagramEditorDiagramCanvas } from './DiagramEditorDiagramCanvas.js';
|
31
|
-
import { DiagramEditorToolPanel } from './DiagramEditorToolPanel.js';
|
32
|
-
|
33
|
-
export const DiagramEditor = observer(
|
34
|
-
(props: { diagramId: string; diagramEditorState: DiagramEditorState }) => {
|
35
|
-
const diagramCanvasRef = useRef<HTMLDivElement>(null);
|
36
|
-
const { diagramId, diagramEditorState } = props;
|
37
|
-
const [entities, setEntities] = useState<Entity[]>([]);
|
38
|
-
const [error, setError] = useState<string | null>();
|
39
|
-
|
40
|
-
useEffect(() => {
|
41
|
-
postMessage({
|
42
|
-
command: GET_PROJECT_ENTITIES,
|
43
|
-
});
|
44
|
-
}, [diagramId]);
|
45
|
-
|
46
|
-
window.addEventListener(
|
47
|
-
'message',
|
48
|
-
(event: MessageEvent<{ result: Entity[]; command: string }>) => {
|
49
|
-
const message = event.data;
|
50
|
-
if (message.command === GET_PROJECT_ENTITIES_RESPONSE) {
|
51
|
-
const es: Entity[] = message.result;
|
52
|
-
setEntities(es);
|
53
|
-
}
|
54
|
-
},
|
55
|
-
);
|
56
|
-
|
57
|
-
useEffect(() => {
|
58
|
-
if (entities.length && diagramId) {
|
59
|
-
getPureGraph(entities, [])
|
60
|
-
.then((pureModel) => {
|
61
|
-
const diagram = getDiagram(diagramId, pureModel);
|
62
|
-
diagramEditorState.setDiagram(diagram);
|
63
|
-
diagramEditorState.setGraph(pureModel);
|
64
|
-
setError(null);
|
65
|
-
})
|
66
|
-
.catch((e) => {
|
67
|
-
setError(e.message);
|
68
|
-
});
|
69
|
-
}
|
70
|
-
}, [entities, diagramId, diagramEditorState]);
|
71
|
-
|
72
|
-
return (
|
73
|
-
<LegendStyleProvider>
|
74
|
-
<div className="diagram-editor">
|
75
|
-
{error ? (
|
76
|
-
<div className="diagram-editor__error">
|
77
|
-
<span>Something went wrong. Diagram cannot be created.</span>
|
78
|
-
<span
|
79
|
-
className="diagram-editor__error__details"
|
80
|
-
title={`${error}`}
|
81
|
-
>
|
82
|
-
Error Details.
|
83
|
-
</span>
|
84
|
-
</div>
|
85
|
-
) : (
|
86
|
-
<>
|
87
|
-
<div className="diagram-editor__header">
|
88
|
-
{diagramEditorState.isDiagramRendererInitialized && (
|
89
|
-
<DiagramEditorHeader
|
90
|
-
diagramEditorState={diagramEditorState}
|
91
|
-
/>
|
92
|
-
)}
|
93
|
-
</div>
|
94
|
-
<div className="diagram-editor__content">
|
95
|
-
<div className="diagram-editor__stage">
|
96
|
-
{diagramEditorState.isDiagramRendererInitialized && (
|
97
|
-
<DiagramEditorToolPanel
|
98
|
-
diagramEditorState={diagramEditorState}
|
99
|
-
/>
|
100
|
-
)}
|
101
|
-
<DiagramEditorDiagramCanvas
|
102
|
-
diagramEditorState={diagramEditorState}
|
103
|
-
ref={diagramCanvasRef}
|
104
|
-
/>
|
105
|
-
</div>
|
106
|
-
</div>
|
107
|
-
</>
|
108
|
-
)}
|
109
|
-
</div>
|
110
|
-
</LegendStyleProvider>
|
111
|
-
);
|
112
|
-
},
|
113
|
-
);
|
@@ -1,150 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
import { clsx, useResizeDetector } from '@finos/legend-art';
|
17
|
-
import {
|
18
|
-
type Diagram,
|
19
|
-
DiagramRenderer,
|
20
|
-
Point,
|
21
|
-
V1_diagramModelSchema,
|
22
|
-
V1_transformDiagram,
|
23
|
-
} from '@finos/legend-extension-dsl-diagram';
|
24
|
-
import { Class } from '@finos/legend-graph';
|
25
|
-
import { observer } from 'mobx-react-lite';
|
26
|
-
import { flowResult } from 'mobx';
|
27
|
-
import {
|
28
|
-
forwardRef,
|
29
|
-
useEffect,
|
30
|
-
type DragEvent,
|
31
|
-
type KeyboardEvent,
|
32
|
-
} from 'react';
|
33
|
-
import { serialize } from 'serializr';
|
34
|
-
import { DIAGRAM_DROP_CLASS_ERROR, WRITE_ENTITY } from '../../utils/Const.js';
|
35
|
-
import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
|
36
|
-
import { postMessage } from '../../utils/VsCodeUtils.js';
|
37
|
-
|
38
|
-
export const DiagramEditorDiagramCanvas = observer(
|
39
|
-
forwardRef<
|
40
|
-
HTMLDivElement,
|
41
|
-
{
|
42
|
-
diagramEditorState: DiagramEditorState;
|
43
|
-
}
|
44
|
-
>(function DiagramEditorDiagramCanvas(props, ref) {
|
45
|
-
const { diagramEditorState } = props;
|
46
|
-
const diagram = diagramEditorState.diagram;
|
47
|
-
const diagramCanvasRef = ref as React.MutableRefObject<HTMLDivElement>;
|
48
|
-
|
49
|
-
const { width, height } = useResizeDetector<HTMLDivElement>({
|
50
|
-
refreshMode: 'debounce',
|
51
|
-
refreshRate: 50,
|
52
|
-
targetRef: diagramCanvasRef,
|
53
|
-
});
|
54
|
-
|
55
|
-
useEffect(() => {
|
56
|
-
if (diagram) {
|
57
|
-
const renderer = new DiagramRenderer(diagramCanvasRef.current, diagram);
|
58
|
-
diagramEditorState.setRenderer(renderer);
|
59
|
-
diagramEditorState.setupRenderer();
|
60
|
-
renderer.render({ initial: true });
|
61
|
-
}
|
62
|
-
}, [diagramCanvasRef, diagramEditorState, diagram]);
|
63
|
-
|
64
|
-
useEffect(() => {
|
65
|
-
// since after the diagram render is initialized, we start
|
66
|
-
// showing the toolbar and the header, which causes the auto-zoom fit
|
67
|
-
// to be off, we need to call this method again
|
68
|
-
if (diagramEditorState.isDiagramRendererInitialized) {
|
69
|
-
diagramEditorState.renderer.render({ initial: true });
|
70
|
-
}
|
71
|
-
}, [diagramEditorState, diagramEditorState.isDiagramRendererInitialized]);
|
72
|
-
|
73
|
-
useEffect(() => {
|
74
|
-
if (diagramEditorState.isDiagramRendererInitialized) {
|
75
|
-
diagramEditorState.renderer.refresh();
|
76
|
-
}
|
77
|
-
}, [diagramEditorState, width, height]);
|
78
|
-
|
79
|
-
const dropTarget = document.getElementById('root') ?? document.body;
|
80
|
-
|
81
|
-
dropTarget.addEventListener('dragover', (event) => {
|
82
|
-
// accept any DnD
|
83
|
-
event.preventDefault();
|
84
|
-
});
|
85
|
-
|
86
|
-
const drop = (event: DragEvent) => {
|
87
|
-
event.preventDefault();
|
88
|
-
const droppedEntityIds: string[] = (
|
89
|
-
JSON.parse(
|
90
|
-
event.dataTransfer.getData(
|
91
|
-
'application/vnd.code.tree.legendConceptTree',
|
92
|
-
),
|
93
|
-
).itemHandles as string[]
|
94
|
-
).map((item) => item.split('/')[1] ?? '');
|
95
|
-
const position =
|
96
|
-
diagramEditorState.renderer.canvasCoordinateToModelCoordinate(
|
97
|
-
diagramEditorState.renderer.eventCoordinateToCanvasCoordinate(
|
98
|
-
new Point(event.clientX, event.clientY),
|
99
|
-
),
|
100
|
-
);
|
101
|
-
|
102
|
-
droppedEntityIds
|
103
|
-
.filter((entityId) => {
|
104
|
-
const isClassInstance =
|
105
|
-
diagramEditorState.graph?.getElement(entityId) instanceof Class;
|
106
|
-
if (!isClassInstance) {
|
107
|
-
postMessage({
|
108
|
-
command: DIAGRAM_DROP_CLASS_ERROR,
|
109
|
-
});
|
110
|
-
}
|
111
|
-
return isClassInstance;
|
112
|
-
})
|
113
|
-
.forEach((entityId) => {
|
114
|
-
flowResult(diagramEditorState.addClassView(entityId, position)).catch(
|
115
|
-
// eslint-disable-next-line no-console
|
116
|
-
(error: unknown) => console.error(error),
|
117
|
-
);
|
118
|
-
});
|
119
|
-
};
|
120
|
-
|
121
|
-
const handleKeyDown = (event: KeyboardEvent) => {
|
122
|
-
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
|
123
|
-
event.preventDefault();
|
124
|
-
|
125
|
-
postMessage({
|
126
|
-
command: WRITE_ENTITY,
|
127
|
-
msg: serialize(
|
128
|
-
V1_diagramModelSchema,
|
129
|
-
V1_transformDiagram(
|
130
|
-
diagramEditorState._renderer?.diagram as Diagram,
|
131
|
-
),
|
132
|
-
),
|
133
|
-
});
|
134
|
-
}
|
135
|
-
};
|
136
|
-
|
137
|
-
return (
|
138
|
-
<div
|
139
|
-
onDrop={drop}
|
140
|
-
onKeyDown={handleKeyDown}
|
141
|
-
ref={diagramCanvasRef}
|
142
|
-
className={clsx(
|
143
|
-
'diagram-canvas diagram-editor__canvas',
|
144
|
-
diagramEditorState.diagramCursorClass,
|
145
|
-
)}
|
146
|
-
tabIndex={0}
|
147
|
-
/>
|
148
|
-
);
|
149
|
-
}),
|
150
|
-
);
|
@@ -1,105 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Copyright (c) 2020-present, Goldman Sachs
|
3
|
-
*
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
-
* you may not use this file except in compliance with the License.
|
6
|
-
* You may obtain a copy of the License at
|
7
|
-
*
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
-
*
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
-
* See the License for the specific language governing permissions and
|
14
|
-
* limitations under the License.
|
15
|
-
*/
|
16
|
-
import {
|
17
|
-
clsx,
|
18
|
-
MousePointerIcon,
|
19
|
-
MoveIcon,
|
20
|
-
ZoomInIcon,
|
21
|
-
ZoomOutIcon,
|
22
|
-
} from '@finos/legend-art';
|
23
|
-
import {
|
24
|
-
DIAGRAM_INTERACTION_MODE,
|
25
|
-
DIAGRAM_RELATIONSHIP_EDIT_MODE,
|
26
|
-
} from '@finos/legend-extension-dsl-diagram';
|
27
|
-
import { observer } from 'mobx-react-lite';
|
28
|
-
import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
|
29
|
-
|
30
|
-
export const DiagramEditorToolPanel = observer(
|
31
|
-
(props: { diagramEditorState: DiagramEditorState }) => {
|
32
|
-
const { diagramEditorState } = props;
|
33
|
-
const renderer = diagramEditorState.renderer;
|
34
|
-
//const isReadOnly = diagramEditorState.isReadOnly;
|
35
|
-
const createModeSwitcher =
|
36
|
-
(
|
37
|
-
editMode: DIAGRAM_INTERACTION_MODE,
|
38
|
-
relationshipMode: DIAGRAM_RELATIONSHIP_EDIT_MODE,
|
39
|
-
): (() => void) =>
|
40
|
-
(): void => {
|
41
|
-
renderer.changeMode(editMode, relationshipMode);
|
42
|
-
};
|
43
|
-
|
44
|
-
return (
|
45
|
-
<div className="diagram-editor__tools">
|
46
|
-
<button
|
47
|
-
className={clsx('diagram-editor__tool', {
|
48
|
-
'diagram-editor__tool--active':
|
49
|
-
renderer.interactionMode === DIAGRAM_INTERACTION_MODE.LAYOUT,
|
50
|
-
})}
|
51
|
-
tabIndex={-1}
|
52
|
-
onClick={createModeSwitcher(
|
53
|
-
DIAGRAM_INTERACTION_MODE.LAYOUT,
|
54
|
-
DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
|
55
|
-
)}
|
56
|
-
title="View Tool (V)"
|
57
|
-
>
|
58
|
-
<MousePointerIcon className="diagram-editor__icon--layout" />
|
59
|
-
</button>
|
60
|
-
<button
|
61
|
-
className={clsx('diagram-editor__tool', {
|
62
|
-
'diagram-editor__tool--active':
|
63
|
-
renderer.interactionMode === DIAGRAM_INTERACTION_MODE.PAN,
|
64
|
-
})}
|
65
|
-
tabIndex={-1}
|
66
|
-
onClick={createModeSwitcher(
|
67
|
-
DIAGRAM_INTERACTION_MODE.PAN,
|
68
|
-
DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
|
69
|
-
)}
|
70
|
-
title="Pan Tool (M)"
|
71
|
-
>
|
72
|
-
<MoveIcon className="diagram-editor__icon--pan" />
|
73
|
-
</button>
|
74
|
-
<button
|
75
|
-
className={clsx('diagram-editor__tool', {
|
76
|
-
'diagram-editor__tool--active':
|
77
|
-
renderer.interactionMode === DIAGRAM_INTERACTION_MODE.ZOOM_IN,
|
78
|
-
})}
|
79
|
-
tabIndex={-1}
|
80
|
-
title="Zoom In (Z)"
|
81
|
-
onClick={createModeSwitcher(
|
82
|
-
DIAGRAM_INTERACTION_MODE.ZOOM_IN,
|
83
|
-
DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
|
84
|
-
)}
|
85
|
-
>
|
86
|
-
<ZoomInIcon className="diagram-editor__icon--zoom-in" />
|
87
|
-
</button>
|
88
|
-
<button
|
89
|
-
className={clsx('diagram-editor__tool', {
|
90
|
-
'diagram-editor__tool--active':
|
91
|
-
renderer.interactionMode === DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
|
92
|
-
})}
|
93
|
-
tabIndex={-1}
|
94
|
-
title="Zoom Out (Z)"
|
95
|
-
onClick={createModeSwitcher(
|
96
|
-
DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
|
97
|
-
DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
|
98
|
-
)}
|
99
|
-
>
|
100
|
-
<ZoomOutIcon className="diagram-editor__icon--zoom-out" />
|
101
|
-
</button>
|
102
|
-
</div>
|
103
|
-
);
|
104
|
-
},
|
105
|
-
);
|