Skip to content

Commit

Permalink
[4301] Fix Extension VSCode extension regressions
Browse files Browse the repository at this point in the history
Bug: #4301
Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
  • Loading branch information
gcoutable committed Dec 17, 2024
1 parent 7bbe647 commit 6269f32
Show file tree
Hide file tree
Showing 12 changed files with 688 additions and 22 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ This was first fixed in 2022.3.0 but broken in 2024.3.0; it is now fixed again.
- https://github.com/eclipse-sirius/sirius-web/issues/4280[#4280] [diagram] Fix direct edit with F2 when the palette is opened
- https://github.com/eclipse-sirius/sirius-web/issues/4302[#4302] [diagram] Fix edges label flashing
- https://github.com/eclipse-sirius/sirius-web/issues/4312[#4312] [sirius-web] The _Details_ view dit not react to its input is deselected, showing potentially stale information
- https://github.com/eclipse-sirius/sirius-web/issues/4301[#4301] [vs-code] Fix VSCode extension regressions.
+ Fix Explorer
+ Contribute the Ellipse node
+ Contribute the Selection Dialog

=== New Features

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ import { ProjectDownloadMenuItemExtension } from '../views/project-browser/list-
import { ProjectSettingTabContribution } from '../views/project-settings/ProjectSettingsView.types';
import { projectSettingsTabExtensionPoint } from '../views/project-settings/ProjectSettingsViewExtensionPoints';
import { ProjectImagesSettings } from '../views/project-settings/images/ProjectImagesSettings';
import { ellipseNodeStyleDocumentTransform } from './ElipseNodeDocumentTransform';
import { ellipseNodeStyleDocumentTransform } from './EllipseNodeDocumentTransform';
import { referenceWidgetDocumentTransform } from './ReferenceWidgetDocumentTransform';

const getType = (representation: RepresentationMetadata): string | null => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type { SiriusWebApplicationProps } from './application/SiriusWebApplicati
export { DiagramRepresentationConfiguration } from './diagrams/DiagramRepresentationConfiguration';
export type { NodeTypeRegistry } from './diagrams/DiagramRepresentationConfiguration.types';
export { DefaultExtensionRegistryMergeStrategy } from './extension/DefaultExtensionRegistryMergeStrategy';
export { ellipseNodeStyleDocumentTransform } from './extension/EllipseNodeDocumentTransform';
export { referenceWidgetDocumentTransform } from './extension/ReferenceWidgetDocumentTransform';
export type { FooterProps } from './footer/Footer.types';
export { footerExtensionPoint } from './footer/FooterExtensionPoints';
Expand Down
10 changes: 5 additions & 5 deletions vscode-extension/src/data/ProjectData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class ProjectData {
}

fetchModels(serverAddress: string, cookie: string, expandedItems: string[]): ModelData[] {
const graphQLSubscription = getTreeEventSubscription(8);
const graphQLSubscription = getTreeEventSubscription(8, 'explorerEvent', 'ExplorerEventInput');
const headers = {
Cookie: cookie,
};
Expand All @@ -68,10 +68,10 @@ export class ProjectData {
variables: {
input: {
id: uuid(),
treeId: 'explorer://',
representationId: `explorer://?treeDescriptionId=explorer_tree_description&expandedIds=[${expandedItems
.map(encodeURIComponent)
.join(',')}]&activeFilterIds=[]`,
editingContextId: this.id,
expanded: expandedItems,
activeFilterIds: [],
},
},
};
Expand All @@ -82,7 +82,7 @@ export class ProjectData {
client.onmessage = (message) => {
if (message?.data) {
const response = JSON.parse(message.data as string);
const documents = response.payload?.data?.treeEvent?.tree?.children;
const documents = response.payload?.data?.explorerEvent?.tree?.children;
if (response.id === this.subscriptionTreeEventId && documents) {
this.modelsData = this.buildModelData(documents);
commands.executeCommand('siriusweb.displayProjectContents', this.serverId, this.id);
Expand Down
6 changes: 3 additions & 3 deletions vscode-extension/src/data/getTreeEventSubscription.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
* Obeo - initial API and implementation
*******************************************************************************/

export const getTreeEventSubscription = (depth: number) => {
export const getTreeEventSubscription = (depth: number, eventType: string, eventInputType: string) => {
const treeChildren = recursiveGetChildren(depth);
const subscription = `
subscription treeEvent($input: TreeEventInput!) {
treeEvent(input: $input) {
subscription ${eventType}($input: ${eventInputType}!) {
${eventType}(input: $input) {
__typename
... on TreeRefreshedEventPayload {
id
Expand Down
30 changes: 24 additions & 6 deletions vscode-extension/src/view/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,23 @@ import {
Selection,
SelectionContextProvider,
} from '@eclipse-sirius/sirius-components-core';
import { DiagramRepresentation } from '@eclipse-sirius/sirius-components-diagrams';
import {
DiagramRepresentation,
NodeTypeContext,
NodeTypeContextValue,
NodeTypeContribution,
} from '@eclipse-sirius/sirius-components-diagrams';
import { FormDescriptionEditorRepresentation } from '@eclipse-sirius/sirius-components-formdescriptioneditors';
import { FormRepresentation } from '@eclipse-sirius/sirius-components-forms';
import { DetailsView } from '@eclipse-sirius/sirius-web-application';
import { Theme, ThemeProvider } from '@mui/material';
import React, { useEffect, useState } from 'react';
import './reset.css';
import { EllipseNode } from './nodes/EllipseNode';
import { EllipseNodeConverter } from './nodes/EllipseNodeConverter';
import { EllipseNodeLayoutHandler } from './nodes/EllipseNodeLayoutHandler';
import { siriusWebTheme as defaultTheme } from './theme/siriusWebTheme';

import './reset.css';
import './variables.css';

interface AppState {
Expand Down Expand Up @@ -146,14 +155,23 @@ export const App = ({
};
component = <DetailsView editingContextId={state.editingContextId} readOnly={false} />;
}

const nodeTypeRegistryValue: NodeTypeContextValue = {
nodeLayoutHandlers: [new EllipseNodeLayoutHandler()],
nodeConverters: [new EllipseNodeConverter()],
nodeTypeContributions: [<NodeTypeContribution component={EllipseNode as any} type={'ellipseNode'} />],
};

return (
<ThemeProvider theme={siriusWebTheme}>
<SelectionContextProvider initialSelection={selection}>
<ConfirmationDialogContextProvider>
<div style={appStyle}>
<div style={headerStyle}></div>
{state.editingContextId && state.authenticate ? <div style={componentStyle}>{component}</div> : null}
</div>
<NodeTypeContext.Provider value={nodeTypeRegistryValue}>
<div style={appStyle}>
<div style={headerStyle}></div>
{state.editingContextId && state.authenticate ? <div style={componentStyle}>{component}</div> : null}
</div>
</NodeTypeContext.Provider>
</ConfirmationDialogContextProvider>
</SelectionContextProvider>
</ThemeProvider>
Expand Down
39 changes: 32 additions & 7 deletions vscode-extension/src/view/app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,23 @@ import { ApolloClient, ApolloProvider, DefaultOptions, HttpLink, InMemoryCache,
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import { ExtensionProvider, ServerContext } from '@eclipse-sirius/sirius-components-core';
import { referenceWidgetDocumentTransform } from '@eclipse-sirius/sirius-web-application';
import {
DiagramDialogContribution,
diagramDialogContributionExtensionPoint,
} from '@eclipse-sirius/sirius-components-diagrams';
import { SelectionDialog } from '@eclipse-sirius/sirius-components-selection';
import {
ellipseNodeStyleDocumentTransform,
referenceWidgetDocumentTransform,
} from '@eclipse-sirius/sirius-web-application';
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import './index.css';
import { defaultExtensionRegistry } from './registry/DefaultExtensionRegistry';
import { ToastProvider } from './toast/ToastProvider';

import './index.css';

declare global {
interface Window {
acquireVsCodeApi(): any;
Expand Down Expand Up @@ -81,10 +90,27 @@ const ApolloGraphQLClient = new ApolloClient({
link: splitLink,
cache: new InMemoryCache({ addTypename: true }),
defaultOptions,
documentTransform: referenceWidgetDocumentTransform,
documentTransform: referenceWidgetDocumentTransform.concat(ellipseNodeStyleDocumentTransform),
});

const diagramDialogContributions: DiagramDialogContribution[] = [
{
canHandle: (dialogDescriptionId: string) => {
return dialogDescriptionId.startsWith('siriusComponents://selectionDialogDescription');
},
component: SelectionDialog,
},
];

defaultExtensionRegistry.putData<DiagramDialogContribution[]>(diagramDialogContributionExtensionPoint, {
identifier: `siriusweb_${diagramDialogContributionExtensionPoint.identifier}`,
data: diagramDialogContributions,
});

ReactDOM.render(
const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
<ExtensionProvider registry={defaultExtensionRegistry}>
<ServerContext.Provider value={value}>
<ApolloProvider client={ApolloGraphQLClient}>
Expand All @@ -101,6 +127,5 @@ ReactDOM.render(
</ToastProvider>
</ApolloProvider>
</ServerContext.Provider>
</ExtensionProvider>,
document.getElementById('root')
</ExtensionProvider>
);
121 changes: 121 additions & 0 deletions vscode-extension/src/view/app/nodes/EllipseNode.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/*******************************************************************************
* Copyright (c) 2023, 2024 Obeo.
* This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v2.0
* which accompanies this distribution, and is available at
* https://www.eclipse.org/legal/epl-2.0/
*
* SPDX-License-Identifier: EPL-2.0
*
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/

import { getCSSColor } from '@eclipse-sirius/sirius-components-core';
import {
ConnectionCreationHandles,
ConnectionHandles,
ConnectionTargetHandle,
DiagramContext,
DiagramContextValue,
DiagramElementPalette,
Label,
useConnectorNodeStyle,
useDrop,
useDropNodeStyle,
useRefreshConnectionHandles,
} from '@eclipse-sirius/sirius-components-diagrams';
import { Theme, useTheme } from '@mui/material/styles';
import { Node, NodeProps, NodeResizer } from '@xyflow/react';
import React, { memo, useContext } from 'react';
import { EllipseNodeData, NodeComponentsMap } from './EllipseNode.types';

const ellipseNodeStyle = (
theme: Theme,
style: React.CSSProperties,
selected: boolean,
hovered: boolean,
faded: boolean
): React.CSSProperties => {
const ellipseNodeStyle: React.CSSProperties = {
display: 'flex',
padding: '8px',
width: '100%',
height: '100%',
borderRadius: '50%',
border: 'black solid 1px',
opacity: faded ? '0.4' : '',
...style,
background: getCSSColor(String(style.background), theme),
};

if (selected || hovered) {
ellipseNodeStyle.outline = `${theme.palette.selected} solid 1px`;
}

return ellipseNodeStyle;
};

const resizeLineStyle = (theme: Theme): React.CSSProperties => {
return { borderWidth: theme.spacing(0.15) };
};

const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
return {
width: theme.spacing(1),
height: theme.spacing(1),
borderRadius: '100%',
};
};

export const EllipseNode: NodeComponentsMap['ellipseNode'] = memo(
({ data, id, selected, dragging }: NodeProps<Node<EllipseNodeData>>) => {
const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
const theme = useTheme();
const { onDrop, onDragOver } = useDrop();
const { style: connectionFeedbackStyle } = useConnectorNodeStyle(id, data.nodeDescription.id);
const { style: dropFeedbackStyle } = useDropNodeStyle(data.isDropNodeTarget, data.isDropNodeCandidate, dragging);

const handleOnDrop = (event: React.DragEvent) => {
onDrop(event, id);
};

useRefreshConnectionHandles(id, data.connectionHandles);

return (
<>
{data.nodeDescription?.userResizable !== 'NONE' && !readOnly ? (
<NodeResizer
handleStyle={{ ...resizeHandleStyle(theme) }}
lineStyle={{ ...resizeLineStyle(theme) }}
color={theme.palette.selected}
isVisible={!!selected}
shouldResize={() => !data.isBorderNode}
keepAspectRatio={data.nodeDescription?.keepAspectRatio}
/>
) : null}
<div
style={{
...ellipseNodeStyle(theme, data.style, !!selected, data.isHovered, data.faded),
...connectionFeedbackStyle,
...dropFeedbackStyle,
}}
onDragOver={onDragOver}
onDrop={handleOnDrop}
data-testid={`Ellipse - ${data?.insideLabel?.text}`}>
{data.insideLabel ? <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} /> : null}
{!!selected ? (
<DiagramElementPalette
diagramElementId={id}
targetObjectId={data.targetObjectId}
labelId={data.insideLabel ? data.insideLabel.id : null}
/>
) : null}
{!!selected ? <ConnectionCreationHandles nodeId={id} /> : null}
<ConnectionTargetHandle nodeId={id} nodeDescription={data.nodeDescription} isHovered={data.isHovered} />
<ConnectionHandles connectionHandles={data.connectionHandles} />
</div>
</>
);
}
);
31 changes: 31 additions & 0 deletions vscode-extension/src/view/app/nodes/EllipseNode.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*******************************************************************************
* Copyright (c) 2023, 2024 Obeo.
* This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v2.0
* which accompanies this distribution, and is available at
* https://www.eclipse.org/legal/epl-2.0/
*
* SPDX-License-Identifier: EPL-2.0
*
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
import { GQLNodeStyle, NodeData } from '@eclipse-sirius/sirius-components-diagrams';
import { Node, NodeProps } from '@xyflow/react';
import { FC } from 'react';

export interface EllipseNodeData extends NodeData {}

export interface GQLEllipseNodeStyle extends GQLNodeStyle {
background: string;
borderColor: string;
borderStyle: string;
borderSize: string;
}

export interface NodeDataMap {
ellipseNode: EllipseNodeData;
}
export type NodeComponentsMap = {
[K in keyof NodeDataMap]: FC<NodeProps<Node<NodeDataMap[K], K>>>;
};
Loading

0 comments on commit 6269f32

Please sign in to comment.