@finos/legend-vscode-extension-dependencies 3.0.3 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
@@ -1,230 +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
|
-
type Diagram,
|
18
|
-
DIAGRAM_ALIGNER_OPERATOR,
|
19
|
-
DIAGRAM_ZOOM_LEVELS,
|
20
|
-
V1_diagramModelSchema,
|
21
|
-
V1_transformDiagram,
|
22
|
-
} from '@finos/legend-extension-dsl-diagram';
|
23
|
-
import { observer } from 'mobx-react-lite';
|
24
|
-
import { serialize } from 'serializr';
|
25
|
-
import { WRITE_ENTITY } from '../../utils/Const.js';
|
26
|
-
import {
|
27
|
-
AlignBottomIcon,
|
28
|
-
AlignCenterIcon,
|
29
|
-
AlignEndIcon,
|
30
|
-
AlignMiddleIcon,
|
31
|
-
AlignStartIcon,
|
32
|
-
AlignTopIcon,
|
33
|
-
CaretDownIcon,
|
34
|
-
ControlledDropdownMenu,
|
35
|
-
DistributeHorizontalIcon,
|
36
|
-
DistributeVerticalIcon,
|
37
|
-
MenuContent,
|
38
|
-
MenuContentDivider,
|
39
|
-
MenuContentItem,
|
40
|
-
SaveIcon,
|
41
|
-
} from '@finos/legend-art';
|
42
|
-
import type { DiagramEditorState } from '../../stores/DiagramEditorState.js';
|
43
|
-
import { postMessage } from '../../utils/VsCodeUtils.js';
|
44
|
-
import type { PlainObject } from '@finos/legend-shared';
|
45
|
-
|
46
|
-
export const DiagramEditorHeader = observer(
|
47
|
-
(props: { diagramEditorState: DiagramEditorState }) => {
|
48
|
-
const { diagramEditorState } = props;
|
49
|
-
const createCenterZoomer =
|
50
|
-
(zoomLevel: number): (() => void) =>
|
51
|
-
(): void => {
|
52
|
-
diagramEditorState.renderer.zoomCenter(zoomLevel / 100);
|
53
|
-
};
|
54
|
-
const zoomToFit = (): void => diagramEditorState.renderer.zoomToFit();
|
55
|
-
|
56
|
-
const isAlignerDisabled =
|
57
|
-
diagramEditorState.renderer.selectedClasses.length < 2;
|
58
|
-
|
59
|
-
return (
|
60
|
-
<>
|
61
|
-
<div className="diagram-editor__header__group">
|
62
|
-
<button
|
63
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
64
|
-
title="Save"
|
65
|
-
tabIndex={-1}
|
66
|
-
onClick={(): void =>
|
67
|
-
postMessage({
|
68
|
-
command: WRITE_ENTITY,
|
69
|
-
msg: serialize(
|
70
|
-
V1_diagramModelSchema,
|
71
|
-
V1_transformDiagram(
|
72
|
-
diagramEditorState._renderer?.diagram as Diagram,
|
73
|
-
),
|
74
|
-
) as PlainObject,
|
75
|
-
})
|
76
|
-
}
|
77
|
-
>
|
78
|
-
<SaveIcon className="diagram-editor__icon--aligner" />
|
79
|
-
</button>
|
80
|
-
<button
|
81
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
82
|
-
title="Align left"
|
83
|
-
disabled={isAlignerDisabled}
|
84
|
-
tabIndex={-1}
|
85
|
-
onClick={(): void =>
|
86
|
-
diagramEditorState.renderer.align(
|
87
|
-
DIAGRAM_ALIGNER_OPERATOR.ALIGN_LEFT,
|
88
|
-
)
|
89
|
-
}
|
90
|
-
>
|
91
|
-
<AlignStartIcon className="diagram-editor__icon--aligner" />
|
92
|
-
</button>
|
93
|
-
<button
|
94
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
95
|
-
title="Align center"
|
96
|
-
disabled={isAlignerDisabled}
|
97
|
-
tabIndex={-1}
|
98
|
-
onClick={(): void =>
|
99
|
-
diagramEditorState.renderer.align(
|
100
|
-
DIAGRAM_ALIGNER_OPERATOR.ALIGN_CENTER,
|
101
|
-
)
|
102
|
-
}
|
103
|
-
>
|
104
|
-
<AlignCenterIcon className="diagram-editor__icon--aligner" />
|
105
|
-
</button>
|
106
|
-
<button
|
107
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
108
|
-
title="Align right"
|
109
|
-
disabled={isAlignerDisabled}
|
110
|
-
tabIndex={-1}
|
111
|
-
onClick={(): void =>
|
112
|
-
diagramEditorState.renderer.align(
|
113
|
-
DIAGRAM_ALIGNER_OPERATOR.ALIGN_RIGHT,
|
114
|
-
)
|
115
|
-
}
|
116
|
-
>
|
117
|
-
<AlignEndIcon className="diagram-editor__icon--aligner" />
|
118
|
-
</button>
|
119
|
-
</div>
|
120
|
-
<div className="diagram-editor__header__group__separator" />
|
121
|
-
<div className="diagram-editor__header__group">
|
122
|
-
<button
|
123
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
124
|
-
title="Align top"
|
125
|
-
disabled={isAlignerDisabled}
|
126
|
-
tabIndex={-1}
|
127
|
-
onClick={(): void =>
|
128
|
-
diagramEditorState.renderer.align(
|
129
|
-
DIAGRAM_ALIGNER_OPERATOR.ALIGN_TOP,
|
130
|
-
)
|
131
|
-
}
|
132
|
-
>
|
133
|
-
<AlignTopIcon className="diagram-editor__icon--aligner" />
|
134
|
-
</button>
|
135
|
-
<button
|
136
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
137
|
-
title="Align middle"
|
138
|
-
disabled={isAlignerDisabled}
|
139
|
-
tabIndex={-1}
|
140
|
-
onClick={(): void =>
|
141
|
-
diagramEditorState.renderer.align(
|
142
|
-
DIAGRAM_ALIGNER_OPERATOR.ALIGN_MIDDLE,
|
143
|
-
)
|
144
|
-
}
|
145
|
-
>
|
146
|
-
<AlignMiddleIcon className="diagram-editor__icon--aligner" />
|
147
|
-
</button>
|
148
|
-
<button
|
149
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
150
|
-
title="Align bottom"
|
151
|
-
disabled={isAlignerDisabled}
|
152
|
-
tabIndex={-1}
|
153
|
-
onClick={(): void =>
|
154
|
-
diagramEditorState.renderer.align(
|
155
|
-
DIAGRAM_ALIGNER_OPERATOR.ALIGN_BOTTOM,
|
156
|
-
)
|
157
|
-
}
|
158
|
-
>
|
159
|
-
<AlignBottomIcon className="diagram-editor__icon--aligner" />
|
160
|
-
</button>
|
161
|
-
</div>
|
162
|
-
<div className="diagram-editor__header__group__separator" />
|
163
|
-
<div className="diagram-editor__header__group">
|
164
|
-
<button
|
165
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
166
|
-
title="Space horizontally"
|
167
|
-
disabled={isAlignerDisabled}
|
168
|
-
tabIndex={-1}
|
169
|
-
onClick={(): void =>
|
170
|
-
diagramEditorState.renderer.align(
|
171
|
-
DIAGRAM_ALIGNER_OPERATOR.SPACE_HORIZONTALLY,
|
172
|
-
)
|
173
|
-
}
|
174
|
-
>
|
175
|
-
<DistributeHorizontalIcon className="diagram-editor__icon--aligner" />
|
176
|
-
</button>
|
177
|
-
<button
|
178
|
-
className="diagram-editor__header__action diagram-editor__header__group__action"
|
179
|
-
title="Space vertically"
|
180
|
-
disabled={isAlignerDisabled}
|
181
|
-
tabIndex={-1}
|
182
|
-
onClick={(): void =>
|
183
|
-
diagramEditorState.renderer.align(
|
184
|
-
DIAGRAM_ALIGNER_OPERATOR.SPACE_VERTICALLY,
|
185
|
-
)
|
186
|
-
}
|
187
|
-
>
|
188
|
-
<DistributeVerticalIcon className="diagram-editor__icon--aligner" />
|
189
|
-
</button>
|
190
|
-
</div>
|
191
|
-
<ControlledDropdownMenu
|
192
|
-
className="diagram-editor__header__dropdown"
|
193
|
-
title="Zoom..."
|
194
|
-
content={
|
195
|
-
<MenuContent>
|
196
|
-
<MenuContentItem
|
197
|
-
className="diagram-editor__header__zoomer__dropdown__menu__item"
|
198
|
-
onClick={zoomToFit}
|
199
|
-
>
|
200
|
-
Fit
|
201
|
-
</MenuContentItem>
|
202
|
-
<MenuContentDivider />
|
203
|
-
{DIAGRAM_ZOOM_LEVELS.map((zoomLevel) => (
|
204
|
-
<MenuContentItem
|
205
|
-
key={zoomLevel}
|
206
|
-
className="diagram-editor__header__zoomer__dropdown__menu__item"
|
207
|
-
onClick={createCenterZoomer(zoomLevel)}
|
208
|
-
>
|
209
|
-
{zoomLevel}%
|
210
|
-
</MenuContentItem>
|
211
|
-
))}
|
212
|
-
</MenuContent>
|
213
|
-
}
|
214
|
-
menuProps={{
|
215
|
-
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
|
216
|
-
transformOrigin: { vertical: 'top', horizontal: 'right' },
|
217
|
-
elevation: 7,
|
218
|
-
}}
|
219
|
-
>
|
220
|
-
<div className="diagram-editor__header__dropdown__label diagram-editor__header__zoomer__dropdown__label">
|
221
|
-
{Math.round(diagramEditorState.renderer.zoom * 100)}%
|
222
|
-
</div>
|
223
|
-
<div className="diagram-editor__header__dropdown__trigger diagram-editor__header__zoomer__dropdown__trigger">
|
224
|
-
<CaretDownIcon />
|
225
|
-
</div>
|
226
|
-
</ControlledDropdownMenu>
|
227
|
-
</>
|
228
|
-
);
|
229
|
-
},
|
230
|
-
);
|
@@ -1,121 +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
|
-
type Diagram,
|
18
|
-
type Point,
|
19
|
-
} from '@finos/legend-extension-dsl-diagram/graph';
|
20
|
-
import { type PureModel } from '@finos/legend-graph';
|
21
|
-
import { type GeneratorFn, guaranteeNonNullable } from '@finos/legend-shared';
|
22
|
-
import { action, computed, flow, makeObservable, observable } from 'mobx';
|
23
|
-
import {
|
24
|
-
DIAGRAM_INTERACTION_MODE,
|
25
|
-
type DiagramRenderer,
|
26
|
-
} from '@finos/legend-extension-dsl-diagram/application';
|
27
|
-
|
28
|
-
export class DiagramEditorState {
|
29
|
-
_renderer?: DiagramRenderer | undefined;
|
30
|
-
diagramId: string;
|
31
|
-
diagram?: Diagram;
|
32
|
-
graph?: PureModel;
|
33
|
-
|
34
|
-
constructor(diagramId: string) {
|
35
|
-
makeObservable(this, {
|
36
|
-
_renderer: observable,
|
37
|
-
diagram: observable,
|
38
|
-
diagramCursorClass: computed,
|
39
|
-
addClassView: flow,
|
40
|
-
setRenderer: action,
|
41
|
-
});
|
42
|
-
|
43
|
-
this.diagramId = diagramId;
|
44
|
-
}
|
45
|
-
|
46
|
-
get renderer(): DiagramRenderer {
|
47
|
-
return guaranteeNonNullable(
|
48
|
-
this._renderer,
|
49
|
-
`Diagram renderer must be initialized (this is likely caused by calling this method at the wrong place)`,
|
50
|
-
);
|
51
|
-
}
|
52
|
-
|
53
|
-
get isDiagramRendererInitialized(): boolean {
|
54
|
-
return Boolean(this._renderer);
|
55
|
-
}
|
56
|
-
|
57
|
-
// NOTE: we have tried to use React to control the cursor and
|
58
|
-
// could not overcome the jank/lag problem, so we settle with CSS-based approach
|
59
|
-
// See https://css-tricks.com/using-css-cursors/
|
60
|
-
// See https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
|
61
|
-
get diagramCursorClass(): string {
|
62
|
-
if (!this.isDiagramRendererInitialized) {
|
63
|
-
return '';
|
64
|
-
}
|
65
|
-
if (this.renderer.middleClick || this.renderer.rightClick) {
|
66
|
-
return 'diagram-editor__cursor--grabbing';
|
67
|
-
}
|
68
|
-
switch (this.renderer.interactionMode) {
|
69
|
-
case DIAGRAM_INTERACTION_MODE.PAN: {
|
70
|
-
return this.renderer.leftClick
|
71
|
-
? 'diagram-editor__cursor--grabbing'
|
72
|
-
: 'diagram-editor__cursor--grab';
|
73
|
-
}
|
74
|
-
case DIAGRAM_INTERACTION_MODE.ZOOM_IN: {
|
75
|
-
return 'diagram-editor__cursor--zoom-in';
|
76
|
-
}
|
77
|
-
case DIAGRAM_INTERACTION_MODE.ZOOM_OUT: {
|
78
|
-
return 'diagram-editor__cursor--zoom-out';
|
79
|
-
}
|
80
|
-
case DIAGRAM_INTERACTION_MODE.LAYOUT: {
|
81
|
-
if (this.renderer.selectionStart) {
|
82
|
-
return 'diagram-editor__cursor--crosshair';
|
83
|
-
} else if (
|
84
|
-
this.renderer.mouseOverClassCorner ||
|
85
|
-
this.renderer.selectedClassCorner
|
86
|
-
) {
|
87
|
-
return 'diagram-editor__cursor--resize';
|
88
|
-
} else if (this.renderer.mouseOverClassView) {
|
89
|
-
return 'diagram-editor__cursor--pointer';
|
90
|
-
}
|
91
|
-
return '';
|
92
|
-
}
|
93
|
-
default:
|
94
|
-
return '';
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
setupRenderer(): void {
|
99
|
-
this.renderer.setIsReadOnly(false);
|
100
|
-
}
|
101
|
-
|
102
|
-
setRenderer(val: DiagramRenderer): void {
|
103
|
-
this._renderer = val;
|
104
|
-
}
|
105
|
-
|
106
|
-
setDiagram(val: Diagram): void {
|
107
|
-
this.diagram = val;
|
108
|
-
}
|
109
|
-
|
110
|
-
setGraph(val: PureModel): void {
|
111
|
-
this.graph = val;
|
112
|
-
}
|
113
|
-
|
114
|
-
*addClassView(path: string, position: Point | undefined): GeneratorFn<void> {
|
115
|
-
if (!this.graph || !this.diagram) {
|
116
|
-
return;
|
117
|
-
}
|
118
|
-
const _class = this.graph.getClass(path);
|
119
|
-
this.renderer.addClassView(_class, position);
|
120
|
-
}
|
121
|
-
}
|
package/src/utils/Const.ts
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
|
-
|
17
|
-
// Event Types
|
18
|
-
export const GET_PROJECT_ENTITIES = 'getProjectEntities';
|
19
|
-
export const GET_PROJECT_ENTITIES_RESPONSE = 'getProjectEntitiesResponse';
|
20
|
-
export const DIAGRAM_DROP_CLASS_ERROR = 'diagramDropClassError';
|
21
|
-
export const WRITE_ENTITY = 'writeEntity';
|
package/src/utils/VsCodeUtils.ts
DELETED
@@ -1,27 +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
|
-
|
17
|
-
import type { PlainObject } from '@finos/legend-shared';
|
18
|
-
|
19
|
-
interface Vscode {
|
20
|
-
postMessage(message: PlainObject): void;
|
21
|
-
}
|
22
|
-
|
23
|
-
declare const vscode: Vscode;
|
24
|
-
|
25
|
-
export const postMessage = (message: PlainObject): void => {
|
26
|
-
vscode.postMessage(message);
|
27
|
-
};
|