chore(snapshot): sync frontend workspace state

apps/visualizer/src/features/chart/FibRetracementPrimitive.ts

@@ -54,6 +54,8 @@ type State = {
   fib: FibRetracement | null;
   series: ISeriesApi<'Candlestick', Time> | null;
   chart: SeriesAttachedParameter<Time>['chart'] | null;
+  selected: boolean;
+  opacity: number;
 };
 
 class FibPaneRenderer implements IPrimitivePaneRenderer {
@@ -64,8 +66,10 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
   }
 
   draw(target: any) {
-    const { fib, series, chart } = this._getState();
+    const { fib, series, chart, selected, opacity } = this._getState();
     if (!fib || !series || !chart) return;
+    const clampedOpacity = Math.max(0, Math.min(1, opacity));
+    if (clampedOpacity <= 0) return;
 
     const x1 = chart.timeScale().logicalToCoordinate(fib.a.logical as any);
     const x2 = chart.timeScale().logicalToCoordinate(fib.b.logical as any);
@@ -78,6 +82,9 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
     const delta = p1 - p0;
 
     target.useBitmapCoordinateSpace(({ context, bitmapSize, horizontalPixelRatio, verticalPixelRatio }: any) => {
+      context.save();
+      context.globalAlpha *= clampedOpacity;
+      try {
       const xStart = Math.max(0, Math.round(xLeftMedia * horizontalPixelRatio));
       let xEnd = Math.min(bitmapSize.width, Math.round(xRightMedia * horizontalPixelRatio));
       if (xEnd <= xStart) xEnd = Math.min(bitmapSize.width, xStart + Math.max(1, Math.round(1 * horizontalPixelRatio)));
@@ -132,7 +139,7 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
         const bx = Math.round(x2 * horizontalPixelRatio);
         const by = Math.round(y1 * verticalPixelRatio);
 
-        context.strokeStyle = 'rgba(226,232,240,0.55)';
+        context.strokeStyle = selected ? 'rgba(250,204,21,0.65)' : 'rgba(226,232,240,0.55)';
         context.lineWidth = Math.max(1, Math.round(1 * horizontalPixelRatio));
         context.setLineDash([Math.max(2, Math.round(5 * horizontalPixelRatio)), Math.max(2, Math.round(5 * horizontalPixelRatio))]);
         context.beginPath();
@@ -141,14 +148,23 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
         context.stroke();
         context.setLineDash([]);
 
-        const r = Math.max(2, Math.round(3 * horizontalPixelRatio));
-        context.fillStyle = 'rgba(147,197,253,0.95)';
+        const r = Math.max(2, Math.round((selected ? 4 : 3) * horizontalPixelRatio));
+        context.fillStyle = selected ? 'rgba(250,204,21,0.95)' : 'rgba(147,197,253,0.95)';
+        if (selected) {
+          context.strokeStyle = 'rgba(15,23,42,0.85)';
+          context.lineWidth = Math.max(1, Math.round(1 * horizontalPixelRatio));
+        }
         context.beginPath();
         context.arc(ax, ay, r, 0, Math.PI * 2);
         context.fill();
+        if (selected) context.stroke();
         context.beginPath();
         context.arc(bx, by, r, 0, Math.PI * 2);
         context.fill();
+        if (selected) context.stroke();
+      }
+      } finally {
+        context.restore();
       }
     });
   }
@@ -170,11 +186,19 @@ export class FibRetracementPrimitive implements ISeriesPrimitive<Time> {
   private _param: SeriesAttachedParameter<Time> | null = null;
   private _series: ISeriesApi<'Candlestick', Time> | null = null;
   private _fib: FibRetracement | null = null;
+  private _selected = false;
+  private _opacity = 1;
   private readonly _paneView: FibPaneView;
   private readonly _paneViews: readonly IPrimitivePaneView[];
 
   constructor() {
-    this._paneView = new FibPaneView(() => ({ fib: this._fib, series: this._series, chart: this._param?.chart ?? null }));
+    this._paneView = new FibPaneView(() => ({
+      fib: this._fib,
+      series: this._series,
+      chart: this._param?.chart ?? null,
+      selected: this._selected,
+      opacity: this._opacity,
+    }));
     this._paneViews = [this._paneView];
   }
 
@@ -196,4 +220,14 @@ export class FibRetracementPrimitive implements ISeriesPrimitive<Time> {
     this._fib = next;
     this._param?.requestUpdate();
   }
+
+  setSelected(next: boolean) {
+    this._selected = next;
+    this._param?.requestUpdate();
+  }
+
+  setOpacity(next: number) {
+    this._opacity = Number.isFinite(next) ? next : 1;
+    this._param?.requestUpdate();
+  }
 }