feat: keep room labels relatively of the same size as you zoom in/out

assets/konva/app.js

@@ -6,6 +6,9 @@
 
 const PPM = 60; // pixels per meter
 
+const BASE_LABEL_SIZE = 12;
+const MAX_LABEL_SIZE  = 24;
+
 let rooms   = [];   // [{id, name, x, y, width, height}]
 let sensors = [];   // [{id, sensor_id, name?, floor_x, floor_y, room_id}]
 let mode    = 'view';
@@ -78,6 +81,14 @@ function _applyZoom(center, factor) {
   const anchorY  = (center.y - stage.y()) / oldScale;
   stage.scale({ x: newScale, y: newScale });
   stage.position({ x: center.x - anchorX * newScale, y: center.y - anchorY * newScale });
+  _updateRoomLabelSizes(newScale);
+}
+
+function _updateRoomLabelSizes(scale) {
+  const s  = scale ?? stage.scaleX();
+  const fs = Math.min(MAX_LABEL_SIZE, Math.max(BASE_LABEL_SIZE, BASE_LABEL_SIZE / s));
+  roomsLayer.find('.room-label').forEach(t => t.fontSize(fs));
+  roomsLayer.batchDraw();
 }
 
 // ---------------------------------------------------------------------------
@@ -112,9 +123,10 @@ function _buildRoomGroup(room) {
 
   // Room label
   group.add(new Konva.Text({
+    name: 'room-label',
     width: rw, height: rh,
     text: room.name,
-    fontSize: 12,
+    fontSize: Math.min(MAX_LABEL_SIZE, Math.max(BASE_LABEL_SIZE, BASE_LABEL_SIZE / stage.scaleX())),
     fill: 'rgba(0,0,0,0.45)',
     align: 'center',
     verticalAlign: 'middle',