Skip to content

Commit

Permalink
Petri renderer refactor (#5788)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mwdchang
mwdchang authored Dec 9, 2024
1 parent 0e8d30d commit b16fb0a
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 76 deletions.
10 changes: 0 additions & 10 deletions packages/client/hmi-client/src/assets/css/theme/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -864,12 +864,6 @@ $imagePreviewActionIconHeight: 3rem !default;
$imagePreviewActionIconFontSize: 1.5rem !default;
$imagePreviewActionIconBorderRadius: 50% !default;

//petrinet
$petri-nodeBorder: var(--gray-500);
$petri-nodeFill: var(--gray-500);
$petri-lineColor: var(--gray-700);
$petri-inputBox: var(--surface-0);

:root {
--editing-color: rgb(238, 238, 136);
--border-radius-small: #{$smallBorderRadius};
Expand Down Expand Up @@ -964,10 +958,6 @@ $petri-inputBox: var(--surface-0);
--text-color-danger: #{$dangerTextButton};
--constrain-width: 55rem;
color-scheme: light;
--petri-nodeBorder: var(--gray-300);
--petri-nodeFill: var(--gray-300);
--petri-lineColor: #{$petri-lineColor};
--petri-inputBox: #{$petri-inputBox};
--port-base-size: 8px;
--overlay-menu-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
--overlay-menu-shadow-hover: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
Expand Down
25 changes: 14 additions & 11 deletions packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const FONT_SIZE_SMALL = 18;
const FONT_SIZE_REGULAR = 24;
const FONT_SIZE_LARGE = 36;

const NODE_COLOR = '#E0E0E0';
const TEXT_COLOR = 'rgb(16, 24, 40)';

function setFontSize(label: string) {
if (label.length < 3) {
return FONT_SIZE_LARGE;
Expand Down Expand Up @@ -104,7 +107,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.classed('shape selectableNode', true)
.attr('r', (d) => 0.55 * d.width)
.attr('fill', (d) => (d.data.strataType ? getNodeTypeColor(d.data.strataType) : getNestedTypeColor('base')))
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1)
.style('cursor', 'pointer');

Expand All @@ -118,9 +121,9 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.attr('x', (d) => -d.width * 0.5)
.attr('rx', '6')
.attr('ry', '6')
.style('fill', (d) => (d.data.strataType ? getNodeTypeColor(d.data.strataType) : 'var(--petri-nodeFill'))
.style('fill', (d) => (d.data.strataType ? getNodeTypeColor(d.data.strataType) : NODE_COLOR))
.style('cursor', 'pointer')
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1);

// transitions label text
Expand All @@ -133,7 +136,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.style('font-size', (d) => setFontSize(d.id))
.style('stroke', '#FFF')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.html((d) => d.id);

Expand All @@ -149,7 +152,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.style('stroke', '#FFF')
.style('stroke-width', '3px')
.style('stroke-linecap', 'butt')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.html((d) => {
if (d.data.expression) return d.data.expression;
Expand All @@ -168,7 +171,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
// .attr('ry', 6)
.style('fill', (d) => (d.data.strataType ? getNodeTypeColor(d.data.strataType) : '#ffffff'))
.style('cursor', 'pointer')
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1);

const renderNestedNodes = (
Expand Down Expand Up @@ -197,7 +200,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.attr('stroke-width', '0.5px')
.style('text-anchor', 'middle')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary)')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.text(`${nestedNodesLen} groups`);

Expand Down Expand Up @@ -273,7 +276,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.attr('stroke-width', '0.5px')
.style('text-anchor', 'middle')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary)')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.style('text-shadow', '1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff')
.text((d) => d.id);
Expand All @@ -288,9 +291,9 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.attr('x', (d) => -d.width * 0.5)
.attr('rx', '6')
.attr('ry', '6')
.style('fill', 'var(--petri-nodeFill)')
.style('fill', NODE_COLOR)
.style('cursor', 'pointer')
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1);

// observables text
Expand All @@ -303,7 +306,7 @@ export class NestedPetrinetRenderer extends PetrinetRenderer {
.style('font-size', (d) => setFontSize(d.id))
.style('stroke', '#FFF')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.text((d) => d.id);
}
Expand Down
76 changes: 21 additions & 55 deletions packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,10 @@ const pathFn = d3
.y((d) => d.y)
.curve(d3.curveBasis);

const EDGE_COLOR = 'var(--petri-lineColor)';
const HIGHLIGHTEDSTROKECOLOUR = 'var(--primary-color)';
const TEXT_COLOR = 'rgb(16, 24, 40)';
const EDGE_COLOR = '#616161';
const NODE_COLOR = '#E0E0E0';
const HIGHLIGHTEDSTROKECOLOUR = '#1B8073';
const EDGE_OPACITY = 0.5;

const { getNodeTypeColor } = useNodeTypeColorPalette();
Expand All @@ -54,8 +56,8 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {

d3.select(this.svgEl)
.style('border', '4px solid transparent')
.style('background', 'var(--surface-0')
.style('border-radius', 'var(--border-radius) 0px 0px var(--border-radius)');
.style('background', '#ffffff')
.style('border-radius', '4px 0px 0px 4px');
}

setupDefs() {
Expand Down Expand Up @@ -95,8 +97,8 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.append('circle')
.classed('shape selectableNode', true)
.attr('r', (d) => 0.55 * d.width)
.attr('fill', (d) => (d.data.strataType ? getNodeTypeColor(d.data.strataType) : 'var(--petri-nodeFill)'))
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('fill', (d) => (d.data.strataType ? getNodeTypeColor(d.data.strataType) : NODE_COLOR))
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1)
.style('cursor', 'pointer');

Expand All @@ -110,7 +112,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('font-size', (d) => setFontSize(d.id))
.style('stroke', '#FFF')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.text((d) => d.id);

Expand Down Expand Up @@ -147,7 +149,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('fill', EDGE_COLOR)
.style('fill-opacity', EDGE_OPACITY)
.style('cursor', 'pointer')
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1);

// transitions label text
Expand All @@ -160,7 +162,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('font-size', (d) => setFontSize(d.id))
.style('stroke', '#FFF')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.html((d) => d.id);

Expand All @@ -176,7 +178,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('stroke', '#FFF')
.style('stroke-width', '3px')
.style('stroke-linecap', 'butt')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.html((d) => {
if (d.data.expression) return d.data.expression;
Expand All @@ -193,9 +195,9 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.attr('x', (d) => -d.width * 0.5)
.attr('rx', '6')
.attr('ry', '6')
.style('fill', 'var(--petri-nodeFill)')
.style('fill', NODE_COLOR)
.style('cursor', 'pointer')
.attr('stroke', 'var(--petri-nodeBorder)')
.attr('stroke', NODE_COLOR)
.attr('stroke-width', 1);

// observables text
Expand All @@ -208,7 +210,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('font-size', (d) => setFontSize(d.id))
.style('stroke', '#FFF')
.style('paint-order', 'stroke')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.style('pointer-events', 'none')
.text((d) => d.id);
}
Expand Down Expand Up @@ -246,10 +248,10 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('font-style', 'italic')
.style('font-size', FONT_SIZE_REGULAR)
.style('paint-order', 'stroke')
.style('stroke', 'var(--gray-50)')
.style('stroke', '#fafafa')
.style('stroke-width', '6px')
.style('stroke-linecap', 'butt')
.style('fill', 'var(--text-color-primary)')
.style('fill', TEXT_COLOR)
.text(d.id);
}
});
Expand All @@ -274,22 +276,14 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.style('font-style', 'italic')
.style('font-size', FONT_SIZE_REGULAR)
.style('paint-order', 'stroke')
.style('stroke', 'var(--gray-50)')
.style('stroke', '#fafafa)')
.style('stroke-width', '6px')
.style('stroke-linecap', 'butt')
.style('fill', 'var(--text-color-primary')
.style('fill', TEXT_COLOR)
.text((d) => d.data?.numEdges as number);
});
}

selectEdge(selection: D3SelectionIEdge<EdgeData>) {
selection.selectAll('path').style('stroke-width', 3);
}

deselectEdge(selection: D3SelectionIEdge<EdgeData>) {
selection.selectAll('path').style('stroke-width', 2);
}

resetOpacity() {
this?.chart?.selectAll('.node-ui, .edge').style('opacity', 1);
}
Expand All @@ -298,13 +292,6 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
this?.chart?.selectAll('.node-ui, .edge').style('opacity', 0.3);
}

toggleNodeSelectionByLabel(label: string) {
const selection = this.chart?.selectAll('.node-ui').filter((d: any) => d.label === label);
if (selection?.size() === 1) {
this.toggleNodeSelection(selection as D3SelectionINode<NodeData>);
}
}

toggleNodeSelection(selection: D3SelectionINode<NodeData>) {
if (this.nodeSelection && this.nodeSelection.datum().id === selection.datum().id) {
this.resetOpacity();
Expand All @@ -315,11 +302,6 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
selection.style('opacity', 1);
this.nodeSelection = selection;
}

if (this.edgeSelection) {
this.deselectEdge(this.edgeSelection);
this.edgeSelection = null;
}
}

postRenderProcess() {
Expand Down Expand Up @@ -375,13 +357,13 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
.attr('d', pathFn(line))
.attr('marker-end', 'url(#arrowhead)')
.style('stroke-width', 3)
.style('stroke', 'var(--primary-color)');
.style('stroke', EDGE_COLOR);
});

this.on('node-drag-end', (_eventName, _event, selection: D3SelectionINode<NodeData>) => {
chart?.selectAll('.new-edge').remove();
// reset colour after drag
selection.selectAll('.selectableNode').attr('stroke', 'var(--petri-nodeBorder)');
selection.selectAll('.selectableNode').attr('stroke', NODE_COLOR);

if (!this.isDragEnabled) return;
if (targetData && sourceData) {
Expand Down Expand Up @@ -426,25 +408,9 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
this.toggleNodeSelection(selection);
});

this.on('edge-click', (_eventName, _event, selection: D3SelectionIEdge<EdgeData>) => {
if (this.edgeSelection) {
this.deselectEdge(this.edgeSelection);
}
if (this.nodeSelection) {
this.nodeSelection = null;
}

this.edgeSelection = selection;
this.selectEdge(this.edgeSelection);
});

this.on('background-click', () => {
this.resetOpacity();

if (this.edgeSelection) {
this.deselectEdge(this.edgeSelection);
this.edgeSelection = null;
}
if (this.nodeSelection) {
this.nodeSelection = null;
}
Expand Down

0 comments on commit b16fb0a

Please sign in to comment.