diff --git a/extensions/crossmodel-lang/src/glsp-server/system-diagram/model/nodes.ts b/extensions/crossmodel-lang/src/glsp-server/system-diagram/model/nodes.ts index cfca3826..0a593984 100644 --- a/extensions/crossmodel-lang/src/glsp-server/system-diagram/model/nodes.ts +++ b/extensions/crossmodel-lang/src/glsp-server/system-diagram/model/nodes.ts @@ -37,7 +37,8 @@ export class GEntityNodeBuilder extends GNodeBuilder { const attributesCompartment = new AttributesCompartmentBuilder().set(this.proxy.id); for (const attribute of attributes) { const attributeNode = AttributeCompartment.builder().set(attribute, index); - attributeNode.addArg('identifier', attribute.identifier); + // increase padding left and right so we have space for the identifier icon + attributeNode.addArg('identifier', attribute.identifier).addLayoutOption('paddingLeft', 8).addLayoutOption('paddingRight', 8); attributesCompartment.add(attributeNode.build()); } this.add(attributesCompartment.build()); diff --git a/packages/glsp-client/src/browser/views.tsx b/packages/glsp-client/src/browser/views.tsx index 14bb030e..11cab6b6 100644 --- a/packages/glsp-client/src/browser/views.tsx +++ b/packages/glsp-client/src/browser/views.tsx @@ -2,6 +2,7 @@ * Copyright (c) 2024 CrossBreeze. ********************************************************************************/ /* eslint-disable react/no-unknown-property */ +/* eslint-disable max-len */ import { GCompartmentView, RenderingContext, RoundedCornerNodeView, RoundedCornerWrapper, svg } from '@eclipse-glsp/client'; import { ReactNode } from '@theia/core/shared/react'; @@ -37,16 +38,13 @@ export class AttributeCompartmentView extends GCompartmentView { width={Math.max(compartment.size.width, 0)} height={Math.max(compartment.size.height, 0)} > - {context.renderChildren(compartment) as ReactNode} {compartment.args?.identifier && ( - + )} + {context.renderChildren(compartment) as ReactNode} ) as any; diff --git a/packages/glsp-client/style/diagram.css b/packages/glsp-client/style/diagram.css index 76eb2edb..d1d88ec2 100644 --- a/packages/glsp-client/style/diagram.css +++ b/packages/glsp-client/style/diagram.css @@ -138,3 +138,8 @@ .command-palette { animation: none; } + +.attribute.identifier .icon-path { + transform: scale(0.0105) translate(-400px, 1375px); + fill: #000; +} diff --git a/packages/react-model-ui/src/views/common/Icons.tsx b/packages/react-model-ui/src/views/common/Icons.tsx index 1abbe829..fd810265 100644 --- a/packages/react-model-ui/src/views/common/Icons.tsx +++ b/packages/react-model-ui/src/views/common/Icons.tsx @@ -10,7 +10,7 @@ export const KeyIcon: React.FC = props => ( // Exported from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:key_vertical:FILL@0;wght@400;GRAD@0;opsz@48&icon.query=key&icon.size=null&icon.color=%235f6368 // It seems that the browser scales nicer if we do not provide a size in the SVG export // ViewBox property comes from the export - + );