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

Reduce label font size from 10px to 3px

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
igurielidze 2026-03-21 18:41:18 +04:00
parent 51794cb9ae
commit 3c532b8cfe
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
svelte-app/src/lib/canvas/interactions.ts
View File

@ -1,5 +1,5 @@
import { layout } from '../stores/layout.svelte.js'; import { layout } from '../stores/layout.svelte.js';
import { isCurvedType, isEpcType, SYMBOLS, EPC_CONFIG } from '../symbols.js'; import { isCurvedType, isEpcType, getSymbolGroup, SYMBOLS, EPC_CONFIG } from '../symbols.js';
import type { EpcWaypoint } from '../types.js'; import type { EpcWaypoint } from '../types.js';
import { getAABB, snapToGrid, clamp, findValidPosition } from './collision.js'; import { getAABB, snapToGrid, clamp, findValidPosition } from './collision.js';
import { orientedBoxCorners, pastDragThreshold } from './geometry.js'; import { orientedBoxCorners, pastDragThreshold } from './geometry.js';
@ -22,7 +22,7 @@ const CONVEYOR_MIN_W = 40;
const DRAG_THRESHOLD = 4; // pixels before drag actually starts const DRAG_THRESHOLD = 4; // pixels before drag actually starts
interface DragState { interface DragState {
type: 'palette' | 'move' | 'multi-move' | 'resize-left' | 'resize-right' | 'resize-spur-top' | 'resize-spur-bottom' | 'epc-waypoint' | 'pdf' | 'assign-label'; type: 'palette' | 'move' | 'multi-move' | 'resize-left' | 'resize-right' | 'resize-spur-top' | 'resize-spur-bottom' | 'epc-waypoint' | 'pdf' | 'assign-label' | 'marquee';
placedId?: number; placedId?: number;
offsetX?: number; offsetX?: number;
offsetY?: number; offsetY?: number;
@ -44,6 +44,9 @@ interface DragState {
let dragState: DragState | null = null; let dragState: DragState | null = null;
let isPanning = false; let isPanning = false;
// Marquee selection rectangle (canvas coords), accessible by renderer
export let marqueeRect: { x: number; y: number; w: number; h: number } | null = null;
let panStartX = 0; let panStartX = 0;
let panStartY = 0; let panStartY = 0;
let canvasEl: HTMLCanvasElement | null = null; let canvasEl: HTMLCanvasElement | null = null;
@ -243,11 +246,17 @@ function onCanvasMousedown(e: MouseEvent) {
} }
layout.markDirty(); layout.markDirty();
} else { } else {
// Click on empty space // Empty space: start marquee selection
if (!e.shiftKey) { if (!e.shiftKey) {
layout.selectedIds = new Set(); layout.selectedIds = new Set();
layout.markDirty();
} }
dragState = {
type: 'marquee',
startX: pos.x,
startY: pos.y,
dragActivated: false,
};
layout.markDirty();
} }
} }

2
svelte-app/src/lib/canvas/render-theme.ts
View File

@ -33,7 +33,7 @@ export const THEME = {
}, },
label: { label: {
color: '#e94560', color: '#e94560',
font: '10px sans-serif', font: '3px sans-serif',
offsetY: -3, offsetY: -3,
}, },
resizeHandle: { resizeHandle: {

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

@ -495,7 +495,7 @@ function drawSymbolOverlays(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
ctx.fillStyle = THEME.label.color; ctx.fillStyle = THEME.label.color;
ctx.font = THEME.label.font; ctx.font = THEME.label.font;
const metrics = ctx.measureText(sym.label); const metrics = ctx.measureText(sym.label);
const textH = 10; // approximate font height const textH = 3; // approximate font height
if (sym.w >= metrics.width + 4 && sym.h >= textH + 4) { if (sym.w >= metrics.width + 4 && sym.h >= textH + 4) {
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';