observe and map values to named values when match

Author: argyleink

src/store/conic.ts

@@ -2,4 +2,32 @@ import { writable } from 'svelte/store';
 
 export const conic_angle = writable('0');
 export const conic_named_position = writable('center');
-export const conic_position = writable({x: null, y: null});
+export const conic_position = writable({x: null, y: null});
+
+// Reflect numeric position into named position when it matches a canonical value
+function posToName(x: number, y: number): string | null {
+  const tol = 0
+  const eq = (a: number, b: number) => Math.abs(a - b) <= tol
+  if (eq(x,50) && eq(y,50)) return 'center'
+  if (eq(x,50) && eq(y,0)) return 'top'
+  if (eq(x,100) && eq(y,50)) return 'right'
+  if (eq(x,50) && eq(y,100)) return 'bottom'
+  if (eq(x,0) && eq(y,50)) return 'left'
+  if (eq(x,100) && eq(y,0)) return 'top right'
+  if (eq(x,100) && eq(y,100)) return 'bottom right'
+  if (eq(x,0) && eq(y,100)) return 'bottom left'
+  if (eq(x,0) && eq(y,0)) return 'top left'
+  return null
+}
+
+let syncing = false
+conic_position.subscribe(v => {
+  if (syncing) return
+  const x = (v as any)?.x
+  const y = (v as any)?.y
+  if (typeof x !== 'number' || typeof y !== 'number') return
+  const name = posToName(x, y)
+  syncing = true
+  try { conic_named_position.set(name ?? '--') }
+  finally { syncing = false }
+})

src/store/linear.ts

@@ -1,4 +1,61 @@
 import { writable } from 'svelte/store';
 
 export const linear_named_angle = writable('to right');
-export const linear_angle = writable(null);
+export const linear_angle = writable(null);
+
+// Keep numeric angle in sync when a named direction is chosen.
+// This ensures UI indicators (like the angle icon) reflect the selection.
+const nameToDeg: Record<string, number> = {
+  'to top': 0,
+  'to top right': 45,
+  'to right': 90,
+  'to bottom right': 135,
+  'to bottom': 180,
+  'to bottom left': 225,
+  'to left': 270,
+  'to top left': 315,
+}
+
+let syncing = false
+linear_named_angle.subscribe(v => {
+  if (syncing) return
+  if (!v || v === '--') return
+  const deg = nameToDeg[v]
+  if (typeof deg === 'number') {
+    syncing = true
+    try { linear_angle.set(String(deg)) }
+    finally { syncing = false }
+  }
+})
+
+// When the numeric angle matches a named direction, reflect it in the UI.
+linear_angle.subscribe(v => {
+  if (syncing) return
+  if (v == null) return
+  const n = Number(v)
+  if (Number.isNaN(n)) return
+  // Normalize to [0,360)
+  let a = ((n % 360) + 360) % 360
+  const entries = Object.entries(nameToDeg)
+  const tol = 0.5
+  for (const [name, deg] of entries) {
+    const d = Math.abs((((a - deg) % 360) + 540) % 360 - 180)
+    if (d <= tol) {
+      if (name !== 'to bottom' || deg !== 180) {
+        syncing = true
+        try { linear_named_angle.set(name) }
+        finally { syncing = false }
+      } else {
+        // default direction; show it explicitly too
+        syncing = true
+        try { linear_named_angle.set('to bottom') }
+        finally { syncing = false }
+      }
+      return
+    }
+  }
+  // Not a named angle; show custom
+  syncing = true
+  try { linear_named_angle.set('--') }
+  finally { syncing = false }
+})

src/store/radial.ts

@@ -3,4 +3,32 @@ import { writable } from 'svelte/store';
 export const radial_shape = writable('circle');
 export const radial_named_position = writable('center');
 export const radial_position = writable({x: null, y: null});
-export const radial_size = writable('farthest-corner');
+export const radial_size = writable('farthest-corner');
+
+// Reflect numeric position into named position when it matches a canonical value
+function posToName(x: number, y: number): string | null {
+  const tol = 0 // expect integers from UI/overlay
+  const eq = (a: number, b: number) => Math.abs(a - b) <= tol
+  if (eq(x,50) && eq(y,50)) return 'center'
+  if (eq(x,50) && eq(y,0)) return 'top'
+  if (eq(x,100) && eq(y,50)) return 'right'
+  if (eq(x,50) && eq(y,100)) return 'bottom'
+  if (eq(x,0) && eq(y,50)) return 'left'
+  if (eq(x,100) && eq(y,0)) return 'top right'
+  if (eq(x,100) && eq(y,100)) return 'bottom right'
+  if (eq(x,0) && eq(y,100)) return 'bottom left'
+  if (eq(x,0) && eq(y,0)) return 'top left'
+  return null
+}
+
+let syncing = false
+radial_position.subscribe(v => {
+  if (syncing) return
+  const x = (v as any)?.x
+  const y = (v as any)?.y
+  if (typeof x !== 'number' || typeof y !== 'number') return
+  const name = posToName(x, y)
+  syncing = true
+  try { radial_named_position.set(name ?? '--') }
+  finally { syncing = false }
+})