refactor: update js - separate files, modules

js/svg-renderer.js

@@ -1,4 +1,5 @@
-const LABELS = ['TL', 'TR', 'BR', 'BL'];
+import { COLORS, LABELS } from './constants.js';
+
 const ns = 'http://www.w3.org/2000/svg';
 
 const OBJECT_FIT_MAP = {
@@ -22,15 +23,12 @@ function setAttrs(el, attrs) {
   }
 }
 
-export function renderSVG(svg, state) {
-  svg.setAttribute('viewBox', `0 0 ${state.fieldW} ${state.fieldH}`);
-  svg.innerHTML = '';
-
+function renderBackground(svg, state) {
   const rect = document.createElementNS(ns, 'rect');
   setAttrs(rect, {
     width: state.fieldW,
     height: state.fieldH,
-    fill: '#0a0e14'
+    fill: COLORS.fieldBg
   });
   svg.appendChild(rect);
 
@@ -44,21 +42,28 @@ export function renderSVG(svg, state) {
     });
     svg.appendChild(img);
   }
+}
 
+function renderGrid(svg, state) {
   const step = gridInterval(Math.max(state.fieldW, state.fieldH));
   const gridG = document.createElementNS(ns, 'g');
+
   for (let x = step; x < state.fieldW; x += step) {
     const line = document.createElementNS(ns, 'line');
-    setAttrs(line, { x1: x, y1: 0, x2: x, y2: state.fieldH, stroke: 'rgba(255,255,255,0.06)', 'stroke-width': 1 });
+    setAttrs(line, { x1: x, y1: 0, x2: x, y2: state.fieldH, stroke: COLORS.gridLine, 'stroke-width': 1 });
     gridG.appendChild(line);
   }
+
   for (let y = step; y < state.fieldH; y += step) {
     const line = document.createElementNS(ns, 'line');
-    setAttrs(line, { x1: 0, y1: y, x2: state.fieldW, y2: y, stroke: 'rgba(255,255,255,0.06)', 'stroke-width': 1 });
+    setAttrs(line, { x1: 0, y1: y, x2: state.fieldW, y2: y, stroke: COLORS.gridLine, 'stroke-width': 1 });
     gridG.appendChild(line);
   }
-  svg.appendChild(gridG);
 
+  svg.appendChild(gridG);
+}
+
+function renderWidgetRect(svg, state) {
   const cx = state.corners.reduce((s, c) => s + c.x, 0) / 4;
   const cy = state.corners.reduce((s, c) => s + c.y, 0) / 4;
 
@@ -68,31 +73,35 @@ export function renderSVG(svg, state) {
     y: cy - state.widgetH / 2,
     width: state.widgetW,
     height: state.widgetH,
-    fill: 'rgba(88,166,255,0.12)',
-    stroke: 'rgba(88,166,255,0.4)',
+    fill: COLORS.widgetFill,
+    stroke: COLORS.widgetStroke,
     'stroke-width': 2,
     'stroke-dasharray': '12,8'
   });
   svg.appendChild(widgetRect);
+}
 
+function renderPolygon(svg, state) {
   const poly = document.createElementNS(ns, 'polygon');
   const pts = state.corners.map(c => `${c.x},${c.y}`).join(' ');
   setAttrs(poly, {
     points: pts,
-    fill: 'rgba(88,166,255,0.1)',
-    stroke: '#58a6ff',
+    fill: COLORS.polygonFill,
+    stroke: COLORS.accent,
     'stroke-width': 3,
     'stroke-linejoin': 'round'
   });
   svg.appendChild(poly);
+}
 
+function renderCorners(svg, state) {
   state.corners.forEach((c, i) => {
     const g = document.createElementNS(ns, 'g');
 
     const circle = document.createElementNS(ns, 'circle');
     setAttrs(circle, {
       cx: c.x, cy: c.y, r: 10,
-      fill: '#58a6ff',
+      fill: COLORS.accent,
       stroke: '#ffffff',
       'stroke-width': 2.5,
       class: 'corner-circle'
@@ -116,3 +125,14 @@ export function renderSVG(svg, state) {
     svg.appendChild(g);
   });
 }
+
+export function renderSVG(svg, state) {
+  svg.setAttribute('viewBox', `0 0 ${state.fieldW} ${state.fieldH}`);
+  svg.innerHTML = '';
+
+  renderBackground(svg, state);
+  renderGrid(svg, state);
+  renderWidgetRect(svg, state);
+  renderPolygon(svg, state);
+  renderCorners(svg, state);
+}