From b16fb0a735e2a2e9c5a0c982486e6514ae8eb480 Mon Sep 17 00:00:00 2001 From: Daniel Chang Date: Mon, 9 Dec 2024 16:10:11 -0500 Subject: [PATCH] Petri renderer refactor (#5788) --- .../src/assets/css/theme/_variables.scss | 10 --- .../petrinet/nested-petrinet-renderer.ts | 25 +++--- .../petrinet/petrinet-renderer.ts | 76 +++++-------------- 3 files changed, 35 insertions(+), 76 deletions(-) diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss index 060347a42a..723f81fa41 100644 --- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss +++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss @@ -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}; @@ -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); diff --git a/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts b/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts index 68ce97c5a0..b4622deda5 100644 --- a/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts +++ b/packages/client/hmi-client/src/model-representation/petrinet/nested-petrinet-renderer.ts @@ -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; @@ -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'); @@ -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 @@ -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); @@ -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; @@ -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 = ( @@ -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`); @@ -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); @@ -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 @@ -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); } diff --git a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts index 5d35c0e22f..19fdbe9445 100644 --- a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts +++ b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts @@ -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(); @@ -54,8 +56,8 @@ export class PetrinetRenderer extends BasicRenderer { 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() { @@ -95,8 +97,8 @@ export class PetrinetRenderer extends BasicRenderer { .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'); @@ -110,7 +112,7 @@ export class PetrinetRenderer extends BasicRenderer { .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); @@ -147,7 +149,7 @@ export class PetrinetRenderer extends BasicRenderer { .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 @@ -160,7 +162,7 @@ export class PetrinetRenderer extends BasicRenderer { .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); @@ -176,7 +178,7 @@ export class PetrinetRenderer extends BasicRenderer { .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; @@ -193,9 +195,9 @@ export class PetrinetRenderer extends BasicRenderer { .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 @@ -208,7 +210,7 @@ export class PetrinetRenderer extends BasicRenderer { .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); } @@ -246,10 +248,10 @@ export class PetrinetRenderer extends BasicRenderer { .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); } }); @@ -274,22 +276,14 @@ export class PetrinetRenderer extends BasicRenderer { .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) { - selection.selectAll('path').style('stroke-width', 3); - } - - deselectEdge(selection: D3SelectionIEdge) { - selection.selectAll('path').style('stroke-width', 2); - } - resetOpacity() { this?.chart?.selectAll('.node-ui, .edge').style('opacity', 1); } @@ -298,13 +292,6 @@ export class PetrinetRenderer extends BasicRenderer { 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); - } - } - toggleNodeSelection(selection: D3SelectionINode) { if (this.nodeSelection && this.nodeSelection.datum().id === selection.datum().id) { this.resetOpacity(); @@ -315,11 +302,6 @@ export class PetrinetRenderer extends BasicRenderer { selection.style('opacity', 1); this.nodeSelection = selection; } - - if (this.edgeSelection) { - this.deselectEdge(this.edgeSelection); - this.edgeSelection = null; - } } postRenderProcess() { @@ -375,13 +357,13 @@ export class PetrinetRenderer extends BasicRenderer { .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) => { 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) { @@ -426,25 +408,9 @@ export class PetrinetRenderer extends BasicRenderer { this.toggleNodeSelection(selection); }); - this.on('edge-click', (_eventName, _event, selection: D3SelectionIEdge) => { - 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; }