diff --git a/src/components/generic/CanvasWidget/CustomNode/TrustBoundaryNode/TrustBoundaryNodeWidget.tsx b/src/components/generic/CanvasWidget/CustomNode/TrustBoundaryNode/TrustBoundaryNodeWidget.tsx index 3d5ffd8..3ae27f9 100644 --- a/src/components/generic/CanvasWidget/CustomNode/TrustBoundaryNode/TrustBoundaryNodeWidget.tsx +++ b/src/components/generic/CanvasWidget/CustomNode/TrustBoundaryNode/TrustBoundaryNodeWidget.tsx @@ -17,9 +17,7 @@ import * as React from 'react'; import { DraggableData, Rnd } from 'react-rnd'; import TrustBoundaryNodeModel from './TrustBoundaryNodeModel'; -import { - DiagramEngine, -} from '@projectstorm/react-diagrams'; +import { DiagramEngine } from '@projectstorm/react-diagrams'; import { RefObject } from 'react'; const trustBoundaryStyle = { @@ -31,6 +29,27 @@ const trustBoundaryStyle = { zIndex: -100000, }; +const trustBoundarySelectedStyle = { + display: 'flex', + alignItems: 'first baseline', + justifyContent: 'start', + border: 'dashed 2px #56bdf9', + background: 'transparent', + zIndex: -100000, + boxShadow: '0 10px 20px rgba(0,0,0,.1)', + marginTop: '-2px', +}; + +const trustBoundaryOOBStyle = { + display: 'flex', + alignItems: 'first baseline', + justifyContent: 'start', + border: 'dashed 2px #bbbec0', + background: 'transparent', + zIndex: -100000, + marginTop: '-2px', +}; + const trustBoundaryLabelStyle = { border: 'dashed 2px red', background: 'red', @@ -45,6 +64,20 @@ const trustBoundaryLabelStyle = { height: 'fit-content', }; +const trustBoundaryLabelOOBStyle = { + border: 'dashed 2px #bbbec0', + background: '#bbbec0', + filter: 'opacity(60%)', + color: 'black', + fontSize: '9px', + paddingTop: '1px', + paddingBottom: '1px', + paddingLeft: '2px', + paddingRight: '2px', + width: 'fit-content', + height: 'fit-content', +}; + export interface TrustBoundaryNodeWidgetProps { node: TrustBoundaryNodeModel; engine: DiagramEngine; @@ -78,7 +111,7 @@ export class TrustBoundaryNodeWidget extends React.Component -
{this.props.node.name}
+
{this.props.node.name}
); }