mirror of
https://github.com/jzillmann/pdf-to-markdown.git
synced 2025-02-23 05:10:47 +01:00
Remove hover in favor of FontIndex
This commit is contained in:
Johannes Zillmann
parent
f0f10caf8f
commit
aae2d94eab
@ -1,15 +0,0 @@
|
||||
<script>
|
||||
let hovering: boolean;
|
||||
|
||||
function enter() {
|
||||
hovering = true;
|
||||
}
|
||||
|
||||
function leave() {
|
||||
hovering = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div on:mouseenter={enter} on:mouseleave={leave}>
|
||||
<slot {hovering} />
|
||||
</div>
|
||||
@ -120,7 +120,6 @@
|
||||
<!-- Items -->
|
||||
{#if visiblePages.find((page) => page.itemGroups.length > 0)}
|
||||
<ItemTable
|
||||
fontMap={debug.fontMap}
|
||||
schema={stageResult.schema}
|
||||
pages={visiblePages}
|
||||
{maxPage}
|
||||
|
||||
58
ui/src/debug/FontEntry.svelte
Normal file
58
ui/src/debug/FontEntry.svelte
Normal file
@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition';
|
||||
export let fontName: string;
|
||||
export let fontMap: Map<string, object>;
|
||||
|
||||
let collapsed = true;
|
||||
$: font = fontMap.get(fontName);
|
||||
</script>
|
||||
|
||||
<div class="pb-1 rounded shadow bg-gray-300 min-w-max">
|
||||
<div
|
||||
class="twoColumned header bg-gray-400 py-1 px-2 rounded-t cursor-pointer"
|
||||
class:opened={!collapsed}
|
||||
on:click={() => (collapsed = !collapsed)}>
|
||||
<div class="font-semibold">{fontName}</div>
|
||||
<div class="">{font['name']}</div>
|
||||
</div>
|
||||
|
||||
{#if !collapsed}
|
||||
<div class="twoColumned px-2 text-sm" transition:slide>
|
||||
<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>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.twoColumned {
|
||||
@apply grid;
|
||||
@apply gap-x-2;
|
||||
grid-template-columns: 1fr 2.5fr;
|
||||
}
|
||||
.header:hover {
|
||||
filter: hue-rotate(180deg);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
.opened {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,6 @@
|
||||
<script>
|
||||
import { scale } from 'svelte/transition';
|
||||
import { linear } from 'svelte/easing';
|
||||
|
||||
import slideH from '../svelte/slideH';
|
||||
import FontTooltip from './FontTooltip.svelte';
|
||||
import FontEntry from './FontEntry.svelte';
|
||||
|
||||
export let showFonts = false;
|
||||
export let fontMap: Map<string, object>;
|
||||
@ -14,7 +11,7 @@
|
||||
<div class="py-2 px-2 bg-gray-200 rounded-br">
|
||||
<div class=" overflow-y-scroll " style="max-height: 65vh" transition:slideH={{ duration: 400 }}>
|
||||
{#each [...fontMap.keys()] as fontName}
|
||||
<FontTooltip {fontMap} {fontName} />
|
||||
<FontEntry {fontMap} {fontName} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -23,6 +20,6 @@
|
||||
class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-blue-600"
|
||||
style="font-family: AmericanTypewriter, verdana"
|
||||
on:click={() => (showFonts = !showFonts)}>
|
||||
F
|
||||
{showFonts ? 'X' : 'F'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<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="bg-gray-400 py-1 px-2 rounded-t grid gap-x-2" style="grid-template-columns: 1fr 2.5fr">
|
||||
<div class="font-semibold">{fontName}</div>
|
||||
<div class="">{font['name']}</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 grid gap-x-2 text-sm" style="grid-template-columns: 1fr 2.5fr">
|
||||
<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>
|
||||
@ -1,19 +0,0 @@
|
||||
<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}
|
||||
@ -7,11 +7,7 @@
|
||||
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;
|
||||
@ -104,24 +100,7 @@
|
||||
|
||||
<!-- Row values -->
|
||||
{#each schema as column}
|
||||
<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>
|
||||
<td class="select-all">{formatValue(itemGroup.top.data[column.name])}</td>
|
||||
{/each}
|
||||
</span>
|
||||
</tr>
|
||||
@ -142,24 +121,7 @@
|
||||
</div>
|
||||
</td>
|
||||
{#each schema as column}
|
||||
<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>
|
||||
<td class="select-all">{formatValue(child.data[column.name])}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user