From c2e2f1c57f3f225ca738a0f4a7a46aa10be12440 Mon Sep 17 00:00:00 2001 From: Imran Farhat Date: Wed, 17 Jun 2026 16:15:25 +0530 Subject: [PATCH] fix: update canvas label immediately after editing component value Component value label on the canvas did not update after using SET PARAMETERS in the Component Properties panel. The Redux state was updated, but nothing told mxGraph to refresh the displayed cell label. A previous attempt at fixing this called model.setValue() with just the raw VALUE field, which did make the canvas update immediately, but replaced the entire label (e.g. 'R1\n1k' became just '10k'), losing the component name. The canvas label is actually built from per-component-type rules (plain VALUE for R/L/C, 'DC value' phrasing only affects the netlist string not the label, no value line at all for transistors/MOSFETs, EXTRA_EXPRESSION appended with a space, etc), and that logic already existed inside buildNetlistFromGraph() in NetlistExporter.js, just duplicated across every branch. Fix: - Extracted the label-building rules into a single shared function, buildComponentCanvasLabel(baseName, properties) - buildNetlistFromGraph() now calls this function once instead of repeating 'component.value = component.value + ...' in 7 places - ComponentProperties.js's setProps() now looks up the edited cell directly via the graph model (not via canvas selection, which can be stale or include unrelated cells), splits its current label to preserve the base name, calls the shared function to rebuild the value portion, and applies it via model.setValue() - Added a small getGraph() export from ComponentDrag.js so ComponentProperties.js can access the live graph instance Testing: - Resistor: edited VALUE, canvas immediately shows 'R1' / new value on two lines, name preserved - Capacitor: same, name preserved - Voltage source (PWL waveform): edited VALUE, canvas immediately shows 'V1' / new waveform expression, name preserved - Generated a netlist after these edits: output is correct and unaffected by the refactor (same SPICE syntax as before) --- .../SchematicEditor/ComponentProperties.js | 18 +++++++++ .../SchematicEditor/Helper/ComponentDrag.js | 1 + .../SchematicEditor/Helper/NetlistExporter.js | 37 +++++++++++++++---- 3 files changed, 49 insertions(+), 7 deletions(-) diff --git a/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/eda-frontend/src/components/SchematicEditor/ComponentProperties.js index 80eb4423a..ad667c564 100644 --- a/eda-frontend/src/components/SchematicEditor/ComponentProperties.js +++ b/eda-frontend/src/components/SchematicEditor/ComponentProperties.js @@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { setCompProperties } from '../../redux/actions/index' +import { getGraph } from './Helper/ComponentDrag' +import { buildComponentCanvasLabel } from './Helper/NetlistExporter' import Draggable from 'react-draggable' import { List, ListItem, ListItemText, Button, TextField, TextareaAutosize, Paper } from '@material-ui/core' @@ -58,6 +60,22 @@ export default function ComponentProperties () { const setProps = () => { dispatch(setCompProperties(id, val)) + const graph = getGraph() + if (graph) { + const model = graph.getModel() + const cell = model.cells[id] + if (cell && cell.vertex && cell.CellType === 'Component') { + const currentLabel = (cell.value || '').toString() + const baseName = currentLabel.split('\n')[0] + const newLabel = buildComponentCanvasLabel(baseName, val) + model.beginUpdate() + try { + model.setValue(cell, newLabel) + } finally { + model.endUpdate() + } + } + } } return ( diff --git a/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js index 6e1fa4c58..4e21cf4a2 100644 --- a/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js +++ b/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js @@ -15,6 +15,7 @@ import { SideBar, magneticSnap } from './SideBar.js' import KiCadFileUtils from './KiCadFileUtils' var graph +export function getGraph () { return graph } const { mxGraph, diff --git a/eda-frontend/src/components/SchematicEditor/Helper/NetlistExporter.js b/eda-frontend/src/components/SchematicEditor/Helper/NetlistExporter.js index 1e31b7f88..ca497297a 100644 --- a/eda-frontend/src/components/SchematicEditor/Helper/NetlistExporter.js +++ b/eda-frontend/src/components/SchematicEditor/Helper/NetlistExporter.js @@ -337,6 +337,35 @@ export function annotate (graph) { return list } +// Builds the canvas display label for a component (e.g. "R1\n1k") from its +// base name (e.g. "R1") and properties, mirroring the same value-display +// rules used when generating the netlist, so editing a component's value +// via the Properties panel and generating a netlist always produce the +// same label. +export function buildComponentCanvasLabel (baseName, properties) { + let label = baseName + const prefixChar = (properties.PREFIX || '').charAt(0).toLowerCase() + if (prefixChar === 'v' || prefixChar === 'i') { + if (properties.NAME !== 'SINE' && properties.NAME !== 'EXP' && properties.NAME !== 'PULSE') { + if (properties.VALUE !== undefined) { + label = label + '\n' + properties.VALUE + } + } + } else if (prefixChar === 'c' || prefixChar === 'l' || prefixChar === 'r') { + label = label + '\n' + properties.VALUE + } else if (prefixChar === 'm' || prefixChar === 'q') { + // MOSFETs and transistors do not show a value line on canvas + } else { + if (properties.VALUE !== undefined) { + label = label + '\n' + properties.VALUE + } + } + if (properties.EXTRA_EXPRESSION && properties.EXTRA_EXPRESSION.length > 0) { + label = label + ' ' + properties.EXTRA_EXPRESSION + } + return label +} + /** * Builds SPICE netlist text from mxGraph instance @@ -444,14 +473,12 @@ export function buildNetlistFromGraph (graph) { } else if (comp.NAME === 'DC') { if (component.properties.VALUE !== undefined) { k = k + ' DC ' + component.properties.VALUE - component.value = component.value + '\n' + component.properties.VALUE } } else if (comp.NAME === 'PULSE') { k = k + ` PULSE(${comp.INITIAL_VALUE} ${comp.PULSED_VALUE} ${comp.DELAY_TIME} ${comp.RISE_TIME} ${comp.FALL_TIME} ${comp.PULSE_WIDTH} ${comp.PERIOD} ${comp.PHASE} )` } else { if (component.properties.VALUE !== undefined) { k = k + ' ' + component.properties.VALUE - component.value = component.value + '\n' + component.properties.VALUE } } } else if (component.properties.PREFIX.charAt(0) === 'C' || component.properties.PREFIX.charAt(0) === 'c') { @@ -459,7 +486,6 @@ export function buildNetlistFromGraph (graph) { if (component.properties.IC != 0) { k = k + ' IC=' + component.properties.IC } - component.value = component.value + '\n' + component.properties.VALUE } else if (component.properties.PREFIX.charAt(0) === 'L' || component.properties.PREFIX.charAt(0) === 'l') { k = k + ' ' + component.properties.VALUE if (component.properties.IC != 0) { @@ -468,7 +494,6 @@ export function buildNetlistFromGraph (graph) { if (component.properties.DTEMP != 27) { k = k + ' dtemp=' + component.properties.DTEMP } - component.value = component.value + '\n' + component.properties.VALUE } else if (component.properties.PREFIX.charAt(0) === 'M' || component.properties.PREFIX.charAt(0) === 'm') { if (component.properties.MULTIPLICITY_PARAMETER != 1) { k = k + ' m=' + component.properties.MULTIPLICITY_PARAMETER @@ -497,18 +522,16 @@ export function buildNetlistFromGraph (graph) { if (component.properties.PARAMETER_MEASUREMENT_TEMPERATURE != 27) { k = k + ' TNOM=' + component.properties.PARAMETER_MEASUREMENT_TEMPERATURE } - component.value = component.value + '\n' + component.properties.VALUE } else { if (component.properties.VALUE !== undefined) { k = k + ' ' + component.properties.VALUE - component.value = component.value + '\n' + component.properties.VALUE } } if (component.properties.EXTRA_EXPRESSION && component.properties.EXTRA_EXPRESSION.length > 0) { k = k + ' ' + component.properties.EXTRA_EXPRESSION - component.value = component.value + ' ' + component.properties.EXTRA_EXPRESSION } + component.value = buildComponentCanvasLabel(component.value, component.properties) if (component.properties.MODEL && component.properties.MODEL.length > 0) { spiceModels += component.properties.MODEL + '\n'