matei/tono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

angle node working nicely

Browse Source
This commit is contained in:
matei jordache
2026-03-27 22:51:29 -07:00
parent 3752e1c733
commit ab71688e01
6 changed files with 66 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/AngleMeasureOverlay.jsx
View File

@@ -12,7 +12,7 @@ function clamp01(value) {
return Math.max(0, Math.min(1, Number(value) || 0));
}
function sanitizeHexColor(value, fallback = '#ff0000') {
function sanitizeHexColor(value, fallback = '#ff9800') {
if (typeof value !== 'string') return fallback;
const text = value.trim();
return /^#[0-9a-fA-F]{6}$/.test(text) ? text.toLowerCase() : fallback;
@@ -73,15 +73,14 @@ export default function AngleMeasureOverlay({
labelDy,
angleDeg,
color,
lineThickness,
strokeWidth,
nodeId,
onWidgetChange,
}) {
const containerRef = useRef(null);
const [dragging, setDragging] = useState(null);
const resolvedColor = sanitizeHexColor(color, '#ff0000');
const resolvedLineThickness = Math.max(0.35, Math.min(6, Number(lineThickness) || 1.35));
const resolvedArcThickness = Math.max(0.85, resolvedLineThickness * 0.78);
const resolvedColor = sanitizeHexColor(color, '#ff9800');
const resolvedStrokeWidth = Math.max(0.35, Math.min(6, Number(strokeWidth) || 1.35));
const resolvedArcColor = mixColor(resolvedColor, '#ffffff', 0.42);
const resolvedMidColor = mixColor(resolvedColor, '#ffffff', 0.72);
const resolvedBadgeTextColor = mixColor(resolvedColor, '#ffffff', 0.72);
@@ -166,8 +165,7 @@ export default function AngleMeasureOverlay({
'--angle-mid-handle-color': resolvedMidColor,
'--angle-badge-text-color': resolvedBadgeTextColor,
'--angle-badge-border-color': resolvedBadgeBorderColor,
'--angle-line-thickness': `${resolvedLineThickness}`,
'--angle-arc-thickness': `${resolvedArcThickness}`,
'--angle-stroke-width': `${resolvedStrokeWidth}`,
}}
onPointerMove={onPointerMove}
onPointerUp={onPointerUp}

8
frontend/src/CustomNode.jsx
View File

@@ -1316,10 +1316,10 @@ function CustomNode({ id, data }) {
labelDx={data.widgetValues.label_dx ?? data.overlay.label_dx ?? 0}
labelDy={data.widgetValues.label_dy ?? data.overlay.label_dy ?? 0}
angleDeg={data.overlay.angle_deg}
color={data.widgetValues.color ?? data.overlay.color ?? '#ff0000'}
lineThickness={connectedInputs?.has('line_thickness_input')
? (data.overlay.line_thickness ?? data.widgetValues.line_thickness ?? 1.35)
: (data.widgetValues.line_thickness ?? data.overlay.line_thickness ?? 1.35)}
color={data.widgetValues.color ?? data.overlay.color ?? '#ff9800'}
strokeWidth={connectedInputs?.has('stroke_width')
? (data.overlay.stroke_width ?? data.overlay.line_thickness ?? data.widgetValues.stroke_width ?? 1.35)
: (data.widgetValues.stroke_width ?? data.overlay.stroke_width ?? data.overlay.line_thickness ?? 1.35)}
nodeId={id}
onWidgetChange={ctx.onWidgetChange}
/>

19
frontend/src/styles.css
View File

@@ -933,14 +933,13 @@ html, body, #root {
}
.angle-overlay {
--angle-line-color: #ff0000;
--angle-arc-color: rgb(255, 107, 107);
--angle-end-handle-color: #ff0000;
--angle-mid-handle-color: rgb(255, 184, 184);
--angle-badge-text-color: rgb(255, 184, 184);
--angle-badge-border-color: rgb(255, 82, 82);
--angle-line-thickness: 1.35;
--angle-arc-thickness: 1.05;
--angle-line-color: #ff9800;
--angle-arc-color: rgb(255, 166, 77);
--angle-end-handle-color: #ff9800;
--angle-mid-handle-color: rgb(255, 210, 163);
--angle-badge-text-color: rgb(255, 210, 163);
--angle-badge-border-color: rgb(255, 183, 77);
--angle-stroke-width: 1.35;
position: relative;
overflow: hidden;
user-select: none;
@@ -965,14 +964,14 @@ html, body, #root {
.angle-line {
stroke: var(--angle-line-color);
stroke-width: var(--angle-line-thickness);
stroke-width: var(--angle-stroke-width);
stroke-linecap: round;
}
.angle-arc {
fill: none;
stroke: var(--angle-arc-color);
stroke-width: var(--angle-arc-thickness);
stroke-width: var(--angle-stroke-width);
stroke-dasharray: 5 3;
opacity: 0.95;
}