Display Font Tooltip

core/src/Debugger.ts

@@ -12,12 +12,14 @@ export default class Debugger {
   private context: TransformContext;
   private transformers: ItemTransformer[];
   private stageResultCache: StageResult[];
+  fontMap: Map<string, object>;
   stageNames: string[];
   stageDescriptions: string[];
 
   constructor(inputSchema: string[], inputItems: Item[], context: TransformContext, transformers: ItemTransformer[]) {
     this.transformers = transformers;
     this.context = context;
+    this.fontMap = context.fontMap;
     this.stageNames = ['Parse Result', ...transformers.map((t) => t.name)];
     this.stageDescriptions = ['Initial items as parsed by PDFjs', ...transformers.map((t) => t.description)];
     this.stageResultCache = [initialStage(inputSchema, inputItems)];

ui/src/components/Hoverable.svelte

@@ -0,0 +1,15 @@
+<script>
+    let hovering: boolean;
+
+    function enter() {
+        hovering = true;
+    }
+
+    function leave() {
+        hovering = false;
+    }
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+    <slot {hovering} />
+</div>

ui/src/debug/DebugView.svelte

@@ -98,6 +98,7 @@
 
     <!-- Items -->
     <ItemTable
+        fontMap={debug.fontMap}
         schema={stageResult.schema}
         pages={visiblePages}
         {maxPage}

ui/src/debug/FontTooltip.svelte

@@ -0,0 +1,35 @@
+<script>
+    import type Item from '@core/Item';
+
+    export let fontName: string;
+    export let fontMap: Map<string, object>;
+    $: font = fontMap.get(fontName);
+</script>
+
+<div class="pb-1 rounded shadow bg-gray-300 min-w-max">
+    <div class="py-1 px-2 bg-gray-400 font-semibold rounded-t">{fontName}</div>
+    <div class="px-2 grid gap-x-2 text-sm" style="grid-template-columns: 1fr 2.5fr">
+        <div>Name:</div>
+        <div>{font['name']}</div>
+        <div>Type:</div>
+        <div>{font['type']}</div>
+        <div>MimeType:</div>
+        <div>{font['mimetype']}</div>
+        <div>Ascent:</div>
+        <div>{font['ascent'].toFixed(2)}</div>
+        <div>Descent:</div>
+        <div>{font['descent'].toFixed(2)}</div>
+        <div>BBox:</div>
+        <div>{font['bbox'].join(', ')}</div>
+        <div>Matrix:</div>
+        <div>{font['fontMatrix'].join(', ')}</div>
+        <div>Vertical:</div>
+        <div>{font['vertical']}</div>
+        <div>Monospace:</div>
+        <div>{font['isMonospace']}</div>
+        <div>Setif:</div>
+        <div>{font['isSerifFont']}</div>
+        <div>Type3:</div>
+        <div>{font['isType3Font']}</div>
+    </div>
+</div>

ui/src/debug/FontsTooltip.svelte

@@ -0,0 +1,19 @@
+<script>
+    import type ItemGroup from '@core/debug/ItemGroup';
+    import FontTooltip from './FontTooltip.svelte';
+
+    export let itemGroup: ItemGroup;
+    export let fontMap: Map<string, object>;
+
+    $: distinctFontName = itemGroup.unpacked().reduce((fontNames: string[], item) => {
+        const fontName = item.data['fontName'];
+        if (!fontNames.includes(fontName)) {
+            fontNames.push(fontName);
+        }
+        return fontNames;
+    }, []);
+</script>
+
+{#each distinctFontName as fontName}
+    <FontTooltip {fontName} {fontMap} />
+{/each}

ui/src/debug/ItemTable.svelte

@@ -7,7 +7,11 @@
     import { formatValue } from './formatValues';
     import type Page from '@core/debug/Page';
     import ChangeSymbol from './ChangeSymbol.svelte';
+    import Hoverable from '../components/Hoverable.svelte';
+    import FontTooltip from './FontTooltip.svelte';
+    import FontsTooltip from './FontsTooltip.svelte';
 
+    export let fontMap: Map<string, object>;
     export let schema: AnnotatedColumn[];
     export let pages: Page[];
     export let maxPage: number;
@@ -102,7 +106,24 @@
 
                         <!-- Row values -->
                         {#each schema as column}
-                            <td class="select-all">{formatValue(itemGroup.top.data[column.name])}</td>
+                            <td>
+                                {#if column.name === 'fontName'}
+                                    <Hoverable let:hovering>
+                                        <span class="relative">
+                                            {#if hovering}
+                                                <span
+                                                    class="fontTooltip absolute overflow-auto "
+                                                    in:fade={{ delay: 300 }}>
+                                                    <FontsTooltip {itemGroup} {fontMap} />
+                                                </span>
+                                            {/if}
+                                            <div class="select-all">{formatValue(itemGroup.top.data[column.name])}</div>
+                                        </span>
+                                    </Hoverable>
+                                {:else}
+                                    <div class="select-all">{formatValue(itemGroup.top.data[column.name])}</div>
+                                {/if}
+                            </td>
                         {/each}
                     </span>
                 </tr>
@@ -123,7 +144,24 @@
                                 </div>
                             </td>
                             {#each schema as column}
-                                <td class="select-all">{formatValue(child.data[column.name])}</td>
+                                <td>
+                                    {#if column.name === 'fontName'}
+                                        <Hoverable let:hovering>
+                                            <span class="relative">
+                                                {#if hovering}
+                                                    <span
+                                                        class="fontTooltip absolute overflow-auto "
+                                                        in:fade={{ delay: 300 }}>
+                                                        <FontTooltip fontName={child.data[column.name]} {fontMap} />
+                                                    </span>
+                                                {/if}
+                                                <div class="select-all">{formatValue(child.data[column.name])}</div>
+                                            </span>
+                                        </Hoverable>
+                                    {:else}
+                                        <div class="select-all">{formatValue(child.data[column.name])}</div>
+                                    {/if}
+                                </td>
                             {/each}
                         </tr>
                     {/each}
@@ -205,4 +243,12 @@
     tr.changeNeutral td:not(#page) {
         @apply text-yellow-600;
     }
+
+    .fontTooltip {
+        position: absolute;
+        margin-right: 15px;
+        right: 100%;
+        with: 200px;
+        z-index: 4;
+    }
 </style>