Merge branch 'master' into feature/polygon-masks

# Conflicts:
#	src/common/geometry.spec.js
#	src/features/layers/layersSlice.js
#	src/features/machines/PolarMachine.js

Author: bobnik

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "sandify",
   "homepage": "https://sandify.org",
-  "version": "1.1.1",
+  "version": "1.2.2",
   "private": true,
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -59,6 +59,7 @@
     "reselect": "^5.1.1",
     "sass": "^1.96.0",
     "seedrandom": "^3.0.5",
+    "svgpath": "^2.6.0",
     "uuid": "^13.0.0",
     "victor": "^1.1.0"
   },

package.json

@@ -10,4 +10,61 @@ const colors = {
   transformerBorderColor: "#fefefe", // almost white
 }
 
+// ITU-R BT.601 luminance formula for perceived brightness
+const luminance = (r, g, b) => 0.299 * r + 0.587 * g + 0.114 * b
+
+// Parse a CSS color string and return perceived brightness (0-255), or null if unparseable
+export const getColorBrightness = (color) => {
+  if (!color || color === "none") {
+    return null
+  }
+
+  const c = color.toLowerCase().trim()
+
+  if (c.startsWith("#")) {
+    let hex = c.slice(1)
+
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+    }
+
+    if (hex.length === 6 && /^[0-9a-f]{6}$/.test(hex)) {
+      const r = parseInt(hex.slice(0, 2), 16)
+      const g = parseInt(hex.slice(2, 4), 16)
+      const b = parseInt(hex.slice(4, 6), 16)
+
+      return luminance(r, g, b)
+    }
+  }
+
+  const rgbMatch = c.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/)
+
+  if (rgbMatch) {
+    const r = parseInt(rgbMatch[1], 10)
+    const g = parseInt(rgbMatch[2], 10)
+    const b = parseInt(rgbMatch[3], 10)
+
+    return luminance(r, g, b)
+  }
+
+  const namedColors = {
+    black: 0,
+    white: 255,
+    red: 76,
+    green: 150,
+    blue: 29,
+    yellow: 226,
+    orange: 156,
+    brown: 101,
+    gray: 128,
+    grey: 128,
+  }
+
+  if (namedColors[c] !== undefined) {
+    return namedColors[c]
+  }
+
+  return null
+}
+
 export default colors

src/common/colors.js

@@ -0,0 +1,102 @@
+import { getColorBrightness } from "./colors"
+
+describe("getColorBrightness", () => {
+  describe("hex colors", () => {
+    it("returns 0 for black", () => {
+      expect(getColorBrightness("#000000")).toBe(0)
+    })
+
+    it("returns 255 for white", () => {
+      expect(getColorBrightness("#ffffff")).toBe(255)
+    })
+
+    it("handles 3-digit hex", () => {
+      expect(getColorBrightness("#000")).toBe(0)
+      expect(getColorBrightness("#fff")).toBe(255)
+    })
+
+    it("calculates luminance for red", () => {
+      // Red: 0.299 * 255 = 76.245
+      expect(getColorBrightness("#ff0000")).toBeCloseTo(76.245)
+    })
+
+    it("calculates luminance for green", () => {
+      // Green: 0.587 * 255 = 149.685
+      expect(getColorBrightness("#00ff00")).toBeCloseTo(149.685)
+    })
+
+    it("calculates luminance for blue", () => {
+      // Blue: 0.114 * 255 = 29.07
+      expect(getColorBrightness("#0000ff")).toBeCloseTo(29.07)
+    })
+
+    it("is case insensitive", () => {
+      expect(getColorBrightness("#FFFFFF")).toBe(255)
+      expect(getColorBrightness("#FfFfFf")).toBe(255)
+    })
+  })
+
+  describe("rgb/rgba colors", () => {
+    it("parses rgb format", () => {
+      expect(getColorBrightness("rgb(255, 255, 255)")).toBe(255)
+      expect(getColorBrightness("rgb(0, 0, 0)")).toBe(0)
+    })
+
+    it("parses rgba format", () => {
+      expect(getColorBrightness("rgba(255, 255, 255, 0.5)")).toBe(255)
+    })
+
+    it("handles spaces in rgb", () => {
+      expect(getColorBrightness("rgb(  255 ,  255 ,  255  )")).toBe(255)
+    })
+  })
+
+  describe("named colors", () => {
+    it("returns correct brightness for named colors", () => {
+      expect(getColorBrightness("black")).toBe(0)
+      expect(getColorBrightness("white")).toBe(255)
+      expect(getColorBrightness("gray")).toBe(128)
+      expect(getColorBrightness("grey")).toBe(128)
+    })
+
+    it("is case insensitive", () => {
+      expect(getColorBrightness("BLACK")).toBe(0)
+      expect(getColorBrightness("White")).toBe(255)
+    })
+  })
+
+  describe("invalid/special values", () => {
+    it("returns null for 'none'", () => {
+      expect(getColorBrightness("none")).toBeNull()
+    })
+
+    it("returns null for empty string", () => {
+      expect(getColorBrightness("")).toBeNull()
+    })
+
+    it("returns null for null input", () => {
+      expect(getColorBrightness(null)).toBeNull()
+    })
+
+    it("returns null for undefined input", () => {
+      expect(getColorBrightness(undefined)).toBeNull()
+    })
+
+    it("returns null for unrecognized color names", () => {
+      expect(getColorBrightness("hotpink")).toBeNull()
+      expect(getColorBrightness("notacolor")).toBeNull()
+    })
+
+    it("returns null for invalid hex", () => {
+      expect(getColorBrightness("#gggggg")).toBeNull()
+      expect(getColorBrightness("#12345")).toBeNull()
+    })
+  })
+
+  describe("whitespace handling", () => {
+    it("trims whitespace", () => {
+      expect(getColorBrightness("  #ffffff  ")).toBe(255)
+      expect(getColorBrightness("  black  ")).toBe(0)
+    })
+  })
+})

src/common/colors.spec.js

@@ -16,9 +16,11 @@ export const snapToGrid = (value, tolerance) => {
   return Math.round(value / tolerance) * tolerance
 }
 
-export const distance = (v1, v2) => {
-  return Math.sqrt(Math.pow(v1.x - v2.x, 2.0) + Math.pow(v1.y - v2.y, 2.0))
-}
+// Using x*x instead of Math.pow(x, 2) avoids function call overhead (~10-20x
+// faster for squaring).
+export const magnitude = (x, y) => Math.sqrt(x * x + y * y)
+
+export const distance = (v1, v2) => magnitude(v1.x - v2.x, v1.y - v2.y)
 
 // Calculate the centroid (geometric center) of a set of vertices.
 // Excludes duplicate closing vertex if present (would skew the average).
@@ -253,6 +255,27 @@ export const toWorldSpace = (vertex, x, y, rotation) => {
   return offset(rotate(vertex, -rotation), x, y)
 }
 
+// applies a DOMMatrix (or object with a,b,c,d,e,f) to a vertex
+// | a c e |   | x |   | a*x + c*y + e |
+// | b d f | × | y | = | b*x + d*y + f |
+export const applyMatrix = (vertex, matrix) => {
+  const { a, b, c, d, e, f } = matrix
+  const newX = a * vertex.x + c * vertex.y + e
+  const newY = b * vertex.x + d * vertex.y + f
+
+  vertex.x = newX
+  vertex.y = newY
+
+  return vertex
+}
+
+// applies a matrix to an array of vertices
+export const applyMatrixToVertices = (vertices, matrix) => {
+  vertices.forEach((vertex) => applyMatrix(vertex, matrix))
+
+  return vertices
+}
+
 // modifies the given array in place, centering the points on (0, 0)
 export const centerOnOrigin = (vertices, bounds) => {
   if (vertices.length === 0) return vertices
@@ -326,6 +349,37 @@ export const circle = (radius, start = 0, x = 0, y = 0, resolution = 128.0) => {
   return points
 }
 
+// returns an array of points drawing an ellipse with given radii
+export const ellipse = (rx, ry, cx = 0, cy = 0, resolution = 128.0) => {
+  return ellipticalArc(rx, ry, 0, Math.PI * 2, cx, cy, resolution / 4)
+}
+
+// returns an array of points drawing an elliptical arc
+export const ellipticalArc = (
+  rx,
+  ry,
+  startAngle,
+  endAngle,
+  cx = 0,
+  cy = 0,
+  resolution = 16,
+) => {
+  const steps = Math.max(
+    4,
+    Math.ceil((resolution * Math.abs(endAngle - startAngle)) / (Math.PI / 2)),
+  )
+  const points = []
+
+  for (let i = 0; i <= steps; i++) {
+    const angle = startAngle + ((endAngle - startAngle) * i) / steps
+    points.push(
+      new Victor(cx + Math.cos(angle) * rx, cy + Math.sin(angle) * ry),
+    )
+  }
+
+  return points
+}
+
 export const arc = (
   radius,
   startAngle,