Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Node Graph Rendering Facelift #288

Merged
merged 5 commits into from
Feb 7, 2024
+1,138 −1,139
Merged

Node Graph Rendering Facelift #288

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
26a0f3b
Add slight shadows to nodes and links and use port types as the ports
treo Feb 7, 2024
37846c4
Change Background to dotted
treo Feb 7, 2024
cacfc1c
Facelift for Ports
treo Feb 7, 2024
dc12f6d
Trigger hover state on ports when their link is hovered
treo Feb 7, 2024
d0731d6
Add workaround to not render arguments as triangle ports
treo Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -64,6 +64,7 @@
"@jupyterlab/settingregistry": "^4.0.0",
"@projectstorm/geometry": "^7.0.2",
"@projectstorm/react-diagrams": "^7.0.3",
"colorjs.io": "^0.4.5",
"marked": "^11.0.0",
"react-accessible-accordion": "^5.0.0",
"react-numeric-input": "^2.2.3",
19 changes: 19 additions & 0 deletions src/components/link/CustomLinkFactory.tsx
View file
Original file line number Diff line number Diff line change
@@ -24,13 +24,28 @@ namespace S {
fill: none;
pointer-events: auto;
filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 40%)) opacity(60%);
body.low-powered-mode & {
animation: none !important;
}
`;
}

function addHover(model: TriangleLinkModel | ParameterLinkModel){
return (() => {
document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div`).classList.add("hover");
document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div`).classList.add("hover");
});
}

function removeHover(model: TriangleLinkModel | ParameterLinkModel){
return () => {
document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div`).classList.remove("hover");
document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div`).classList.remove("hover");
}
}

export class ParameterLinkFactory extends DefaultLinkFactory {
constructor() {
super('parameter-link');
@@ -43,6 +58,8 @@ export class ParameterLinkFactory extends DefaultLinkFactory {
generateLinkSegment(model: ParameterLinkModel, selected: boolean, path: string) {
return (
<S.Path
onMouseOver={addHover(model)}
onMouseOut={removeHover(model)}
selected={selected}
stroke={selected ? 'yellow' : model.getOptions().color}
strokeWidth={model.getOptions().width}
@@ -64,6 +81,8 @@ export class TriangleLinkFactory extends DefaultLinkFactory {
generateLinkSegment(model: TriangleLinkModel, selected: boolean, path: string) {
return (
<S.Path
onMouseOver={addHover(model)}
onMouseOut={removeHover(model)}
selected={!selected}
stroke={!selected ? model.getOptions().selectedColor : 'yellow'}
strokeWidth={model.getOptions().width}
13 changes: 10 additions & 3 deletions src/components/node/CustomNodeWidget.tsx
View file
Original file line number Diff line number Diff line change
@@ -13,25 +13,32 @@ import { showFormDialog } from '../../dialog/FormDialog';
import { CommentDialog } from '../../dialog/CommentDialog';
import ReactTooltip from "react-tooltip"
import { marked } from 'marked';
import Color from 'colorjs.io';

var S;
(function (S) {
S.Node = styled.div<{ borderColor:string,background: string; selected: boolean; }>`
background-color: ${(p) => p.background};
background-color: ${(p) => {
const color = new Color(p.background);
color.alpha = 0.75;
color.oklch.c *= 1.2;
return color.to('oklch').toString();
}};
box-shadow: 1px 1px 10px ${(p) => p.selected ? '3px rgb(0 192 255 / 0.5)' : '0px rgb(0 0 0 / 0.5)'};
border-radius: 5px;
font-family: sans-serif;
color: white;
border: solid 2px black;
overflow: visible;
font-size: 11px;
border: solid 2px ${(p) => (p.selected ? (p.borderColor==undefined? 'rgb(0,192,255)': p.borderColor ):'black')};
border: solid 1px ${(p) => (p.selected ? (p.borderColor==undefined? 'rgb(0,192,255)': p.borderColor ):'black')};
`;

S.Title = styled.div`
background: rgba(0, 0, 0, 0.3);
display: flex;
white-space: nowrap;
justify-items: center;
box-shadow: inset 0 -2px 4px 0 rgb(0 0 0 / 0.05);
`;

S.TitleName = styled.div`
70 changes: 57 additions & 13 deletions src/components/port/CustomPortLabel.tsx
View file
Original file line number Diff line number Diff line change
@@ -25,13 +25,20 @@ namespace S {
`;

export const SymbolContainer = styled.div<{ symbolType: string; selected: boolean; isOutPort: boolean }>`
width: 17px;
width: 15px;
height: 15px;
border: 5px hidden;
background: ${(p) => (p.selected ? 'white' : 'rgba(0, 0, 0, 0.2)')};
background: ${(p) => (p.selected ? 'oklch(1 0 0 / 0.5)' : 'rgba(0, 0, 0, 0.2)')};
border-radius: ${(p) => (p.isOutPort ? '20px 0px 0px 20px' : '0px 20px 20px 0px')} ;
display: ${(p) => p.symbolType == null ? 'none' : 'visible'};
text-align: center;
box-shadow: inset 0 2px 4px ${(p) => (p.selected ? 'rgb(0 0 0 / 0.05)' : 'rgb(0 0 0 / 0.01)')} ;
border: 1px solid oklch(0 0 0 / 0.2);
padding: 0 2px;
margin: 2px 0;
&:hover, &.hover {
background: rgb(192, 255, 0);
box-shadow: ${(p) => p.selected ? '' : 'inset'} 0 4px 8px rgb(0 0 0 / 0.5);
}
`;

export const Symbol = styled.div<{ isOutPort: boolean }>`
@@ -42,12 +49,29 @@ namespace S {
padding:${(p) => (p.isOutPort ? '2px 0px 0px 2px' : '2px 2px 0px 0px')};
`;

export const Port = styled.div`
export const Port = styled.div<{ isOutPort: boolean, hasLinks: boolean }>`
width: 15px;
height: 15px;
background: rgba(255, 255, 255, 0.2);
&:hover {
background: ${(p) => p.hasLinks ? 'oklch(1 0 0 / 0.5)' : 'oklch(0 0 0 / 0.2)'};
color: ${(p) => p.hasLinks ? 'oklch(0 0 0 / 0.8)' : 'oklch(1 0 0 / 0.8)'};
border: 1px solid oklch(0 0 0 / 0.2);
border-radius: ${(p) => (p.isOutPort ? '20px 0px 0px 20px' : '0px 20px 20px 0px')} ;
box-shadow: ${(p) => p.hasLinks ? '' : 'inset'} 0 2px 4px ${(p) => (p.hasLinks ? 'rgb(0 0 0 / 0.1)' : 'rgb(0 0 0 / 0.05)')} ;
display: flex;
justify-content: center;
align-items: center;
padding: 0 2px;
margin: 2px 0;
&:hover, &.hover {
background: rgb(192, 255, 0);
box-shadow: ${(p) => p.hasLinks ? '' : 'inset'} 0 4px 8px rgb(0 0 0 / 0.5);
}
& svg {
stroke-width: 3;
stroke: currentColor;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
`;
}
@@ -93,10 +117,27 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
symbolLabel = '◎';
}

const isIn = !!this.props.port.getOptions().in
const hasLinks = Object.keys(this.props.port.getLinks()).length > 0;
const isTrianglePort = this.props.port.getOptions().label.indexOf('▶') >= 0 &&
/* Workaround for Arguments being set up as triangle ports in other places */
!this.props.node['name'].match('Argument \(.+?\):');

const port = (
<PortWidget engine={this.props.engine} port={this.props.port}>
<S.Port />
</PortWidget>
<S.Port isOutPort={!isIn} hasLinks={hasLinks}>
{!isTrianglePort ? null : (isIn ?
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" >
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 12h12" />
<path d="M11 8l4 4l-4 4" />
<path d="M12 21a9 9 0 0 0 0 -18" />
</svg> : <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 12h12" />
<path d="M17 16l4 -4l-4 -4" />
<path d="M12 3a9 9 0 1 0 0 18" />
</svg>)}
</S.Port>
);

const propLinks = this.props.port.links;
@@ -105,6 +146,7 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
portHasLink = true;
}


const symbol = (
<S.SymbolContainer symbolType={symbolLabel} selected={portHasLink} isOutPort={isOutPort}>
<S.Symbol isOutPort={isOutPort}>
@@ -116,14 +158,16 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {

const label = (
<S.Label style={{ textAlign: (!this.props.port.getOptions().in && this.props.port.getOptions().label === '▶') ? 'right' : 'left' }}>
{nodeType === "Literal Secret" ? "*****" : this.props.port.getOptions().label}
{nodeType === "Literal Secret" ? "*****" : this.props.port.getOptions().label.replace('▶', '').trim()}
</S.Label>);

return (
<S.PortLabel>
{this.props.port.getOptions().in ? port : label}
{symbol}
{this.props.port.getOptions().in ? label : port}
{this.props.port.getOptions().in ? null : label}
<PortWidget engine={this.props.engine} port={this.props.port}>
{symbolLabel == null ? port : symbol}
</PortWidget>
{this.props.port.getOptions().in ? label : null}
</S.PortLabel>
);
}
31 changes: 5 additions & 26 deletions src/helpers/XircuitsCanvasWidget.tsx
View file
Original file line number Diff line number Diff line change
@@ -11,7 +11,6 @@ export interface XircuitsCanvasWidgetProps {
export const Container = styled.div<{ color: string; background: string }>`
height: 100%;
background-color: ${(p) => p.background};
background-size: 50px 50px;
display: flex;
width : 15360px; // Prevent Dev tool effects on smaller monitors
@@ -20,38 +19,18 @@ export interface XircuitsCanvasWidgetProps {
min-height: 100%;
width: 100%;
}
background-image: linear-gradient(
0deg,
transparent 24%,
${(p) => p.color} 25%,
${(p) => p.color} 26%,
transparent 27%,
transparent 74%,
${(p) => p.color} 75%,
${(p) => p.color} 76%,
transparent 77%,
transparent
),
linear-gradient(
90deg,
transparent 24%,
${(p) => p.color} 25%,
${(p) => p.color} 26%,
transparent 27%,
transparent 74%,
${(p) => p.color} 75%,
${(p) => p.color} 76%,
transparent 77%,
transparent
);
background-image: radial-gradient(oklch(40% 0% 0) 1px, transparent 0);
background-size: 15px 15px;
background-position: -19px -19px;
`;
//}

export class XircuitsCanvasWidget extends React.Component<XircuitsCanvasWidgetProps> {
render() {
return (
<Container
background={this.props.background || 'rgb(60, 60, 60)'}
background={this.props.background || 'oklch(0.3 0.01 300 / 1)'}
color={this.props.color || 'rgba(255,255,255, 0.05)'}>
{this.props.children}
</Container>
2,143 changes: 1,046 additions & 1,097 deletions yarn.lock
View file

Large diffs are not rendered by default.