src/core/visualTokens.js - master - nek5132/Genius

src/core/visualTokens.js
166 строк4 KB
Peter Kosov
feat(rotation): implement hub-centered connected-component rotation; include ancestors + spouses and their descendants; exclude hub descendants; live-edge routing; add debug logs; update tests and docs
14 апр 2026, 12:11
14 апр 2026, 12:11a241f08
export const VISUAL_TOKENS = {
  color: {
    bg: {
      light: 0xffffff,
      dark: 0x1a1a2e,
      colorblind: 0xffffff,
      warm: 0xFFF8F0,
      cool: 0xF0F8FF,
      forest: 0xF5FFF5,
      ocean: 0xF0FFFF,
      pastel: 0xFFFAF0,
      midnight: 0x0D0D1A,
      sepia: 0xF5E6D3
    },
    edge: {
      light: 0x6C757D,
      dark: 0x888888,
      colorblind: 0x009988,
      warm: 0xA08060,
      cool: 0x708090,
      forest: 0x6B8E23,
      ocean: 0x5F9EA0,
      pastel: 0xD3D3D3,
      midnight: 0x404060,
      sepia: 0xA0826D
    },
    person: {
      male: {
        light: 0xf0f0f0,
        dark: 0x444444,
        colorblind: 0x0077BB,
        warm: 0xFFE4C4,
        cool: 0xB0C4DE,
        forest: 0x90EE90,
        ocean: 0xAFEEEE,
        pastel: 0xFFF0F5,
        midnight: 0x1A1A2E,
        sepia: 0xE8D4B8
      },
      female: {
        light: 0xf5f5f5,
        dark: 0x505050,
        colorblind: 0xEE7733,
        warm: 0xFFDAB9,
        cool: 0xADD8E6,
        forest: 0x98FB98,
        ocean: 0xB0E0E6,
        pastel: 0xF0FFF0,
        midnight: 0x262640,
        sepia: 0xDECAB6
      }
    },
    hub: {
      light: 0xDC3545,
      dark: 0xFF6B6B,
      colorblind: 0xCC3311,
      warm: 0xE07B39,
      cool: 0x4682B4,
      forest: 0x228B22,
      ocean: 0x20B2AA,
      pastel: 0xFFB6C1,
      midnight: 0xFF6B9D,
      sepia: 0x8B4513
    },
    hubRotation: {
      canDescendants: 0x00C853,
      canAncestorsOnly: 0x2962FF,
      blocked: 0xFF1744
    },
    selection: {
      selected: 0xD4A84B,
      selectedEmissive: 0x8B6914,
      ancestor: 0x9EAABC,
      descendant: 0xB8C9A8,
      ancestorEmissive: 0x5A6A7A,
      descendantEmissive: 0x6A7A58
    },
    emissive: {
      default: 0x444444,
      soft: 0x222222,
      selection: 0x8B6914
    },
    specular: {
      default: 0xaaaaaa,
      edge: 0x333333,
      hub: 0x666666
    },
    generic: {
      default: 0x4A90D9,
      leaf: 0x4AD97A,
      root: 0x7B61FF,
      accent: 0xF5A623
    },
    debug: {
      bounds: 0x00ff00,
      pivot: 0xff00ff
    },
    grid: {
      primary: 0xeeeeee,
      secondary: 0xf5f5f5
    },
    hubGradient: {
      inner: 0xFF6B6B,
      middle: 0xDC3545,
      outer: 0x990011,
      emissive: 0x440000
    }
  },
  material: {
    shininess: {
      default: 20,
      accent: 25,
      hub: 40
    }
  },
  shape: {
    personSize: 16,
    hubRadius: 12,
    photoWidth: 48,
    photoHeight: 35,
    photoBorderRadius: 4
  },
  layout: {
    labelOffsetNoPhoto: 35,
    labelOffsetPhoto: 70,
    labelFadeDistance: 1800,
    labelMinScale: 0.3,
    labelMaxScale: 1.65,
    labelBaseOpacity: 0.82,
    labelMinOpacity: 0,
    labelCollisionGap: 12,
    labelCollisionMinScale: 0.84,
    labelCollisionShrinkFactor: 0.985,
    labelCollisionIterations: 8,
    labelPositionSmoothing: 0.22,
    labelScaleFactor2d: 0.0016,
    labelScaleFactor3d: 0.0022,
    labelScreenGap: 10,
    animationDuration: 300,
    gridOpacity: 0.25
  }
};

export const VISUAL_THEME_NAMES = [
  'light', 'dark', 'colorblind',
  'warm', 'cool', 'forest', 'ocean',
  'pastel', 'midnight', 'sepia'
];

export function getVisualThemeTokens(theme = 'light') {
  const t = VISUAL_TOKENS.color;
  return {
    bg: t.bg[theme] ?? t.bg.light,
    edge: t.edge[theme] ?? t.edge.light,
    male: t.person.male[theme] ?? t.person.male.light,
    female: t.person.female[theme] ?? t.person.female.light,
    hub: t.hub[theme] ?? t.hub.light,
    selection: t.selection,
    ancestor: t.ancestor,
    descendant: t.descendant,
    emissive: t.emissive.default,
    specular: t.specular.default,
    specularEdge: t.specular.edge,
    specularHub: t.specular.hub
  };
}