@micheeeeel/yinyangapp 1.0.6 → 2.0.0

package/dist/types/components/view/BorderDrawer.d.ts

@@ -1,21 +1,53 @@
+import { IGraphicElement } from "../../interfaces/IGraphicElement";
 import { ViewInitializer } from "./ViewInitializer";
 export declare class BorderDrawer {
     private ViewInitializer;
+    private readonly debugTag;
     private viewData;
     private yinYangGroup;
+    private borderArcsGroup;
+    private facetteImageBackgroundGroup;
     private graphicStrategy;
-    private positionX;
-    private positionY;
-    private innerRadius;
-    private outerRadius;
-    private borderThickness;
-    private categories;
-    private isChild;
+    private geometry;
     private containerId;
     private key;
+    private borderSegmentElements;
+    private lastActiveIndex;
+    private currentBeaconIndex;
+    private persistentSourceIndex;
+    private beaconPulseActive;
+    private arcsInitialized;
+    private facetteImageRingGroup;
+    private readonly facetteImageElements;
+    private readonly facetteImagePositions;
+    private revealedFacetteImageIndex;
+    /** Default "voile terne" filter applied to every facette image — lifted
+     *  (see revealFacetteImage) only for the facette the outer spark is
+     *  currently sweeping over. */
+    private readonly facetteImageVeilFilter;
+    private _hoverSegmentIndex;
+    /** Segment currently under the mouse pointer, tracked separately from
+     *  _hoverSegmentIndex (which comes from the Recherche tree) so neither
+     *  source clears the other's lift. */
+    private _pointerHoverIndex;
+    /** Callback déclenché quand la souris entre/sort d'un arc de bordure. */
+    private _onBorderHoverCb;
+    setOnBorderHover(cb: (index: number | null) => void): void;
+    private readonly segmentOutlineWidth;
+    /** Single def shared by every segment's bevel overlay — see
+     *  createSegmentBevelGradient. */
+    private readonly bevelGradientId;
+    private readonly activeOutlineWidth;
+    private readonly inactiveOutlineColor;
+    private readonly activeOutlineColor;
+    private readonly sourceBeaconColor;
+    private borderGhostGroupNode;
+    private borderGhostEntries;
+    private borderGhostFrameId;
     constructor(ViewInitializer: ViewInitializer);
     /**
      * Initializes the properties needed for drawing borders based on the ViewInitializer data.
+     * Uses borderArcsGroup for the persistent per-component border arcs.
      */
     initialize(): void;
     /**
@@ -25,18 +57,176 @@ export declare class BorderDrawer {
     createBorders(): void;
     /**
      * Draws an individual border around the Yin Yang pattern using a gradient or mask.
+     * For the main pattern, the border is rendered as transparent with only the black gradient relief.
      *
      * @param innerRadius - The inner radius of the border.
      * @param outerRadius - The outer radius of the border.
      * @param index - Index of the border, used for generating unique identifiers.
      */
-    drawBorder(innerRadius: number, outerRadius: number, index?: number): void;
+    drawBorder(innerRadius: number, outerRadius: number, _index?: number, container?: IGraphicElement): void;
     /**
-     * Creates a mask and a linear gradient for the borders. The gradient animates the border colors.
+     * Creates border segment elements once in borderArcsGroup.
+     * These elements persist across redraws (never destroyed) and event listeners stay intact.
+     * Only called once via the arcsInitialized flag.
+     */
+    private createBorderSegmentElements;
+    /** Corner rounding applied to every segment arc, derived from the live
+     *  `borderSegmentCornerRadius` control: 0 keeps the raw pie-slice corners,
+     *  1 turns each arc into a capsule (radius = half the band thickness). */
+    private getSegmentCornerRadius;
+    /** Shared bevel gradient for every segment: a radial gradient centred on the
+     *  sphere, in user space, so a single def shades all arcs identically
+     *  whatever their angle — dark at the inner edge, neutral in the middle,
+     *  lit crest at the resting outer edge. Its outer extent covers the fully
+     *  expanded radius an active arc reaches, and fades back to transparent
+     *  past the resting rim, so a growing arc looks like it swells out from
+     *  under the glass rather than dragging a flat white slab with it. */
+    private createSegmentBevelGradient;
+    /** Extra outer radius an active segment may grow by. Shared by the width
+     *  animation and the bevel gradient so both agree on where the resting rim
+     *  sits inside the gradient. */
+    private getMaxOuterRadiusIncrease;
+    /** Applies the radial hover lift to every segment: an arc pointed at by the
+     *  cursor — or highlighted from the Recherche tree via setHoverSegment —
+     *  slides outward along its own mid-angle, which is the physical "this is a
+     *  button" affordance the flat ring was missing. Driven off the whole hover
+     *  state rather than a single index so the two sources can't cancel each
+     *  other out. */
+    private refreshSegmentLifts;
+    /**
+     * Draws the border-ring ghost overlay from ViewInitializer.borderSegmentsGhost:
+     * a dashed gold arc at each facette's projected boundary (filled wash if
+     * the facette grows, outline only if it shrinks — same asymmetry as
+     * WeightPreviewRingRenderer), plus a traveling wave arc sweeping between
+     * the real and projected boundary. Because buildGhostBorderSegments
+     * renormalizes the whole ring, every facette is redrawn here, not just the
+     * one whose own weightDelta actually changed. No-op on children — border
+     * segments (and their ghosts) only exist on the parent sphere.
+     */
+    drawBorderSegmentGhosts(): void;
+    private getBorderGhostRadii;
+    private drawBorderGhostArcs;
+    private ensureBorderGhostLoop;
+    private stopBorderGhostLoop;
+    /** Traveling wave that sweeps each boundary angle between its real
+     *  position and its projected ghost position, on the same lap
+     *  duration/easing as the yin/yang tension ghost's wave (see
+     *  YinYangDrawer.updateGhostWaveAnimation and
+     *  ViewInitializer.waveTravelDurationSec). Boundaries are shared between
+     *  adjacent facette segments (segment[i].endAngle === segment[i+1].startAngle
+     *  in both the base and ghost sets), so interpolating every segment with
+     *  the same phase keeps the ring visually contiguous throughout. */
+    private updateBorderGhostWave;
+    /**
+     * Handles a click on a composante's border arc segment (or its image
+     * thumbnail — see createFacetteImageRing): toggles satellite visibility if
+     * it's already the current segment, otherwise switches the diagram to it.
+     */
+    handleSegmentClick(segmentIndex: number, category: string): void;
+    /**
+     * Creates one clickable circular thumbnail per composante, positioned along
+     * the radial axis of its border-arc segment, just outside the ring. Created
+     * once (persists across redraws, like the border segments themselves) —
+     * it lives in borderArcsGroup so it scales along with the rest of the
+     * pattern when resizeWholePattern() shrinks the diagram for satellites.
      *
-     * @param innerRadius - The inner radius of the border.
-     * @param outerRadius - The outer radius of the border.
-     * @param index - Index of the border, used for generating unique identifiers.
+     * Sized to fill whatever room is actually left between the ring and the
+     * container edge: resizeWholePattern() (applyChildrenFitScale, reserving
+     * room for satellites) has already run by the time this is called — see
+     * YinYangController.createFacetteImageRing() — so patternScale reflects the
+     * real shrink. Everything here is expressed in the pre-scale coordinate
+     * space (like the rest of borderArcsGroup), so the "available" reach up to
+     * the container edge in that space is containerRadius / patternScale.
+     */
+    createFacetteImageRing(): void;
+    /** Tears down and recreates the facette image ring so live-tuned parameters
+     *  (margin, fade start/opacity — see the "Images facette" dev controls) take
+     *  effect immediately. */
+    rebuildFacetteImageRing(): void;
+    /** Lifts the "voile terne" on one facette's image, veiling every other one
+     *  — only one can be unveiled at a time. Driven by the outer spark
+     *  sweeping across border arcs. Veils *all* others rather than just the
+     *  previously-tracked index, so this also correctly restores the
+     *  single-spotlight invariant the first time it's called after Idle
+     *  (where every image starts unveiled, not just one). */
+    revealFacetteImage(segmentIndex: number): void;
+    /** Center + radius (pre-scale coordinate space) of a facette's image
+     *  thumbnail, so labels can be anchored onto the image instead of
+     *  floating radially around the sphere. */
+    getFacetteImagePosition(segmentIndex: number): {
+        x: number;
+        y: number;
+        radius: number;
+    } | undefined;
+    private getSegmentMidAngle;
+    private getPointOnAngle;
+    /**
+     * Immediately activates the gold outline + width-expansion style on the given
+     * segment index, mirroring what happens on a manual arc click.
+     * Call this whenever a component switch is triggered programmatically
+     * (e.g. from the action stack) so the border stays in sync from the very
+     * start of the transition animation.
+     */
+    activateSegment(segmentIndex: number): void;
+    /** Resets all arc segments to inactive style (e.g. when satellites are
+     *  folded) and returns to Idle: every facette image goes back to full
+     *  color, exactly like a fresh load. */
+    deactivateSegment(): void;
+    /** Restores every facette image to full color — the Idle visual, reached
+     *  both at true init and whenever no facette is currently active (e.g.
+     *  after deselecting one via deactivateSegment). */
+    revealAllFacetteImages(): void;
+    /**
+     * Highlights the source component border arc with a temporary beacon.
+     * Used during a component switch when the active action has no visible force field.
+     */
+    flashSourceBeacon(segmentIndex: number): void;
+    /**
+     * Clears the persistent source highlight when the action context is removed.
+     */
+    clearSourceBeacon(): void;
+    /**
+     * Applique un survol léger sur un segment de bordure (hover depuis l'arbre Recherche).
+     * N'affecte pas l'index actif — simple classe CSS ajoutée/retirée.
+     */
+    setHoverSegment(segmentIndex: number | null): void;
+    /** Rebuilds every border segment so the live-tuned shape parameters (corner
+     *  radius, bevel intensity) take effect immediately — the arcs themselves
+     *  are otherwise built exactly once, at init. Mirrors
+     *  rebuildFacetteImageRing. The active/beacon state is re-applied at the
+     *  end so a rebuild is visually invisible apart from the tuned parameter. */
+    rebuildBorderSegments(): void;
+    /**
+     * Updates the style of border segments based on active index (lightweight, no redraw)
+     * Only updates if the active index has actually changed
+     */
+    private updateBorderSegmentStyles;
+    private applySegmentStyle;
+    private getTotalBordersGroup;
+    /**
+     * Applies color animation to a segment's gradient, making it cycle through category colors
+     */
+    private applySegmentColorAnimation;
+    /**
+     * Removes color animation from a segment's gradient
+     */
+    private removeSegmentColorAnimation;
+    /**
+     * Applies an animation that only increases the segment outer radius.
+     * The inner radius remains unchanged.
+     */
+    private applySegmentOuterWidthAnimation;
+    private startBeaconPulse;
+    private toRgba;
+    /**
+     * Builds the ODD gradient painted inside one facette's arc.
+     *
+     * The gradient axis is the chord running from the start of the arc to its
+     * end, taken at mid-thickness, in the arc's own (origin-centred) user space
+     * — so the ODDs are read *along the button*, first to last, wherever the
+     * facette sits on the ring. It used to be a bounding-box gradient running
+     * plain left-to-right, which happened to read correctly only for arcs near
+     * the top of the circle and ran across the arc for the ones on the sides.
      */
-    private CreateBorderMaskAndGradient;
+    private createSegmentGradient;
 }

package/dist/types/components/view/SpikeDrawer.d.ts

@@ -1,17 +1,13 @@
-import { ICategory } from "../../interfaces/ICategory";
 import { ViewInitializer } from "./ViewInitializer";
-import { IYinOrYangPattern } from "../../interfaces/IYinOrYangPattern";
 export declare class SpikeDrawer {
     private ViewInitializer;
-    private categories;
-    private isChild;
-    private yinOrYangGroup;
-    private sortedData;
-    private positionX;
-    private viewData;
+    private geometry;
     private containerId;
     private key;
     private graphicStrategy;
+    spikesEnabled: boolean;
+    private spikeGhostEntries;
+    private spikeGhostFrameId;
     constructor(ViewInitializer: ViewInitializer);
     /**
      * Initializes the necessary data for drawing spikes.
@@ -23,32 +19,42 @@ export declare class SpikeDrawer {
      */
     createSpikes(): void;
     /**
-     * Loops through both Yin and Yang groups and calls the spike drawing function for each.
+     * Refreshes spikes: clears existing ones and redraws if enabled.
      */
-    drawYinYangSpikes(yinOrYangGroup: {
-        yin: IYinOrYangPattern;
-        yang: IYinOrYangPattern;
-    }): void;
+    refreshSpikes(): void;
+    private clearSpikes;
+    private drawSpikes;
+    private drawSpike;
     /**
-     * Draws spikes for either Yin or Yang based on the data.
-     * The spikes are drawn for each category, with different sizes and positions.
-     *
-     * @param centerY - The Y coordinate of the center.
-     * @param radius - The radius of the element (Yin or Yang).
-     * @param type - Whether the element is "yin" or "yang".
+     * Draws the weightDelta ghost overlay from ViewInitializer.spikesGhost on
+     * both yin and yang: a dashed gold line to each targeted spike's projected
+     * tip (same asymmetric dash as the border/ODD-arc ghosts, though a spike
+     * has no fill to speak of), plus a dot that travels between the real and
+     * projected tip. Unlike the arc ghosts, only spikes with an active
+     * weightDelta appear here — a spike's length never depends on its
+     * siblings. Called after every drawSpikes (so it always reflects the
+     * latest real spikes) and standalone from ViewInitializer.updateSpikeGhost
+     * for weight-only preview updates.
      */
-    drawYinOrYangSpikes(centerY: number, radius: number, type: "yin" | "yang"): void;
+    drawSpikeGhosts(): void;
+    private drawSpikeGhostsForType;
+    private drawSpikeGhostLines;
+    private ensureSpikeGhostLoop;
+    private stopSpikeGhostLoop;
+    /** Dot that travels between a spike's real tip and its projected tip, on
+     *  the same lap duration/easing as the border-segment and ODD-arc ghost
+     *  waves (see ViewInitializer.waveTravelDurationSec) — the line-segment
+     *  analog of their traveling arcs. Re-queries the layer node each frame
+     *  instead of caching it, since a full redraw can replace it between
+     *  frames. */
+    private updateSpikeGhostWave;
     /**
-     * Draws individual spikes based on the data, angle, and category.
-     * Each spike's length is determined by the score of the associated data item.
-     *
-     * @param cat - The category of the data item.
-     * @param centerY - The Y coordinate of the center.
-     * @param smallRadius - The radius of the inner circle.
-     * @param radius - The radius of the outer circle.
-     * @param type - Whether the element is "yin" or "yang".
-     * @param startAngle - The starting angle of the spike.
-     * @param endAngle - The ending angle of the spike.
+     * Highlights the spikes (yin + yang) corresponding to a given ODD and cutting index
+     * with a glow effect similar to the active child style.
      */
-    drawSpikes(cat: ICategory, centerY: number, smallRadius: number, radius: number, type: "yin" | "yang", startAngle: number, endAngle: number): void;
+    highlightSpikeByCuttingIndex(oddId: string, cuttingIndex: number): void;
+    /**
+     * Restores all spikes to their default appearance.
+     */
+    unhighlightSpikes(): void;
 }