ilia.gurielidze/scada_device_layout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix EPC SVG export: match stroke width and right box position; rotate end 90°

Browse Source 
- Right box stroke now uses EPC_CONFIG.lineWidth (1.5) instead of 0.3
- Right box positioned at -rb.w (backward) matching canvas renderer
- End box rotated 90° (perpendicular to line) in canvas, export, and hit-testing

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
igurielidze 2026-03-30 15:38:07 +04:00
parent d721f47757
commit a4884b4e9b
3 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
svelte-app/src/lib/canvas/hit-testing.ts
View File

@ -170,7 +170,7 @@ function pointInEpc(px: number, py: number, sym: PlacedSymbol): boolean {
const last = waypoints[waypoints.length - 1]; const last = waypoints[waypoints.length - 1];
const prev = waypoints[waypoints.length - 2]; const prev = waypoints[waypoints.length - 2];
const plx = ox + last.x, ply = oy + last.y; const plx = ox + last.x, ply = oy + last.y;
const angle = Math.atan2(ply - (oy + prev.y), plx - (ox + prev.x)); const angle = Math.atan2(ply - (oy + prev.y), plx - (ox + prev.x)) - Math.PI / 2;
const cos = Math.cos(-angle), sin = Math.sin(-angle); const cos = Math.cos(-angle), sin = Math.sin(-angle);
const dx = px - plx, dy = py - ply; const dx = px - plx, dy = py - ply;
const lx = dx * cos - dy * sin, ly = dx * sin + dy * cos; const lx = dx * cos - dy * sin, ly = dx * sin + dy * cos;

3
svelte-app/src/lib/canvas/renderer.ts
View File

@ -186,6 +186,7 @@ function drawEpcSymbol(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
ctx.fillStyle = THEME.epcBody.rightBoxFill; ctx.fillStyle = THEME.epcBody.rightBoxFill;
ctx.strokeStyle = THEME.epcBody.rightBoxStroke; ctx.strokeStyle = THEME.epcBody.rightBoxStroke;
ctx.lineWidth = THEME.epcBody.rightBoxStrokeWidth; ctx.lineWidth = THEME.epcBody.rightBoxStrokeWidth;
ctx.rotate(-Math.PI / 2);
ctx.fillRect(-rb.w, -rb.h / 2, rb.w, rb.h); ctx.fillRect(-rb.w, -rb.h / 2, rb.w, rb.h);
ctx.strokeRect(-rb.w, -rb.h / 2, rb.w, rb.h); ctx.strokeRect(-rb.w, -rb.h / 2, rb.w, rb.h);
ctx.restore(); ctx.restore();
@ -268,7 +269,7 @@ function traceEpcOutlinePath(ctx: CanvasRenderingContext2D, sym: PlacedSymbol, p
ctx.save(); ctx.save();
ctx.translate(plx, ply); ctx.translate(plx, ply);
ctx.rotate(rAngle); ctx.rotate(rAngle - Math.PI / 2);
ctx.beginPath(); ctx.beginPath();
ctx.rect(-rb.w - pad, -rb.h / 2 - pad, rb.w + pad * 2, rb.h + pad * 2); ctx.rect(-rb.w - pad, -rb.h / 2 - pad, rb.w + pad * 2, rb.h + pad * 2);
ctx.stroke(); ctx.stroke();

4
svelte-app/src/lib/export.ts
View File

@ -181,7 +181,7 @@ async function emitEpc(lines: string[], sym: PlacedSymbol, label: string, outerT
parts.push(` </g>`); parts.push(` </g>`);
} }
} catch { } catch {
parts.push(` <rect x="${-lb.w}" y="${-lb.h / 2}" width="${lb.w}" height="${lb.h}" fill="#aaaaaa" stroke="#000000" stroke-width="0.3" transform="translate(${p0x},${p0y}) rotate(${lAngle.toFixed(2)})" />`); parts.push(` <rect x="${-lb.w}" y="${-lb.h / 2}" width="${lb.w}" height="${lb.h}" fill="#aaaaaa" stroke="#000000" stroke-width="${EPC_CONFIG.lineWidth}" transform="translate(${p0x},${p0y}) rotate(${lAngle.toFixed(2)})" />`);
} }
// Right box // Right box
@ -191,7 +191,7 @@ async function emitEpc(lines: string[], sym: PlacedSymbol, label: string, outerT
const ppx = ox + prev.x, ppy = oy + prev.y; const ppx = ox + prev.x, ppy = oy + prev.y;
const rAngle = Math.atan2(ply - ppy, plx - ppx) * 180 / Math.PI; const rAngle = Math.atan2(ply - ppy, plx - ppx) * 180 / Math.PI;
const rb = EPC_CONFIG.rightBox; const rb = EPC_CONFIG.rightBox;
parts.push(` <rect x="0" y="${-rb.h / 2}" width="${rb.w}" height="${rb.h}" fill="#aaaaaa" stroke="#000000" stroke-width="0.3" transform="translate(${plx},${ply}) rotate(${rAngle.toFixed(2)})" />`); parts.push(` <rect x="${-rb.w}" y="${-rb.h / 2}" width="${rb.w}" height="${rb.h}" fill="#aaaaaa" stroke="#000000" stroke-width="${EPC_CONFIG.lineWidth}" transform="translate(${plx},${ply}) rotate(${(rAngle - 90).toFixed(2)})" />`);
} }
lines.push(` <g id="${label}" inkscape:label="${label}"${tAttr}>`); lines.push(` <g id="${label}" inkscape:label="${label}"${tAttr}>`);