Merge pull request #153 from shift-editor/agent/glyph-projection-views

Use reusable glyph projections for renderer views

Author: kostyafarber

apps/desktop/package.json

@@ -60,7 +60,6 @@
     "@shift/types": "workspace:*",
     "@shift/ui": "workspace:*",
     "@shift/validation": "workspace:*",
-    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-virtual": "^3.13.18",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",

apps/desktop/src/renderer/src/app/App.tsx

@@ -1,27 +1,23 @@
 import "./App.css";
-import { QueryClientProvider } from "@tanstack/react-query";
 import { HashRouter } from "react-router-dom";
 
 import { ThemeProvider } from "@/context/ThemeContext";
 import { FocusZoneProvider } from "@/context/FocusZoneContext";
 import { ZoomToast } from "@/components/chrome/ZoomToast";
-import { rendererQueryClient } from "@/lib/query/queryClient";
 
 import { Screens } from "./Screens";
 
 export const App = () => {
   return (
-    <QueryClientProvider client={rendererQueryClient}>
-      <ThemeProvider defaultTheme="light">
-        <ZoomToast>
-          <FocusZoneProvider defaultZone="canvas">
-            <HashRouter>
-              <Screens />
-            </HashRouter>
-          </FocusZoneProvider>
-        </ZoomToast>
-      </ThemeProvider>
-    </QueryClientProvider>
+    <ThemeProvider defaultTheme="light">
+      <ZoomToast>
+        <FocusZoneProvider defaultZone="canvas">
+          <HashRouter>
+            <Screens />
+          </HashRouter>
+        </FocusZoneProvider>
+      </ZoomToast>
+    </ThemeProvider>
   );
 };
 

apps/desktop/src/renderer/src/components/home/GlyphGrid.tsx

@@ -43,25 +43,22 @@
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useQueries } from "@tanstack/react-query";
 import { type VirtualItem, useVirtualizer } from "@tanstack/react-virtual";
 import { CELL_HEIGHT, GlyphPreview } from "@/components/home/GlyphPreview";
-import { useEditor, useWorkspace } from "@/workspace/WorkspaceContext";
+import { useEditor } from "@/workspace/WorkspaceContext";
 import { getGlyphInfo } from "@/workspace/glyphInfo";
 import { type GlyphCatalogItem, useGlyphCatalog } from "@/context/GlyphCatalogContext";
-import { useSignalState } from "@/lib/signals";
+import { useGlyphViews } from "@/hooks/useGlyphViews";
 import { Button, Input } from "@shift/ui";
-import type { GlyphId, GlyphName, GlyphPreview as GlyphPreviewValue } from "@shift/types";
+import type { GlyphId, GlyphName } from "@shift/types";
 
 const ROW_HEIGHT = CELL_HEIGHT + 40 + 8;
 const NOMINAL_CELL_WIDTH = 100;
 const GAP = 8;
 const SCROLL_PADDING = 4;
 const ROW_PADDING_X = 4;
 const OVERSCAN = 5;
-const GLYPH_QUERY_CHUNK_SIZE = 32;
-const GLYPH_QUERY_OVERSCAN_CHUNKS = 1;
-const GLYPH_QUERY_GC_TIME = 30_000;
+const PROJECTION_OVERSCAN = 32;
 
 function computeLayout(width: number) {
   const availableWidth = width - SCROLL_PADDING - ROW_PADDING_X;
@@ -91,13 +88,9 @@ function visibleGlyphRowsForRows(
 
 export const GlyphGrid = memo(function GlyphGrid() {
   const navigate = useNavigate();
-  const workspace = useWorkspace();
-  const editor = workspace.editor;
+  const editor = useEditor();
   const font = editor.font;
   const metrics = font.metrics;
-  const designLocation = useSignalState(editor.designLocationCell, { schedule: "frame" });
-  const documentState = useSignalState(workspace.documentStateCell);
-  const documentId = documentState?.documentId ?? null;
   const { filteredGlyphs: catalogGlyphs } = useGlyphCatalog();
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -148,59 +141,17 @@ export const GlyphGrid = memo(function GlyphGrid() {
   const visibleEndIndex = lastVisibleRow
     ? Math.min(catalogGlyphs.length, (lastVisibleRow.index + 1) * columns)
     : 0;
-  const previewGlyphChunks = useMemo((): readonly (readonly GlyphId[])[] => {
+  const previewGlyphIds = useMemo((): readonly GlyphId[] => {
     if (visibleEndIndex <= visibleStartIndex) return [];
 
-    const queryStartIndex = Math.max(
-      0,
-      visibleStartIndex - GLYPH_QUERY_OVERSCAN_CHUNKS * GLYPH_QUERY_CHUNK_SIZE,
-    );
-    const queryEndIndex = Math.min(
-      catalogGlyphs.length,
-      visibleEndIndex + GLYPH_QUERY_OVERSCAN_CHUNKS * GLYPH_QUERY_CHUNK_SIZE,
-    );
-    const firstChunkStart =
-      Math.floor(queryStartIndex / GLYPH_QUERY_CHUNK_SIZE) * GLYPH_QUERY_CHUNK_SIZE;
-    const chunks: GlyphId[][] = [];
-
-    for (
-      let chunkStart = firstChunkStart;
-      chunkStart < queryEndIndex;
-      chunkStart += GLYPH_QUERY_CHUNK_SIZE
-    ) {
-      chunks.push(
-        catalogGlyphs
-          .slice(chunkStart, chunkStart + GLYPH_QUERY_CHUNK_SIZE)
-          .map((glyph) => glyph.id),
-      );
-    }
-
-    return chunks;
+    const startIndex = Math.max(0, visibleStartIndex - PROJECTION_OVERSCAN);
+    const endIndex = Math.min(catalogGlyphs.length, visibleEndIndex + PROJECTION_OVERSCAN);
+    return catalogGlyphs.slice(startIndex, endIndex).map((glyph) => glyph.id);
   }, [catalogGlyphs, visibleEndIndex, visibleStartIndex]);
-  const locationKey = useMemo(
-    () => [...designLocation].sort(([left], [right]) => left.localeCompare(right)),
-    [designLocation],
-  );
-  const glyphChunkQueries = useQueries({
-    queries: previewGlyphChunks.map((glyphIds) => ({
-      queryKey: ["glyph-previews", documentId, locationKey, glyphIds] as const,
-      queryFn: async (): Promise<readonly GlyphPreviewValue[]> => {
-        try {
-          return await font.glyphPreviews(glyphIds, designLocation);
-        } catch (error) {
-          console.error("failed to resolve glyph preview chunk", error);
-          throw error;
-        }
-      },
-      enabled: documentId !== null,
-      staleTime: Infinity,
-      gcTime: GLYPH_QUERY_GC_TIME,
-    })),
-  });
-  const previewsByGlyphId = new Map(
-    glyphChunkQueries
-      .flatMap((query) => query.data ?? [])
-      .map((preview) => [preview.glyphId, preview] as const),
+  const glyphViews = useGlyphViews(font, previewGlyphIds, editor.designLocationCell);
+  const viewsByGlyphId = useMemo(
+    () => new Map(previewGlyphIds.map((glyphId, index) => [glyphId, glyphViews[index]] as const)),
+    [glyphViews, previewGlyphIds],
   );
 
   const handleCellClick = useCallback(
@@ -263,8 +214,7 @@ export const GlyphGrid = memo(function GlyphGrid() {
                         onClick={() => handleCellClick(glyph)}
                       >
                         <GlyphPreview
-                          preview={previewsByGlyphId.get(glyph.id) ?? null}
-                          unicode={glyph.unicode}
+                          view={viewsByGlyphId.get(glyph.id) ?? null}
                           metrics={metrics}
                           height={CELL_HEIGHT}
                         />

apps/desktop/src/renderer/src/components/home/GlyphPreview.tsx

@@ -1,4 +1,6 @@
-import type { FontMetrics, GlyphPreview as GlyphPreviewValue } from "@shift/types";
+import type { FontMetrics } from "@shift/types";
+import { useSignalState } from "@/lib/signals";
+import type { GlyphView } from "@/lib/model/Glyph";
 
 export const CELL_HEIGHT = 75;
 
@@ -40,36 +42,32 @@ export function computeCellWidth(
 }
 
 interface GlyphPreviewProps {
-  preview: GlyphPreviewValue | null;
-  unicode: number | null;
+  view: GlyphView | null;
   metrics: FontMetrics;
   height?: number;
 }
 
-export function GlyphPreview({
-  preview,
-  unicode,
-  metrics,
-  height = CELL_HEIGHT,
-}: GlyphPreviewProps) {
-  if (!preview) {
-    return <FallbackCell metrics={metrics} height={height} unicode={unicode} advance={null} />;
+export function GlyphPreview({ view, metrics, height = CELL_HEIGHT }: GlyphPreviewProps) {
+  if (!view) {
+    // Showing the system font here makes fast scrolling flash the wrong glyph
+    // before the authored projection arrives.
+    return <div style={{ width: height, height }} />;
   }
 
-  return <GlyphCell metrics={metrics} height={height} preview={preview} />;
+  return <GlyphCell metrics={metrics} height={height} view={view} />;
 }
 
 function GlyphCell({
   metrics,
   height,
-  preview,
+  view,
 }: {
   metrics: FontMetrics;
   height: number;
-  preview: GlyphPreviewValue;
+  view: GlyphView;
 }) {
-  const svgPath = preview.svgPath;
-  const advance = preview.xAdvance;
+  const svgPath = useSignalState(view.render.outline.svgPathCell, { schedule: "frame" });
+  const advance = useSignalState(view.xAdvanceCell, { schedule: "frame" });
 
   const cellWidth = computeCellWidth(metrics, advance, height);
   const containerStyle = { width: cellWidth, height };
@@ -96,29 +94,3 @@ function GlyphCell({
     </div>
   );
 }
-
-function FallbackCell({
-  metrics,
-  height,
-  unicode,
-  advance,
-}: {
-  metrics: FontMetrics;
-  height: number;
-  unicode: number | null;
-  advance: number | null;
-}) {
-  const cellWidth = computeCellWidth(metrics, advance, height);
-  const label = unicode === null ? "" : String.fromCodePoint(unicode);
-
-  return (
-    <div
-      style={{ width: cellWidth, height }}
-      className="flex items-center justify-center text-secondary"
-    >
-      <span className="text-2xl" style={{ fontSize: height * 0.5 }}>
-        {label}
-      </span>
-    </div>
-  );
-}

apps/desktop/src/renderer/src/hooks/useGlyphViews.ts

@@ -0,0 +1,46 @@
+import { useEffect, useMemo } from "react";
+import type { GlyphId } from "@shift/types";
+import type { Signal } from "@/lib/signals";
+import { useSignalState } from "@/lib/signals";
+import type { Font } from "@/lib/model/Font";
+import type { GlyphView } from "@/lib/model/Glyph";
+import type { AxisLocation } from "@/types/variation";
+
+/**
+ * Returns location-bound glyph views and requests any missing lightweight backing.
+ *
+ * @remarks
+ * Projection reads are keyed only by glyph identity. The returned views follow
+ * `location` through Shift's signal graph, so scrubbing evaluates the currently
+ * observed views without issuing bridge reads or retaining old locations.
+ *
+ * @param font - Font that owns the glyphs and their projection backing.
+ * @param glyphIds - Stable ordered glyph identities needed by the caller.
+ * @param location - Shared reactive designspace location for every returned view.
+ * @returns Views aligned with `glyphIds`; entries remain `null` until backing arrives.
+ */
+export function useGlyphViews(
+  font: Font,
+  glyphIds: readonly GlyphId[],
+  location: Signal<AxisLocation>,
+): readonly (GlyphView | null)[] {
+  const viewsCell = useMemo(
+    () => font.glyphViewsCell(glyphIds, location),
+    [font, glyphIds, location],
+  );
+  const views = useSignalState(viewsCell);
+
+  useEffect(() => {
+    async function requestViews(): Promise<void> {
+      try {
+        await font.requestGlyphViews(glyphIds);
+      } catch (error) {
+        console.error("failed to read glyph projections", error);
+      }
+    }
+
+    void requestViews();
+  }, [font, glyphIds, views]);
+
+  return views;
+}

apps/desktop/src/renderer/src/lib/editor/rendering/overlays/DebugOverlays.ts

@@ -1,11 +1,11 @@
 import type { Canvas } from "../Canvas";
-import type { GlyphInstanceGeometry } from "@/lib/model/Glyph";
+import type { GlyphViewGeometry } from "@/lib/model/Glyph";
 import type { SegmentId } from "@/types/indicator";
 
 export class DebugOverlays {
   draw(
     canvas: Canvas,
-    geometry: GlyphInstanceGeometry,
+    geometry: GlyphViewGeometry,
     overlays: {
       segmentBounds: boolean;
       tightBounds: boolean;
@@ -31,7 +31,7 @@ export class DebugOverlays {
     }
   }
 
-  #drawSegmentBounds(canvas: Canvas, geometry: GlyphInstanceGeometry, color: string): void {
+  #drawSegmentBounds(canvas: Canvas, geometry: GlyphViewGeometry, color: string): void {
     for (const contour of geometry.contours) {
       for (const segment of contour.segments()) {
         const b = segment.bounds;
@@ -42,7 +42,7 @@ export class DebugOverlays {
 
   #drawTightBounds(
     canvas: Canvas,
-    geometry: GlyphInstanceGeometry,
+    geometry: GlyphViewGeometry,
     hoveredSegmentId: SegmentId | null,
     color: string,
   ): void {
@@ -59,7 +59,7 @@ export class DebugOverlays {
 
   #drawHitRadii(
     canvas: Canvas,
-    geometry: GlyphInstanceGeometry,
+    geometry: GlyphViewGeometry,
     hitRadiusUpm: number,
     color: string,
   ): void {
@@ -69,7 +69,7 @@ export class DebugOverlays {
     }
   }
 
-  #drawGlyphBbox(canvas: Canvas, geometry: GlyphInstanceGeometry, color: string): void {
+  #drawGlyphBbox(canvas: Canvas, geometry: GlyphViewGeometry, color: string): void {
     const b = geometry.bounds;
     if (!b) return;
     canvas.strokeRect(b.min.x, b.min.y, b.max.x - b.min.x, b.max.y - b.min.y, color, 1);

apps/desktop/src/renderer/src/lib/editor/rendering/overlays/Handles.ts

@@ -1,4 +1,4 @@
-import type { GlyphInstance } from "@/lib/model/Glyph";
+import type { GlyphView } from "@/lib/model/Glyph";
 import type { Hover } from "@/lib/editor/Hover";
 import type { Selection } from "@/lib/editor/Selection";
 import type { GlyphNode } from "@/types/node";
@@ -21,11 +21,11 @@ export class Handles {
   draw(
     ctx: RenderContext,
     node: GlyphNode,
-    instance: GlyphInstance,
+    view: GlyphView,
     selection: Selection,
     hover: Hover,
   ): void {
-    const list = this.#items.fromContours(instance.render.contours, {
+    const list = this.#items.fromContours(view.render.contours, {
       selection,
       hover,
     });

apps/desktop/src/renderer/src/lib/editor/rendering/overlays/Segments.ts

@@ -1,13 +1,13 @@
 import type { Canvas } from "../Canvas";
 import type { Segment, SegmentId } from "@shift/glyph-state";
-import type { GlyphInstanceGeometry } from "@/lib/model/Glyph";
+import type { GlyphViewGeometry } from "@/lib/model/Glyph";
 
 export class Segments {
   readonly #selected: Segment[] = [];
 
   draw(
     canvas: Canvas,
-    geometry: GlyphInstanceGeometry,
+    geometry: GlyphViewGeometry,
     selectedSegmentIds: readonly SegmentId[],
     hoveredSegmentId: SegmentId | null,
   ): void {