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

Fix spur/mirrored symbol text: counter-mirror so text stays readable

Browse Source 
Mirrored symbols need text counter-mirrored (scale -1,1) to prevent
backwards text. Restored mirror fix that was incorrectly removed.
Applied to both canvas renderer and SVG export.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
igurielidze 2026-03-30 21:24:49 +04:00
parent f6b298254b
commit 3506d6164d
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -573,7 +573,8 @@ function drawConveyanceLabel(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
// - Counter-mirror if symbol is mirrored (so text doesn't read backwards) // - Counter-mirror if symbol is mirrored (so text doesn't read backwards)
const rot = ((sym.rotation || 0) % 360 + 360) % 360; const rot = ((sym.rotation || 0) % 360 + 360) % 360;
const needsFlip = rot > 90 && rot < 270; const needsFlip = rot > 90 && rot < 270;
const hasCorrection = needsFlip; const needsMirrorFix = !!sym.mirrored;
const hasCorrection = needsFlip || needsMirrorFix;
ctx.fillStyle = '#000000'; ctx.fillStyle = '#000000';
ctx.textAlign = 'center'; ctx.textAlign = 'center';
@ -601,6 +602,7 @@ function drawConveyanceLabel(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
if (hasCorrection) { if (hasCorrection) {
ctx.save(); ctx.save();
ctx.translate(cx, cy); ctx.translate(cx, cy);
if (needsMirrorFix) ctx.scale(-1, 1);
if (needsFlip) ctx.rotate(Math.PI); if (needsFlip) ctx.rotate(Math.PI);
for (let i = 0; i < tryLines.length; i++) { for (let i = 0; i < tryLines.length; i++) {
const dy = -(lineCount - 1) * lineH / 2 + i * lineH; const dy = -(lineCount - 1) * lineH / 2 + i * lineH;

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

@ -60,16 +60,21 @@ function emitConveyanceLabelInner(lines: string[], sym: PlacedSymbol) {
} }
// For non-curved: check readability and flip if needed // For non-curved: check readability and flip if needed
let needsMirrorFix = false;
if (!isCurvedType(sym.symbolId)) { if (!isCurvedType(sym.symbolId)) {
const rot = ((sym.rotation || 0) % 360 + 360) % 360; const rot = ((sym.rotation || 0) % 360 + 360) % 360;
if (rot > 90 && rot < 270) textRotDeg = 180; if (rot > 90 && rot < 270) textRotDeg = 180;
// Mirror: label follows mirrored shape naturally (inside group) needsMirrorFix = !!sym.mirrored;
} }
const fontSize = Math.min(14, availH / textLines.length); const fontSize = Math.min(14, availH / textLines.length);
if (fontSize < 4) return; if (fontSize < 4) return;
const lineH = fontSize; const lineH = fontSize;
const rotAttr = textRotDeg ? ` transform="rotate(${textRotDeg.toFixed(1)},${labelCx},${labelCy})"` : ''; // Build transform: counter-mirror then rotate for readability
let transformParts: string[] = [];
if (needsMirrorFix) transformParts.push(`translate(${labelCx},${labelCy}) scale(-1,1) translate(${-labelCx},${-labelCy})`);
if (textRotDeg) transformParts.push(`rotate(${textRotDeg.toFixed(1)},${labelCx},${labelCy})`);
const rotAttr = transformParts.length ? ` transform="${transformParts.join(' ')}"` : '';
for (let i = 0; i < textLines.length; i++) { for (let i = 0; i < textLines.length; i++) {
const dy = -(textLines.length - 1) * lineH / 2 + i * lineH; const dy = -(textLines.length - 1) * lineH / 2 + i * lineH;
const y = labelCy + dy + fontSize * 0.35; const y = labelCy + dy + fontSize * 0.35;