llbzow 的摸鱼日记 (づ￣ 3￣)づ

1
export type RoadNodeType = 'SIGNAL' | 'JUNCTION' | 'WORK_ZONE';
2

3
export interface RoadNode {
4
  id: string;
5
  name: string;
6
  type: RoadNodeType;
7
  x: number;
8
  y: number;
9
  chainage: number;
10
}
11

12
export interface RoadLink {
13
  id: string;
14
  fromNodeId: string;
15
  toNodeId: string;
16
  laneClearance: number;
17
}
18

19
export interface SafetyRules {
20
  minimumClearance: number;
21
}
22

23
export class MunicipalMapEditor {
24
  private canvas: HTMLCanvasElement;
25
  private ctx: CanvasRenderingContext2D;
26
  private nodes: RoadNode[] = [];
27
  private links: RoadLink[] = [];
28
  private selectedNode: RoadNode | null = null;
29
  private scale = 1;
30
  private offsetX = 0;
31
  private offsetY = 0;
32

33
  constructor(canvas: HTMLCanvasElement, private rules: SafetyRules) {
34
    this.canvas = canvas;
35
    this.ctx = canvas.getContext('2d')!;
36
    this.bindEvents();
37
  }
38

39
  private bindEvents() {
40
    this.canvas.addEventListener('pointerdown', (event) => {
41
      const point = this.screenToWorld(event.clientX, event.clientY);
42
      this.selectedNode = this.findNodeAt(point.x, point.y);
43
    });
44

45
    this.canvas.addEventListener('pointermove', (event) => {
46
      if (!this.selectedNode) return;
47
      const point = this.screenToWorld(event.clientX, event.clientY);
48
      this.selectedNode.x = point.x;
49
      this.selectedNode.y = point.y;
50
      this.render();
51
    });
52

53
    this.canvas.addEventListener('pointerup', async () => {
54
      this.selectedNode = null;
55
      await this.saveLocalDraft();
56
    });
57
  }
58

59
  private screenToWorld(screenX: number, screenY: number) {
60
    const rect = this.canvas.getBoundingClientRect();
61
    return {
62
      x: (screenX - rect.left - this.offsetX) / this.scale,
63
      y: (screenY - rect.top - this.offsetY) / this.scale,
64
    };
65
  }
66

67
  private findNodeAt(x: number, y: number): RoadNode | null {
68
    const radius = 15;
69
    return this.nodes.find((node) => Math.hypot(node.x - x, node.y - y) < radius) ?? null;
70
  }
71

72
  public render() {
73
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
74
    this.ctx.save();
75
    this.ctx.translate(this.offsetX, this.offsetY);
76
    this.ctx.scale(this.scale, this.scale);
77

78
    for (const link of this.links) {
79
      const from = this.nodes.find((node) => node.id === link.fromNodeId);
80
      const to = this.nodes.find((node) => node.id === link.toNodeId);
81
      if (!from || !to) continue;
82

83
      this.ctx.beginPath();
84
      this.ctx.moveTo(from.x, from.y);
85
      this.ctx.lineTo(to.x, to.y);
86
      this.ctx.strokeStyle =
87
        link.laneClearance < this.rules.minimumClearance ? '#ff4d4d' : '#4dabf7';
88
      this.ctx.stroke();
89
    }
90

91
    for (const node of this.nodes) {
92
      this.ctx.beginPath();
93
      this.ctx.arc(node.x, node.y, 8, 0, Math.PI * 2);
94
      this.ctx.fillStyle = node.type === 'WORK_ZONE' ? '#e67700' : '#37b24d';
95
      this.ctx.fill();
96
      this.ctx.fillText(node.name, node.x + 12, node.y + 4);
97
    }
98

99
    this.ctx.restore();
100
  }
101

102
  private async saveLocalDraft() {
103
    await localDraftDB.saveDraft('municipal_map_draft', {
104
      nodes: this.nodes,
105
      links: this.links,
106
      updatedAt: Date.now(),
107
    });
108
  }
109
}

1
export class LocalDraftDB {
2
  private db: IDBDatabase | null = null;
3

4
  async open() {
5
    this.db = await new Promise<IDBDatabase>((resolve, reject) => {
6
      const request = indexedDB.open('MunicipalMapDemo', 1);
7
      request.onupgradeneeded = () => {
8
        const db = request.result;
9
        if (!db.objectStoreNames.contains('drafts')) {
10
          db.createObjectStore('drafts', { keyPath: 'key' });
11
        }
12
      };
13
      request.onsuccess = () => resolve(request.result);
14
      request.onerror = () => reject(request.error);
15
    });
16
  }
17

18
  async saveDraft(key: string, data: unknown) {
19
    if (!this.db) throw new Error('Database is not ready');
20
    const transaction = this.db.transaction('drafts', 'readwrite');
21
    transaction.objectStore('drafts').put({ key, data });
22
  }
23
}
24

25
export const localDraftDB = new LocalDraftDB();
26
await localDraftDB.open();