refactor: streamline label management by integrating label removal and rendering functions

src/modules/burgs-generator.ts

@@ -1,5 +1,6 @@
 import { quadtree } from "d3-quadtree";
 import { byId, each, gauss, minmax, normalize, P, rn } from "../utils";
+import { drawBurgLabel } from "../renderers/draw-burg-labels";
 
 declare global {
   var Burgs: BurgModule;
@@ -728,7 +729,7 @@ class BurgModule {
     }
 
     removeBurgIcon(burg.i!);
-    removeBurgLabel(burg.i!);
+    Labels.removeBurgLabel(burg.i!);
   }
 }
 window.Burgs = new BurgModule();

src/modules/labels.ts

@@ -1,3 +1,4 @@
+
 declare global {
   var Labels: LabelsModule;
 }
@@ -18,8 +19,6 @@ export interface BurgLabelData {
   text: string;
   x: number;
   y: number;
-  dx: number;
-  dy: number;
 }
 
 export interface CustomLabelData {
@@ -197,19 +196,12 @@ class LabelsModule {
 
       const group = burg.group || "unmarked";
 
-      // Get label group offset attributes if they exist (will be set during rendering)
-      // For now, use defaults - these will be updated during rendering phase
-      const dx = 0;
-      const dy = 0;
-
       this.addBurgLabel({
         burgId: burg.i,
         group,
         text: burg.name!,
         x: burg.x,
-        y: burg.y,
-        dx,
-        dy,
+        y: burg.y
       });
     }
 

src/renderers/draw-burg-labels.ts

@@ -1,18 +1,20 @@
 import type { Burg } from "../modules/burgs-generator";
 import type { BurgLabelData } from "../modules/labels";
 
-declare global {
-  var drawBurgLabels: () => void;
-  var drawBurgLabel: (burg: Burg) => void;
-  var removeBurgLabel: (burgId: number) => void;
-}
-
 interface BurgGroup {
   name: string;
   order: number;
 }
 
-const burgLabelsRenderer = (): void => {
+// remove this section once layer.js is refactored--------------------------------
+declare global {
+  var drawBurgLabels: () => void;
+}
+
+window.drawBurgLabels = drawBurgLabels;
+// section end -------------------------------------------------------------------
+
+export function drawBurgLabels(): void {
   TIME && console.time("drawBurgLabels");
   createLabelGroups();
 
@@ -30,19 +32,13 @@ const burgLabelsRenderer = (): void => {
     const labelGroup = burgLabels.select<SVGGElement>(`#${groupName}`);
     if (labelGroup.empty()) continue;
 
-    const dxAttr = labelGroup.attr("data-dx");
-    const dyAttr = labelGroup.attr("data-dy");
+    const dxAttr = style.burgLabels?.[groupName]?.["data-dx"];
+    const dyAttr = style.burgLabels?.[groupName]?.["data-dy"];
     const dx = dxAttr ? parseFloat(dxAttr) : 0;
     const dy = dyAttr ? parseFloat(dyAttr) : 0;
 
-    // Build HTML string for all labels in this group
     const labelsHTML: string[] = [];
     for (const labelData of labels) {
-      // Update label data with SVG group offsets
-      if (labelData.dx !== dx || labelData.dy !== dy) {
-        Labels.updateLabel(labelData.i, { dx, dy });
-      }
-
       labelsHTML.push(
         `<text text-rendering="optimizeSpeed" id="burgLabel${labelData.burgId}" data-id="${labelData.burgId}" x="${labelData.x}" y="${labelData.y}" dx="${dx}em" dy="${dy}em">${labelData.text}</text>`,
       );
@@ -58,10 +54,11 @@ const burgLabelsRenderer = (): void => {
   TIME && console.timeEnd("drawBurgLabels");
 };
 
-const drawBurgLabelRenderer = (burg: Burg): void => {
+export function drawBurgLabel(burg: Burg): void {
+  // TODO: remove label group dependency - for now, if group is missing, redraw all labels to recreate the group
   const labelGroup = burgLabels.select<SVGGElement>(`#${burg.group}`);
   if (labelGroup.empty()) {
-    burgLabelsRenderer();
+    drawBurgLabels();
     return; // redraw all labels if group is missing
   }
 
@@ -70,29 +67,8 @@ const drawBurgLabelRenderer = (burg: Burg): void => {
   const dx = dxAttr ? parseFloat(dxAttr) : 0;
   const dy = dyAttr ? parseFloat(dyAttr) : 0;
 
-  removeBurgLabelRenderer(burg.i!);
-
-  // Add/update label in data layer
-  const existingLabel = Labels.getBurgLabel(burg.i!);
-  if (existingLabel) {
-    Labels.updateLabel(existingLabel.i, {
-      text: burg.name!,
-      x: burg.x,
-      y: burg.y,
-      dx,
-      dy,
-    });
-  } else {
-    Labels.addBurgLabel({
-      burgId: burg.i!,
-      group: burg.group || "unmarked",
-      text: burg.name!,
-      x: burg.x,
-      y: burg.y,
-      dx,
-      dy,
-    });
-  }
+  const existingLabel = document.getElementById(`burgLabel${burg.i}`);
+  if (existingLabel) existingLabel.remove();
 
   // Render to SVG
   labelGroup
@@ -107,10 +83,9 @@ const drawBurgLabelRenderer = (burg: Burg): void => {
     .text(burg.name!);
 };
 
-const removeBurgLabelRenderer = (burgId: number): void => {
+export function removeBurgLabel(burgId: number): void {
   const existingLabel = document.getElementById(`burgLabel${burgId}`);
   if (existingLabel) existingLabel.remove();
-  Labels.removeBurgLabel(burgId);
 };
 
 function createLabelGroups(): void {
@@ -140,8 +115,4 @@ function createLabelGroups(): void {
     });
     group.attr("id", name);
   }
-}
-
-window.drawBurgLabels = burgLabelsRenderer;
-window.drawBurgLabel = drawBurgLabelRenderer;
-window.removeBurgLabel = removeBurgLabelRenderer;
+}