vizcore 0.1.0 → 1.1.0

data/frontend/src/shape-editor-controls.js

@@ -0,0 +1,157 @@
+const SHAPE_KINDS = ["circle", "line", "rect", "polygon", "polyline", "path", "star"];
+
+export const shapeEditorLayerKey = (layer, index) => `${index}:${String(layer?.name || "layer")}`;
+
+export const shapeEditorEntries = (layers, overrides = {}) => {
+  const entries = [];
+  const layerList = Array.isArray(layers) ? layers : [];
+
+  layerList.forEach((layer, layerIndex) => {
+    const shapes = Array.isArray(layer?.params?.shapes) ? layer.params.shapes : [];
+    if (!shapes.length) return;
+
+    const layerKey = shapeEditorLayerKey(layer, layerIndex);
+    const layerName = String(layer?.name || `layer_${layerIndex + 1}`);
+    shapes.forEach((shape, shapeIndex) => {
+      const edited = applyShapePatch(shape, overrides?.[layerKey]?.[shapeIndex]);
+      const id = String(edited?.id || `shape_${shapeIndex + 1}`);
+      const kind = normalizeKind(edited?.kind || edited?.type);
+      entries.push({
+        key: `${layerKey}:shapes.${shapeIndex}`,
+        layerKey,
+        layerName,
+        shapeIndex,
+        shapeId: id,
+        label: `${layerName}.${id}`,
+        kind,
+        values: shapeEditorValues(edited, kind),
+      });
+    });
+  });
+
+  return entries;
+};
+
+export const applyShapeEditorOverrides = (layers, overrides = {}) => {
+  const layerList = Array.isArray(layers) ? layers : [];
+
+  return layerList.map((layer, layerIndex) => {
+    const shapes = Array.isArray(layer?.params?.shapes) ? layer.params.shapes : null;
+    if (!shapes) return layer;
+
+    const layerKey = shapeEditorLayerKey(layer, layerIndex);
+    const layerOverrides = overrides?.[layerKey];
+    if (!layerOverrides || typeof layerOverrides !== "object") return layer;
+
+    return {
+      ...layer,
+      params: {
+        ...(layer?.params || {}),
+        shapes: shapes.map((shape, shapeIndex) => applyShapePatch(shape, layerOverrides[shapeIndex])),
+      },
+    };
+  });
+};
+
+export const pruneShapeEditorOverrides = (overrides = {}, entries = []) => {
+  const validKeys = new Set(entries.map((entry) => `${entry.layerKey}:${entry.shapeIndex}`));
+  const next = {};
+
+  Object.entries(overrides || {}).forEach(([layerKey, layerOverrides]) => {
+    if (!layerOverrides || typeof layerOverrides !== "object") return;
+
+    Object.entries(layerOverrides).forEach(([shapeIndex, patch]) => {
+      if (!validKeys.has(`${layerKey}:${shapeIndex}`) || !patch || typeof patch !== "object") return;
+
+      next[layerKey] ||= {};
+      next[layerKey][shapeIndex] = patch;
+    });
+  });
+
+  return next;
+};
+
+export const normalizeShapeEditorPatch = (values = {}) => {
+  const kind = normalizeKind(values.kind);
+  const output = {
+    kind,
+    opacity: clamp(finiteNumber(values.opacity, 1), 0, 1),
+    stroke_width: Math.max(0, finiteNumber(values.strokeWidth ?? values.stroke_width, 1)),
+    transform: {
+      translate: {
+        x: finiteNumber(values.translateX, 0),
+        y: finiteNumber(values.translateY, 0),
+      },
+      rotate: finiteNumber(values.rotate, 0),
+      scale: {
+        x: clamp(finiteNumber(values.scaleX, 1), -8, 8),
+        y: clamp(finiteNumber(values.scaleY, 1), -8, 8),
+      },
+    },
+  };
+  if (values.fillEnabled !== false && validColor(values.fill)) output.fill = values.fill;
+  if (values.strokeColorEnabled !== false && validColor(values.strokeColor ?? values.stroke_color)) {
+    output.stroke_color = values.strokeColor ?? values.stroke_color;
+  }
+  return output;
+};
+
+const shapeEditorValues = (shape, kind) => {
+  const transform = shape?.transform || {};
+  const translate = vectorValue(transform.translate ?? shape?.translate, { x: 0, y: 0 });
+  const scale = vectorValue(transform.scale ?? shape?.scale, { x: 1, y: 1 });
+  return {
+    kind,
+    translateX: translate.x,
+    translateY: translate.y,
+    rotate: finiteNumber(transform.rotate ?? shape?.rotate ?? shape?.rotation, 0),
+    scaleX: scale.x,
+    scaleY: scale.y,
+    opacity: clamp(finiteNumber(shape?.opacity, 1), 0, 1),
+    fill: validColor(shape?.fill) ? shape.fill : "#000000",
+    fillEnabled: validColor(shape?.fill),
+    strokeColor: validColor(shape?.stroke_color ?? shape?.strokeColor) ? (shape.stroke_color ?? shape.strokeColor) : "#ffffff",
+    strokeColorEnabled: validColor(shape?.stroke_color ?? shape?.strokeColor),
+    strokeWidth: Math.max(0, finiteNumber(shape?.stroke_width ?? shape?.strokeWidth ?? shape?.stroke, 1)),
+  };
+};
+
+const applyShapePatch = (shape, patch) => {
+  if (!patch || typeof patch !== "object") return shape;
+
+  return {
+    ...(shape || {}),
+    ...patch,
+    transform: {
+      ...((shape || {}).transform || {}),
+      ...(patch.transform || {}),
+    },
+  };
+};
+
+const vectorValue = (value, fallback) => {
+  if (Array.isArray(value)) {
+    return { x: finiteNumber(value[0], fallback.x), y: finiteNumber(value[1], fallback.y) };
+  }
+
+  if (value && typeof value === "object") {
+    return { x: finiteNumber(value.x, fallback.x), y: finiteNumber(value.y, fallback.y) };
+  }
+
+  const numeric = finiteNumber(value, null);
+  return numeric === null ? fallback : { x: numeric, y: numeric };
+};
+
+const normalizeKind = (value) => {
+  const kind = String(value || "circle").trim().toLowerCase();
+  return SHAPE_KINDS.includes(kind) ? kind : "circle";
+};
+
+const validColor = (value) => /^#[0-9a-f]{6}$/i.test(String(value || ""));
+
+const finiteNumber = (value, fallback) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+};
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

data/frontend/src/visual-regression.js

@@ -0,0 +1,67 @@
+const DEFAULT_SIZE = 64;
+const HASH_OFFSET = 0x811c9dc5;
+const HASH_PRIME = 0x01000193;
+
+export const lineSegmentsFingerprint = (points, {
+  width = DEFAULT_SIZE,
+  height = DEFAULT_SIZE,
+} = {}) => {
+  const pixels = rasterizeLineSegments(points, { width, height });
+  let hash = HASH_OFFSET;
+
+  for (const value of pixels) {
+    hash ^= value;
+    hash = Math.imul(hash, HASH_PRIME) >>> 0;
+  }
+
+  return hash.toString(16).padStart(8, "0");
+};
+
+export const rasterizeLineSegments = (points, {
+  width = DEFAULT_SIZE,
+  height = DEFAULT_SIZE,
+} = {}) => {
+  const safeWidth = clampInt(width, 8, 512);
+  const safeHeight = clampInt(height, 8, 512);
+  const pixels = new Uint8Array(safeWidth * safeHeight);
+  const input = Array.isArray(points) || ArrayBuffer.isView(points) ? Array.from(points) : [];
+
+  for (let index = 0; index + 3 < input.length; index += 4) {
+    const x1 = normalizedToPixel(input[index], safeWidth);
+    const y1 = normalizedToPixel(-input[index + 1], safeHeight);
+    const x2 = normalizedToPixel(input[index + 2], safeWidth);
+    const y2 = normalizedToPixel(-input[index + 3], safeHeight);
+    drawLine(pixels, safeWidth, safeHeight, x1, y1, x2, y2);
+  }
+
+  return pixels;
+};
+
+const drawLine = (pixels, width, height, x1, y1, x2, y2) => {
+  const dx = Math.abs(x2 - x1);
+  const dy = Math.abs(y2 - y1);
+  const steps = Math.max(dx, dy, 1);
+
+  for (let step = 0; step <= steps; step += 1) {
+    const amount = step / steps;
+    const x = Math.round(x1 + (x2 - x1) * amount);
+    const y = Math.round(y1 + (y2 - y1) * amount);
+    if (x < 0 || y < 0 || x >= width || y >= height) {
+      continue;
+    }
+    pixels[y * width + x] = 255;
+  }
+};
+
+const normalizedToPixel = (value, size) => {
+  const normalized = (clamp(Number(value) || 0, -1, 1) + 1) * 0.5;
+  return Math.round(normalized * (size - 1));
+};
+
+const clampInt = (value, min, max) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return min;
+  return Math.round(Math.min(Math.max(numeric, min), max));
+};
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

data/frontend/src/visual-settings-preset.js

@@ -0,0 +1,103 @@
+export const VISUAL_SETTINGS_PRESET_KEY = "vizcore.visualSettings.v1";
+export const VISUAL_SETTINGS_PRESET_VERSION = 1;
+
+export const DEFAULT_VISUAL_SETTINGS = Object.freeze({
+  visualGain: 2.5,
+  bassBoost: 1.4,
+  smoothing: 0.25,
+  beatHoldMs: 180,
+  wobbleAmount: 1.0,
+});
+
+export const VISUAL_SETTING_LIMITS = Object.freeze({
+  visualGain: [1, 8],
+  bassBoost: [0, 4],
+  smoothing: [0, 0.9],
+  beatHoldMs: [50, 400],
+  wobbleAmount: [0.25, 3],
+});
+
+export const normalizeVisualSettings = (value, fallback = DEFAULT_VISUAL_SETTINGS) => {
+  const input = value && typeof value === "object" ? value : {};
+
+  return Object.fromEntries(
+    Object.entries(DEFAULT_VISUAL_SETTINGS).map(([key, defaultValue]) => {
+      const [min, max] = VISUAL_SETTING_LIMITS[key];
+      const fallbackValue = Number(fallback?.[key] ?? defaultValue);
+      return [key, clampNumber(input[key], min, max, fallbackValue)];
+    })
+  );
+};
+
+export const loadVisualSettingsPreset = (storage, {
+  key = VISUAL_SETTINGS_PRESET_KEY,
+  fallback = DEFAULT_VISUAL_SETTINGS,
+} = {}) => {
+  if (!storage) {
+    return normalizeVisualSettings(fallback);
+  }
+
+  try {
+    const rawValue = storage.getItem(key);
+    if (!rawValue) {
+      return normalizeVisualSettings(fallback);
+    }
+    return normalizeVisualSettings(JSON.parse(rawValue), fallback);
+  } catch {
+    return normalizeVisualSettings(fallback);
+  }
+};
+
+export const saveVisualSettingsPreset = (storage, settings, {
+  key = VISUAL_SETTINGS_PRESET_KEY,
+} = {}) => {
+  const normalized = normalizeVisualSettings(settings);
+  if (!storage) {
+    return normalized;
+  }
+
+  try {
+    storage.setItem(key, JSON.stringify(normalized));
+  } catch {
+    // Ignore storage failures; the active in-memory settings still apply.
+  }
+  return normalized;
+};
+
+export const exportVisualSettingsPreset = (settings) => {
+  return JSON.stringify({
+    version: VISUAL_SETTINGS_PRESET_VERSION,
+    visual_settings: normalizeVisualSettings(settings),
+  }, null, 2);
+};
+
+export const importVisualSettingsPreset = (rawValue, {
+  fallback = DEFAULT_VISUAL_SETTINGS,
+} = {}) => {
+  try {
+    const parsed = typeof rawValue === "string" ? JSON.parse(rawValue) : rawValue;
+    const settings = parsed?.visual_settings || parsed?.settings || parsed;
+    return normalizeVisualSettings(settings, fallback);
+  } catch {
+    return normalizeVisualSettings(fallback);
+  }
+};
+
+export const visualSettingFromUnit = (key, unitValue, fallback = DEFAULT_VISUAL_SETTINGS[key]) => {
+  const limits = VISUAL_SETTING_LIMITS[key];
+  if (!limits) {
+    return Number(fallback ?? 0);
+  }
+
+  const [min, max] = limits;
+  const amount = clampNumber(unitValue, 0, 1, 0);
+  return clampNumber(min + (max - min) * amount, min, max, fallback);
+};
+
+const clampNumber = (value, min, max, fallback) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return fallback;
+  }
+  return Math.min(Math.max(numeric, min), max);
+};