Split label view data

public/main.js

@@ -650,6 +650,8 @@ async function generate(options) {
     Provinces.generate();
     Provinces.getPoles();
 
+    Labels.generate();
+
     Rivers.specify();
     Lakes.defineNames();
 

src/modules/index.ts

@@ -12,4 +12,5 @@ import "./routes-generator";
 import "./states-generator";
 import "./zones-generator";
 import "./religions-generator";
+import "./labels";
 import "./provinces-generator";

src/modules/labels.ts

@@ -0,0 +1,224 @@
+declare global {
+  var Labels: LabelsModule;
+}
+
+export interface StateLabelData {
+  i: number;
+  type: "state";
+  stateId: number;
+  text: string;
+  fontSize?: number;
+}
+
+export interface BurgLabelData {
+  i: number;
+  type: "burg";
+  burgId: number;
+  group: string;
+  text: string;
+  x: number;
+  y: number;
+  dx: number;
+  dy: number;
+}
+
+export interface CustomLabelData {
+  i: number;
+  type: "custom";
+  group: string;
+  text: string;
+  pathPoints: [number, number][];
+  startOffset?: number;
+  fontSize?: number;
+  letterSpacing?: number;
+  transform?: string;
+}
+
+export type LabelData = StateLabelData | BurgLabelData | CustomLabelData;
+
+class LabelsModule {
+  private getNextId(): number {
+    const labels = pack.labels;
+    if (labels.length === 0) return 0;
+
+    const existingIds = labels.map((l) => l.i).sort((a, b) => a - b);
+    for (let id = 0; id < existingIds[existingIds.length - 1]; id++) {
+      if (!existingIds.includes(id)) return id;
+    }
+    return existingIds[existingIds.length - 1] + 1;
+  }
+
+  generate() : void {
+    this.clear();
+    generateStateLabels();
+    generateBurgLabels();
+  }
+
+  getAll(): LabelData[] {
+    return pack.labels;
+  }
+
+  get(id: number): LabelData | undefined {
+    return pack.labels.find((l) => l.i === id);
+  }
+
+  getByType(type: LabelData["type"]): LabelData[] {
+    return pack.labels.filter((l) => l.type === type);
+  }
+
+  getByGroup(group: string): LabelData[] {
+    return pack.labels.filter(
+      (l) => (l.type === "burg" || l.type === "custom") && l.group === group,
+    );
+  }
+
+  getStateLabel(stateId: number): StateLabelData | undefined {
+    return pack.labels.find(
+      (l) => l.type === "state" && l.stateId === stateId,
+    ) as StateLabelData | undefined;
+  }
+
+  getBurgLabel(burgId: number): BurgLabelData | undefined {
+    return pack.labels.find(
+      (l) => l.type === "burg" && l.burgId === burgId,
+    ) as BurgLabelData | undefined;
+  }
+
+  addStateLabel(
+    data: Omit<StateLabelData, "i" | "type">,
+  ): StateLabelData {
+    const label: StateLabelData = { i: this.getNextId(), type: "state", ...data };
+    pack.labels.push(label);
+    return label;
+  }
+
+  addBurgLabel(data: Omit<BurgLabelData, "i" | "type">): BurgLabelData {
+    const label: BurgLabelData = { i: this.getNextId(), type: "burg", ...data };
+    pack.labels.push(label);
+    return label;
+  }
+
+  addCustomLabel(
+    data: Omit<CustomLabelData, "i" | "type">,
+  ): CustomLabelData {
+    const label: CustomLabelData = { i: this.getNextId(), type: "custom", ...data };
+    pack.labels.push(label);
+    return label;
+  }
+
+  updateLabel(id: number, updates: Partial<LabelData>): void {
+    const label = pack.labels.find((l) => l.i === id);
+    if (!label) return;
+    Object.assign(label, updates, { i: label.i, type: label.type });
+  }
+
+  removeLabel(id: number): void {
+    const index = pack.labels.findIndex((l) => l.i === id);
+    if (index !== -1) pack.labels.splice(index, 1);
+  }
+
+  removeByType(type: LabelData["type"]): void {
+    pack.labels = pack.labels.filter((l) => l.type !== type);
+  }
+
+  removeByGroup(group: string): void {
+    pack.labels = pack.labels.filter(
+      (l) =>
+        !((l.type === "burg" || l.type === "custom") && l.group === group),
+    );
+  }
+
+  removeStateLabel(stateId: number): void {
+    const index = pack.labels.findIndex(
+      (l) => l.type === "state" && l.stateId === stateId,
+    );
+    if (index !== -1) pack.labels.splice(index, 1);
+  }
+
+  removeBurgLabel(burgId: number): void {
+    const index = pack.labels.findIndex(
+      (l) => l.type === "burg" && l.burgId === burgId,
+    );
+    if (index !== -1) pack.labels.splice(index, 1);
+  }
+
+  clear(): void {
+    pack.labels = [];
+  }
+}
+
+/**
+ * Generate state labels data entries for each state.
+ * Only stores essential label data; raycast path calculation happens during rendering.
+ * @param list - Optional array of stateIds to regenerate only those
+ */
+export function generateStateLabels(list?: number[]): void {
+  if (!TIME) console.time("generateStateLabels");
+  else TIME && console.time("generateStateLabels");
+
+  const { states } = pack;
+  const labelsModule = window.Labels;
+
+  // Remove existing state labels that need regeneration
+  if (list) {
+    list.forEach((stateId) => labelsModule.removeStateLabel(stateId));
+  } else {
+    labelsModule.removeByType("state");
+  }
+
+  // Generate new label entries
+  for (const state of states) {
+    if (!state.i || state.removed || state.lock) continue;
+    if (list && !list.includes(state.i)) continue;
+
+    labelsModule.addStateLabel({
+      stateId: state.i,
+      text: state.name!,
+      fontSize: 100,
+    });
+  }
+
+  if (!TIME) console.timeEnd("generateStateLabels");
+  else TIME && console.timeEnd("generateStateLabels");
+}
+
+/**
+ * Generate burg labels data from burgs.
+ * Populates pack.labels with BurgLabelData for each burg.
+ */
+export function generateBurgLabels(): void {
+  if (!TIME) console.time("generateBurgLabels");
+  else TIME && console.time("generateBurgLabels");
+
+  const labelsModule = window.Labels;
+
+  // Remove existing burg labels
+  labelsModule.removeByType("burg");
+
+  // Generate new labels for all active burgs
+  for (const burg of pack.burgs) {
+    if (!burg.i || burg.removed) continue;
+
+    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;
+
+    labelsModule.addBurgLabel({
+      burgId: burg.i,
+      group,
+      text: burg.name!,
+      x: burg.x,
+      y: burg.y,
+      dx,
+      dy,
+    });
+  }
+
+  if (!TIME) console.timeEnd("generateBurgLabels");
+  else TIME && console.timeEnd("generateBurgLabels");
+}
+
+window.Labels = new LabelsModule();

src/renderers/draw-burg-labels.ts

@@ -1,4 +1,5 @@
 import type { Burg } from "../modules/burgs-generator";
+import type { BurgLabelData } from "../modules/labels";
 
 declare global {
   var drawBurgLabels: () => void;
@@ -15,31 +16,42 @@ const burgLabelsRenderer = (): void => {
   TIME && console.time("drawBurgLabels");
   createLabelGroups();
 
-  for (const { name } of options.burgs.groups as BurgGroup[]) {
-    const burgsInGroup = pack.burgs.filter(
-      (b) => b.group === name && !b.removed,
-    );
-    if (!burgsInGroup.length) continue;
+  // Get all burg labels grouped by group name
+  const burgLabelsByGroup = new Map<string, BurgLabelData[]>();
+  for (const label of Labels.getByType("burg").map((l) => l as BurgLabelData)) {
+    if (!burgLabelsByGroup.has(label.group)) {
+      burgLabelsByGroup.set(label.group, []);
+    }
+    burgLabelsByGroup.get(label.group)!.push(label);
+  }
 
-    const labelGroup = burgLabels.select<SVGGElement>(`#${name}`);
+  // Render each group and update label offsets from SVG attributes
+  for (const [groupName, labels] of burgLabelsByGroup) {
+    const labelGroup = burgLabels.select<SVGGElement>(`#${groupName}`);
     if (labelGroup.empty()) continue;
 
-    const dx = labelGroup.attr("data-dx") || 0;
-    const dy = labelGroup.attr("data-dy") || 0;
-
-    labelGroup
-      .selectAll("text")
-      .data(burgsInGroup)
-      .enter()
-      .append("text")
-      .attr("text-rendering", "optimizeSpeed")
-      .attr("id", (d) => `burgLabel${d.i}`)
-      .attr("data-id", (d) => d.i!)
-      .attr("x", (d) => d.x)
-      .attr("y", (d) => d.y)
-      .attr("dx", `${dx}em`)
-      .attr("dy", `${dy}em`)
-      .text((d) => d.name!);
+    const dxAttr = labelGroup.attr("data-dx");
+    const dyAttr = labelGroup.attr("data-dy");
+    const dx = dxAttr ? parseFloat(dxAttr) : 0;
+    const dy = dyAttr ? parseFloat(dyAttr) : 0;
+
+    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 });
+      }
+
+      labelGroup
+        .append("text")
+        .attr("text-rendering", "optimizeSpeed")
+        .attr("id", `burgLabel${labelData.burgId}`)
+        .attr("data-id", labelData.burgId)
+        .attr("x", labelData.x)
+        .attr("y", labelData.y)
+        .attr("dx", `${dx}em`)
+        .attr("dy", `${dy}em`)
+        .text(labelData.text);
+    }
   }
 
   TIME && console.timeEnd("drawBurgLabels");
@@ -48,14 +60,40 @@ const burgLabelsRenderer = (): void => {
 const drawBurgLabelRenderer = (burg: Burg): void => {
   const labelGroup = burgLabels.select<SVGGElement>(`#${burg.group}`);
   if (labelGroup.empty()) {
-    drawBurgLabels();
+    burgLabelsRenderer();
     return; // redraw all labels if group is missing
   }
 
-  const dx = labelGroup.attr("data-dx") || 0;
-  const dy = labelGroup.attr("data-dy") || 0;
+  const dxAttr = labelGroup.attr("data-dx");
+  const dyAttr = labelGroup.attr("data-dy");
+  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,
+    });
+  }
+
+  // Render to SVG
   labelGroup
     .append("text")
     .attr("text-rendering", "optimizeSpeed")
@@ -71,6 +109,7 @@ const drawBurgLabelRenderer = (burg: Burg): void => {
 const removeBurgLabelRenderer = (burgId: number): void => {
   const existingLabel = document.getElementById(`burgLabel${burgId}`);
   if (existingLabel) existingLabel.remove();
+  Labels.removeBurgLabel(burgId);
 };
 
 function createLabelGroups(): void {