mirror of
https://github.com/jzillmann/pdf-to-markdown.git
synced 2025-06-26 20:41:27 +02:00
Remove UI package
This commit is contained in:
Johannes Zillmann
parent
02c2fd04fe
commit
e56d70c599
4
ui/.gitignore
vendored
4
ui/.gitignore
vendored
@ -1,4 +0,0 @@
|
||||
.build
|
||||
build
|
||||
web_modules
|
||||
node_modules
|
||||
@ -1,2 +0,0 @@
|
||||
package-lock.json
|
||||
public/build/
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"svelteSortOrder": "scripts-markup-styles",
|
||||
"printWidth": 120,
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
16
ui/README.md
16
ui/README.md
@ -1,16 +0,0 @@
|
||||
# PDF-To-Markdown Converter Core
|
||||
|
||||
Javascript UI to parse PDF files and convert them into Markdown format. Online at http://pdf2md.morethan.io!
|
||||
|
||||
## Contribute
|
||||
|
||||
Use the [issue tracker](https://github.com/jzillmann/pdf-to-markdown/issues) and/or open [pull requests](https://github.com/jzillmann/pdf-to-markdown/pulls)!
|
||||
|
||||
## Build
|
||||
|
||||
- `npm install` Download all necessary npm packages
|
||||
- `npm start` Run local development build
|
||||
|
||||
## Release
|
||||
|
||||
//TBD
|
||||
9586
ui/package-lock.json
generated
9586
ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "pdf-to-markdown",
|
||||
"version": "0.2.0",
|
||||
"description": "A PDF to Markdown Converter",
|
||||
"keywords": [
|
||||
"PDF",
|
||||
"Markdown",
|
||||
"Converter"
|
||||
],
|
||||
"author": "Johannes Zillmann",
|
||||
"license": "AGPL-3.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/jzillmann/pdf-to-markdown"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "snowpack dev",
|
||||
"build": "snowpack build",
|
||||
"svelte-check": "svelte-check",
|
||||
"test": "web-test-runner \"src/**/*.test.ts\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/free-solid-svg-icons": "5.15.2",
|
||||
"pdfjs-dist": "2.6.347",
|
||||
"simple-statistics": "^7.7.0",
|
||||
"string-similarity": "4.0.4",
|
||||
"svelte-file-dropzone": "0.0.15",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@snowpack/plugin-build-script": "^2.1.0",
|
||||
"@snowpack/plugin-dotenv": "^2.0.5",
|
||||
"@snowpack/plugin-svelte": "^3.5.2",
|
||||
"@snowpack/plugin-typescript": "^1.2.1",
|
||||
"@snowpack/web-test-runner-plugin": "^0.2.1",
|
||||
"@testing-library/svelte": "^3.0.3",
|
||||
"@types/chai": "^4.2.15",
|
||||
"@types/snowpack-env": "^2.3.2",
|
||||
"@web/test-runner": "^0.10.0",
|
||||
"chai": "^4.3.0",
|
||||
"fa-svelte": "^3.1.0",
|
||||
"postcss": "^8.2.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-import": "^14.0.0",
|
||||
"postcss-load-config": "^3.0.1",
|
||||
"prettier": "^2.2.1",
|
||||
"prettier-plugin-svelte": "^1.4.2",
|
||||
"rollup-plugin-svelte": "^7.1.0",
|
||||
"snowpack": "^3.0.13",
|
||||
"svelte": "^3.34.0",
|
||||
"svelte-check": "^1.1.36",
|
||||
"svelte-hero-icons": "^1.5.0",
|
||||
"svelte-preprocess": "^4.6.9",
|
||||
"tailwindcss": "^2.0.3",
|
||||
"typescript": "^4.2.2"
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require("postcss-import"),
|
||||
require("tailwindcss"),
|
||||
require("autoprefixer"),
|
||||
],
|
||||
};
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 318 B |
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="%PUBLIC_URL%" />
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="Converts PDF files to Markdown." />
|
||||
<meta name="keywords" content="PDF, Markdown, converter, online" />
|
||||
<title>PDF to Markdown</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script type="module" src="dist/index.js"></script>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@ -1,36 +0,0 @@
|
||||
/** @type {import("snowpack").SnowpackUserConfig } */
|
||||
module.exports = {
|
||||
mount: {
|
||||
public: { url: '/', static: true },
|
||||
src: { url: '/dist' },
|
||||
'../core/src': { url: '/core' },
|
||||
'node_modules/pdfjs-dist/es5/build/': { url: '/worker', static: true },
|
||||
},
|
||||
optimize: {
|
||||
bundle: true,
|
||||
minify: true,
|
||||
target: 'es2020',
|
||||
},
|
||||
plugins: [
|
||||
['@snowpack/plugin-build-script', { cmd: 'postcss', input: ['.css'], output: ['.css'] }],
|
||||
'@snowpack/plugin-svelte',
|
||||
'@snowpack/plugin-dotenv',
|
||||
'@snowpack/plugin-typescript',
|
||||
],
|
||||
packageOptions: {
|
||||
installTypes: true,
|
||||
packageLookupFields: ['svelte', 'module', 'main'],
|
||||
// rollup: { plugins: [require('rollup-plugin-svelte')()] },
|
||||
},
|
||||
devOptions: {
|
||||
port: 3005,
|
||||
},
|
||||
buildOptions: {
|
||||
baseUrl: '/pdf-to-markdown-staging/',
|
||||
metaUrlPath: 'modules',
|
||||
},
|
||||
alias: {
|
||||
'@core': '../core/src/index.js',
|
||||
'@core/*': '../core/src/*',
|
||||
},
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
<script>
|
||||
import Upload from './main/Upload.svelte';
|
||||
import { blur } from 'svelte/transition';
|
||||
|
||||
import { parseResult, debug } from './store';
|
||||
import DebugView from './debug/DebugView.svelte';
|
||||
</script>
|
||||
|
||||
<div in:blur={{ duration: 450 }} class="text-2xl font-semibold font-serif text-center bg-gray-400">
|
||||
PDF to Markdown Converter
|
||||
</div>
|
||||
<main class="mt-2 h-full">
|
||||
<div class="transition-container">
|
||||
{#if $debug}
|
||||
<span in:blur={{ duration: 1200 }} out:blur={{ duration: 900 }}>
|
||||
<DebugView debug={$debug} />
|
||||
</span>
|
||||
{:else}
|
||||
<span in:blur={{ duration: 900 }} out:blur={{ duration: 900 }}>
|
||||
<Upload />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@apply text-gray-800;
|
||||
@apply bg-gray-50;
|
||||
}
|
||||
|
||||
.transition-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1;
|
||||
grid-template-columns: 1;
|
||||
}
|
||||
|
||||
.transition-container > * {
|
||||
/* autoprefixer: off */
|
||||
grid-row: 1;
|
||||
/* autoprefixer: off */
|
||||
grid-column: 1;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
import {render} from '@testing-library/svelte';
|
||||
import {expect} from 'chai';
|
||||
import App from './App.svelte';
|
||||
|
||||
describe('<App>', () => {
|
||||
it('renders learn svelte link', () => {
|
||||
const {getByText} = render(App);
|
||||
const linkElement = getByText(/learn svelte/i);
|
||||
expect(document.body.contains(linkElement));
|
||||
});
|
||||
});
|
||||
@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -1,23 +0,0 @@
|
||||
export function clickOutside(node: HTMLElement, { enabled: initialEnabled, cb }) {
|
||||
const handleOutsideClick = ({ target }) => {
|
||||
if (!node.contains(target)) {
|
||||
cb();
|
||||
}
|
||||
};
|
||||
|
||||
function update({ enabled }) {
|
||||
if (enabled) {
|
||||
window.addEventListener('click', handleOutsideClick);
|
||||
} else {
|
||||
window.removeEventListener('click', handleOutsideClick);
|
||||
}
|
||||
}
|
||||
|
||||
update({ enabled: initialEnabled });
|
||||
return {
|
||||
update,
|
||||
destroy() {
|
||||
window.removeEventListener('click', handleOutsideClick);
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
export default function inView(node: HTMLElement) {
|
||||
const handleIntersect = (e: IntersectionObserverEntry[]) => {
|
||||
node.dispatchEvent(
|
||||
new CustomEvent('intersect', {
|
||||
detail: e[0].isIntersecting,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const root = null;
|
||||
const rootMargin = `0px 0px 300px 0px`;
|
||||
const options = { root, rootMargin };
|
||||
const observer = new IntersectionObserver(handleIntersect, options);
|
||||
observer.observe(node);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
if (observer) observer.disconnect();
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
<script>
|
||||
export let name: string;
|
||||
export let enabled = true;
|
||||
</script>
|
||||
|
||||
<input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
|
||||
<label
|
||||
for="checkbox-{name}"
|
||||
class="px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
|
||||
|
||||
<style>
|
||||
input:not(:checked) + label:hover {
|
||||
transform: scale(1.1);
|
||||
@apply text-select;
|
||||
}
|
||||
|
||||
input:checked + label:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
@apply border-select;
|
||||
}
|
||||
|
||||
input + label:hover:not(:active) {
|
||||
@apply border-dotted;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
|
||||
export default class ComponentDefinition {
|
||||
constructor(public component: object, public args: object = {}) {}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
import { setContext } from 'svelte';
|
||||
import { clickOutside } from '../actions/clickOutside';
|
||||
|
||||
let opened = writable(false);
|
||||
setContext('popupOpened', opened);
|
||||
|
||||
function toogle() {
|
||||
opened.update((old) => !old);
|
||||
}
|
||||
</script>
|
||||
|
||||
<span use:clickOutside={{ enabled: opened, cb: () => opened.set(false) }}>
|
||||
<span on:click={toogle}>
|
||||
<slot name="trigger" opened={$opened} />
|
||||
</span>
|
||||
|
||||
{#if $opened}
|
||||
<span class="popupContent">
|
||||
<slot name="content" class="z-20" />
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.popupContent :global(*) {
|
||||
@apply z-30;
|
||||
}
|
||||
</style>
|
||||
@ -1,35 +0,0 @@
|
||||
<script>
|
||||
import { tweened } from 'svelte/motion';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
|
||||
export let radius: number;
|
||||
export let stroke: number;
|
||||
export let progress: number;
|
||||
|
||||
const normalizedRadius = radius - stroke * 2;
|
||||
const circumference = normalizedRadius * 2 * Math.PI;
|
||||
const progressTweened = tweened(0, {
|
||||
duration: 400,
|
||||
easing: cubicOut,
|
||||
});
|
||||
$: progressTweened.set(progress);
|
||||
$: strokeDashoffset = circumference - ($progressTweened / 100) * circumference;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
height={radius * 2}
|
||||
width={radius * 2}
|
||||
class="text-select stroke-current"
|
||||
style="filter: brightness({$progressTweened / 100 / 2 + 0.5}) sepia({0.5 - $progressTweened / 100 / 2}) blur({0.6 - $progressTweened / 100 / 3}px)">
|
||||
<circle
|
||||
fill="transparent"
|
||||
stroke-width={stroke}
|
||||
stroke-dasharray={circumference + ' ' + circumference}
|
||||
stroke-dashoffset={strokeDashoffset}
|
||||
r={normalizedRadius}
|
||||
cx={radius}
|
||||
cy={radius} />
|
||||
<text x="50%" y="53%" text-anchor="middle" class="text-gray-800 fill-current" stroke-width="1px" dy=".2em">
|
||||
{Math.round($progressTweened)}%
|
||||
</text>
|
||||
</svg>
|
||||
@ -1,22 +0,0 @@
|
||||
import { Writable, writable } from 'svelte/store';
|
||||
import { debugFromParams, debugStageFromParams } from './processParameters';
|
||||
|
||||
export const debugEnabled = storedWritable('debugEnabled', false, debugFromParams);
|
||||
export const debugStage = storedWritable('debugStage', 0, debugStageFromParams);
|
||||
|
||||
function storedWritable<T>(key: string, defaultValue: T, paramLoadFunction: (defaultValue: T) => T): Writable<T> {
|
||||
const value = paramLoadFunction(fromLocalStore(key, defaultValue));
|
||||
const store = writable(value);
|
||||
store.subscribe((value) => {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
});
|
||||
return store;
|
||||
}
|
||||
|
||||
function fromLocalStore<T>(key: string, defaultValue: T): T {
|
||||
const storedValue = localStorage.getItem(key);
|
||||
if (storedValue === null || storedValue === 'null') {
|
||||
return defaultValue;
|
||||
}
|
||||
return JSON.parse(storedValue);
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
<script>
|
||||
import type EvaluationIndex from '@core/debug/EvaluationIndex';
|
||||
import type ChangeIndex from '@core/debug/ChangeIndex';
|
||||
import type Item from '@core/Item';
|
||||
import { Addition, Removal, ContentChange, PositionChange, Direction } from '../../../core/src/debug/ChangeIndex';
|
||||
import ComponentDefinition from '../components/ComponentDefinition';
|
||||
|
||||
import {
|
||||
PlusCircle as Plus,
|
||||
ExclamationCircle as Changed,
|
||||
MinusCircle as Minus,
|
||||
ArrowCircleUp as Up,
|
||||
ArrowCircleDown as Down,
|
||||
Eye,
|
||||
} from 'svelte-hero-icons';
|
||||
|
||||
export let evaluations: EvaluationIndex;
|
||||
export let changes: ChangeIndex;
|
||||
export let item: Item;
|
||||
|
||||
$: evaluated = evaluations.evaluated(item);
|
||||
$: hasChanged = changes.hasChanged(item);
|
||||
let changeContent: string;
|
||||
let iconComp: ComponentDefinition;
|
||||
$: {
|
||||
let args = { size: '14' };
|
||||
if (hasChanged) {
|
||||
let change = changes.change(item);
|
||||
switch (change.constructor.name) {
|
||||
case PositionChange.name:
|
||||
const positionChange = change as PositionChange;
|
||||
changeContent = `${positionChange.amount}`;
|
||||
iconComp =
|
||||
positionChange.direction === Direction.UP
|
||||
? new ComponentDefinition(Up, args)
|
||||
: new ComponentDefinition(Down, args);
|
||||
break;
|
||||
case Addition.name:
|
||||
iconComp = new ComponentDefinition(Plus, args);
|
||||
break;
|
||||
case Removal.name:
|
||||
iconComp = new ComponentDefinition(Minus, args);
|
||||
break;
|
||||
case ContentChange.name:
|
||||
iconComp = new ComponentDefinition(Changed, args);
|
||||
break;
|
||||
default:
|
||||
throw new Error(`${change.constructor.name}: ${change}`);
|
||||
}
|
||||
} else if (evaluated) {
|
||||
iconComp = new ComponentDefinition(Eye, args);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if evaluated || hasChanged}
|
||||
<div class="flex space-x-0.5 items-center text-xs">
|
||||
{#if iconComp}
|
||||
<svelte:component this={iconComp.component} {...iconComp.args} />
|
||||
{/if}
|
||||
{#if changeContent}
|
||||
<div>{changeContent}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@ -1,99 +0,0 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition';
|
||||
import slideH from '../svelte/slideH';
|
||||
|
||||
import { BookOpen, ArrowLeft, ArrowRight } from 'svelte-hero-icons';
|
||||
|
||||
import { debugStage } from '../config';
|
||||
|
||||
import PageControl from './PageControl';
|
||||
import Popup from '../components/Popup.svelte';
|
||||
import PageSelectionPopup from './PageSelectionPopup.svelte';
|
||||
import Checkbox from '../components/Checkbox.svelte';
|
||||
import TransformerSelectionPopup from './TransformerSelectionPopup.svelte';
|
||||
import FontEntry from './FontEntry.svelte';
|
||||
|
||||
export let stageNames: string[];
|
||||
export let stageDescriptions: string[];
|
||||
export let pageControl: PageControl;
|
||||
export let fontMap: Map<string, object>;
|
||||
export let supportsGrouping: boolean;
|
||||
export let supportsRelevanceFiltering: boolean;
|
||||
|
||||
export let groupingEnabled = true;
|
||||
export let onlyRelevantItems = true;
|
||||
|
||||
$: canNext = $debugStage + 1 < stageNames.length;
|
||||
$: canPrev = $debugStage > 0;
|
||||
</script>
|
||||
|
||||
<div class="sticky top-0 pt-2 pb-1 z-20 bg-gray-50">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Popup>
|
||||
<span slot="trigger" let:opened>
|
||||
<BookOpen size="1x" class="hover:text-select cursor-pointer {opened && 'text-select'}" />
|
||||
</span>
|
||||
<span slot="content">
|
||||
<PageSelectionPopup {pageControl} />
|
||||
</span>
|
||||
</Popup>
|
||||
<Popup>
|
||||
<span slot="trigger" let:opened>
|
||||
<div
|
||||
class="hover:text-select cursor-pointer {opened && 'text-select'}"
|
||||
style="font-family: AmericanTypewriter, verdana">
|
||||
F
|
||||
</div>
|
||||
</span>
|
||||
<span slot="content">
|
||||
<div class="absolute mt-1 py-2 px-2 bg-gray-200 rounded-br">
|
||||
<div class=" overflow-y-scroll " style="max-height: 65vh" transition:slide={{ duration: 400 }}>
|
||||
{#each [...fontMap.keys()] as fontName}
|
||||
<FontEntry {fontMap} {fontName} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</Popup>
|
||||
|
||||
<div>|</div>
|
||||
<div>Transformation:</div>
|
||||
<span on:click={() => canPrev && debugStage.update((cur) => cur - 1)}>
|
||||
<ArrowLeft size="1x" class={canPrev ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
|
||||
</span>
|
||||
<span on:click={() => canNext && debugStage.update((cur) => cur + 1)}>
|
||||
<ArrowRight size="1x" class={canNext ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
|
||||
</span>
|
||||
<span>
|
||||
<Popup>
|
||||
<span slot="trigger">
|
||||
<div class="w-52 cursor-pointer hover:underline whitespace-nowrap italic">
|
||||
{stageNames[$debugStage]}
|
||||
</div>
|
||||
</span>
|
||||
<span slot="content">
|
||||
<TransformerSelectionPopup
|
||||
{stageNames}
|
||||
{stageDescriptions}
|
||||
currentStage={$debugStage}
|
||||
on:selectTransformer={({ detail }) => debugStage.set(detail)} />
|
||||
</span>
|
||||
</Popup>
|
||||
</span>
|
||||
<div class="w-full flex flex-row-reverse space-x-2 space-x-reverse text-sm">
|
||||
{#if supportsGrouping}
|
||||
<span class="inline-flex" transition:slideH={{ duration: 700 }}>
|
||||
<Checkbox name="Grouped" bind:enabled={groupingEnabled} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if supportsRelevanceFiltering}
|
||||
<span class="inline-flex" transition:slideH={{ duration: 700 }}>
|
||||
<Checkbox name="Relevant Items" bind:enabled={onlyRelevantItems} />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Little cushion sitting between the control bar and the item header. Relevant is the z-index. Item headers should go over it, item rows under! -->
|
||||
<div class="sticky top-8 h-3 bg-gray-50" style="z-index:1" />
|
||||
@ -1,40 +0,0 @@
|
||||
<script>
|
||||
import slideH from '../svelte/slideH';
|
||||
import { linear } from 'svelte/easing';
|
||||
|
||||
import Icon from 'fa-svelte';
|
||||
import { faMapPin as pin } from '@fortawesome/free-solid-svg-icons/faMapPin';
|
||||
import { ArrowLeft, ArrowRight } from 'svelte-hero-icons';
|
||||
|
||||
import PageControl from './PageControl';
|
||||
|
||||
export let pageControl: PageControl;
|
||||
export let pageIndex: number;
|
||||
|
||||
let { pagePinned, canPrev, canNext, pageMapping } = pageControl;
|
||||
</script>
|
||||
|
||||
<div class="flex items-center space-x-1">
|
||||
{#if $pagePinned}
|
||||
<span on:click={() => pageControl.unpinPage()} transition:slideH={{ duration: 180, easing: linear }}>
|
||||
<Icon class="text-xs hover:text-select hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
|
||||
</span>
|
||||
{/if}
|
||||
<div>
|
||||
Page
|
||||
{$pageMapping.pageLabel(pageIndex)}
|
||||
{#if $pageMapping.shifted()}
|
||||
<span class="font-light"> ({pageIndex + 1}/{pageControl.totalPages}) </span>
|
||||
{:else}/ {pageControl.totalPages + $pageMapping.pageFactor - 1}{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if $pagePinned}
|
||||
<div class="absolute flex ml-4 space-x-2">
|
||||
<span on:click={() => pageControl.prev()}>
|
||||
<ArrowLeft size="1x" class={$canPrev ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
|
||||
</span>
|
||||
<span on:click={() => pageControl.next()}>
|
||||
<ArrowRight size="1x" class={$canNext ? 'hover:text-select cursor-pointer' : 'opacity-25'} />
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
@ -1,93 +0,0 @@
|
||||
<script>
|
||||
import { slide, blur } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
import type Debugger from '@core/Debugger';
|
||||
import { PAGE_MAPPING } from '../../../core/src/transformer/CacluclateStatistics';
|
||||
|
||||
import { debugStage } from '../config';
|
||||
import ControlBar from './ControlBar.svelte';
|
||||
import ItemTable from './ItemTable.svelte';
|
||||
import PageControl from './PageControl';
|
||||
import CurrentPage from './CurrentPage.svelte';
|
||||
|
||||
export let debug: Debugger;
|
||||
|
||||
const pageControl = new PageControl(debug.pageCount);
|
||||
const stageNames = debug.stageNames;
|
||||
const { pinnedPageIndex, pagePinned } = pageControl;
|
||||
let groupingEnabled = true;
|
||||
let onlyRelevantItems = true;
|
||||
|
||||
$: stageResult = debug.stageResult($debugStage);
|
||||
$: pageControl.updateMapping(stageResult.globals.getOptional(PAGE_MAPPING));
|
||||
$: supportsGrouping = !!stageResult.descriptor?.debug?.itemMerger;
|
||||
$: supportsRelevanceFiltering = !stageResult.descriptor?.debug?.showAll;
|
||||
$: visiblePages = pageControl.selectPages(stageResult, onlyRelevantItems, groupingEnabled, $pinnedPageIndex);
|
||||
</script>
|
||||
|
||||
<div class="mx-4">
|
||||
<!-- <div>Parsed {parseResult.pageCount()} pages with {parseResult.items.length} items</div>
|
||||
<div>Title: {parseResult.metadata.title()}</div>
|
||||
<div>Author: {parseResult.metadata.author()}</div> -->
|
||||
|
||||
<!-- Sticky Controls -->
|
||||
<ControlBar
|
||||
{stageNames}
|
||||
stageDescriptions={debug.stageDescriptions}
|
||||
{pageControl}
|
||||
fontMap={debug.fontMap}
|
||||
{supportsGrouping}
|
||||
{supportsRelevanceFiltering}
|
||||
bind:groupingEnabled
|
||||
bind:onlyRelevantItems />
|
||||
|
||||
<!-- Stage Messages -->
|
||||
<ul class="messages list-disc list-inside mb-2 p-2 bg-blue-50 rounded shadow text-sm">
|
||||
{#each stageResult.messages as message (message)}
|
||||
<li animate:flip in:slide>{message}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<!-- Items -->
|
||||
{#if visiblePages.find((page) => page.itemGroups.length > 0)}
|
||||
<ItemTable
|
||||
schema={stageResult.schema}
|
||||
pages={visiblePages}
|
||||
{pageControl}
|
||||
evaluations={stageResult.evaluations}
|
||||
changes={stageResult.changes} />
|
||||
{:else}
|
||||
<!-- No items visible -->
|
||||
<div class="flex mt-8">
|
||||
{#if $pagePinned}
|
||||
<span class="w-36">
|
||||
<CurrentPage {pageControl} pageIndex={$pinnedPageIndex} />
|
||||
</span>
|
||||
{/if}
|
||||
<div class="flex w-full space-x-1 items-center justify-center text-xl">
|
||||
<div in:blur={{ delay: 500 }}>No visible changes from the transformation.</div>
|
||||
{#if supportsRelevanceFiltering && onlyRelevantItems}
|
||||
<div in:blur={{ delay: 900 }}>Disable the</div>
|
||||
<div
|
||||
in:blur={{ delay: 950 }}
|
||||
class="font-bold cursor-pointer hover:underline"
|
||||
on:click={() => (onlyRelevantItems = false)}>
|
||||
relevance filter
|
||||
</div>
|
||||
<div in:blur={{ delay: 990 }}>?</div>
|
||||
{/if}
|
||||
{#if supportsGrouping && !groupingEnabled}
|
||||
<div in:blur={{ delay: 1000 }}>Enable</div>
|
||||
<div
|
||||
in:blur={{ delay: 1050 }}
|
||||
class="font-bold cursor-pointer hover:underline"
|
||||
on:click={() => (groupingEnabled = true)}>
|
||||
grouping
|
||||
</div>
|
||||
<div in:blur={{ delay: 1090 }}>?</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,58 +0,0 @@
|
||||
<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 py-1 px-2 text-sm bg-gray-400 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 {
|
||||
@apply bg-select;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.opened {
|
||||
@apply bg-select;
|
||||
}
|
||||
</style>
|
||||
@ -1,135 +0,0 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import type ItemGroup from '@core/debug/ItemGroup';
|
||||
import type EvaluationIndex from '@core/debug/EvaluationIndex';
|
||||
import type ChangeIndex from '@core/debug/ChangeIndex';
|
||||
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
|
||||
|
||||
import ChangeSymbol from './ChangeSymbol.svelte';
|
||||
import { formatValue } from './formatValues';
|
||||
import PageControl from './PageControl';
|
||||
import CurrentPage from './CurrentPage.svelte';
|
||||
|
||||
export let pageControl: PageControl;
|
||||
export let pageIdx: number;
|
||||
export let itemIdx: number;
|
||||
export let schema: AnnotatedColumn[];
|
||||
export let itemGroup: ItemGroup;
|
||||
export let evaluations: EvaluationIndex;
|
||||
export let changes: ChangeIndex;
|
||||
|
||||
let expandedItemGroup: { pageIndex: number; itemIndex: number };
|
||||
|
||||
$: expanded =
|
||||
expandedItemGroup && expandedItemGroup.pageIndex === pageIdx && expandedItemGroup.itemIndex === itemIdx;
|
||||
|
||||
const toggleRow = (pageIndex: number, itemIndex: number) => {
|
||||
expandedItemGroup = expanded ? undefined : { pageIndex, itemIndex };
|
||||
};
|
||||
</script>
|
||||
|
||||
<tr
|
||||
class:expandable={itemGroup.hasMany()}
|
||||
class:expanded
|
||||
class:changePlus={changes.isPlusChange(itemGroup.top)}
|
||||
class:changeNeutral={changes.isNeutralChange(itemGroup.top)}
|
||||
class:changeMinus={changes.isMinusChange(itemGroup.top)}
|
||||
in:fade>
|
||||
<!-- Page number in first page item row -->
|
||||
{#if itemIdx === 0}
|
||||
<td id="page" class="page bg-gray-50 align-top">
|
||||
<CurrentPage pageIndex={pageIdx} {pageControl} />
|
||||
</td>
|
||||
{:else}
|
||||
<td id="page" />
|
||||
{/if}
|
||||
<td class="align-baseline">
|
||||
<ChangeSymbol {evaluations} {changes} item={itemGroup.top} />
|
||||
</td>
|
||||
{#if evaluations.hasScores()}
|
||||
<td class="whitespace-nowrap">{evaluations.evaluationScore(itemGroup.top)}</td>
|
||||
{/if}
|
||||
<span class="contents" on:click={() => itemGroup.hasMany() && toggleRow(pageIdx, itemIdx)}>
|
||||
<!-- ID & change marker column -->
|
||||
<td class="align-top">
|
||||
<div class="flex space-x-0.5 items-center">
|
||||
<div>{itemIdx}{itemGroup.hasMany() ? '…' : ''}</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Row values -->
|
||||
{#each schema as column}
|
||||
<td class="select-all">{formatValue(itemGroup.top.data[column.name])}</td>
|
||||
{/each}
|
||||
</span>
|
||||
</tr>
|
||||
|
||||
<!-- Expanded childs -->
|
||||
{#if expanded}
|
||||
{#each itemGroup.elements as child, childIdx}
|
||||
<tr
|
||||
class="childs"
|
||||
class:changePlus={changes.isPlusChange(child)}
|
||||
class:changeNeutral={changes.isNeutralChange(child)}
|
||||
class:changeMinus={changes.isMinusChange(child)}>
|
||||
<td id="page" />
|
||||
<td class="align-baseline">
|
||||
<ChangeSymbol {evaluations} {changes} item={child} />
|
||||
</td>
|
||||
{#if evaluations.hasScores()}
|
||||
<td class="whitespace-nowrap">{evaluations.evaluationScore(itemGroup.top)}</td>
|
||||
{/if}
|
||||
<td class="whitespace-nowrap">
|
||||
<div class="flex space-x-1">
|
||||
<div class="w-8">{'└ ' + childIdx}</div>
|
||||
</div>
|
||||
</td>
|
||||
{#each schema as column}
|
||||
<td class="select-all">{formatValue(child.data[column.name])}</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page {
|
||||
@apply font-semibold;
|
||||
@apply pr-4;
|
||||
@apply whitespace-nowrap;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
td:not(#page) {
|
||||
@apply px-1;
|
||||
@apply border-b;
|
||||
}
|
||||
|
||||
tr:hover td:not(#page) {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
|
||||
tr.expandable:hover td:not(#page) {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
tr.expanded td:not(#page) {
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
|
||||
tr.childs td:not(#page) {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
|
||||
tr.changePlus td:not(#page) {
|
||||
@apply text-green-700;
|
||||
}
|
||||
tr.changeMinus td:not(#page) {
|
||||
@apply text-red-700;
|
||||
}
|
||||
tr.changeNeutral td:not(#page) {
|
||||
@apply text-yellow-500;
|
||||
}
|
||||
</style>
|
||||
@ -1,113 +0,0 @@
|
||||
<script>
|
||||
import { scale } from 'svelte/transition';
|
||||
|
||||
import { PresentationChartLine } from 'svelte-hero-icons';
|
||||
|
||||
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
|
||||
import type EvaluationIndex from '@core/debug/EvaluationIndex';
|
||||
import type ChangeIndex from '@core/debug/ChangeIndex';
|
||||
import type Page from '@core/debug/Page';
|
||||
import ColumnAnnotation from '../../../core/src/debug/ColumnAnnotation';
|
||||
|
||||
import inView from '../actions/inView';
|
||||
import PageControl from './PageControl';
|
||||
import ItemRow from './ItemRow.svelte';
|
||||
|
||||
export let schema: AnnotatedColumn[];
|
||||
export let pages: Page[];
|
||||
export let pageControl: PageControl;
|
||||
export let evaluations: EvaluationIndex;
|
||||
export let changes: ChangeIndex;
|
||||
|
||||
let { pagePinned } = pageControl;
|
||||
let maxItemsToRenderInOneLoad = 200;
|
||||
let renderedMaxPage = 0;
|
||||
|
||||
let renderedPages: Page[];
|
||||
$: {
|
||||
if ($pagePinned) {
|
||||
renderedPages = pages;
|
||||
renderedMaxPage = 0;
|
||||
} else {
|
||||
if (renderedMaxPage === 0) {
|
||||
calculateNextPageToRenderTo();
|
||||
}
|
||||
renderedPages = pages.slice(0, renderedMaxPage);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateNextPageToRenderTo() {
|
||||
if (renderedMaxPage >= pages.length) {
|
||||
return;
|
||||
}
|
||||
let itemCount = 0;
|
||||
for (let index = 0; index < pages.length; index++) {
|
||||
renderedMaxPage++;
|
||||
itemCount += pages[index].itemGroups.length;
|
||||
if (itemCount > maxItemsToRenderInOneLoad) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// console.log(`Render pages 0 to ${renderedMaxPage} with ${itemCount} items`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Item table -->
|
||||
<table class="w-full text-left">
|
||||
<!-- Sticky header -->
|
||||
<thead class="">
|
||||
<th />
|
||||
{#if changes.changeCount() > 0}
|
||||
<th class="bg-gray-300 shadow">
|
||||
<PresentationChartLine size="1x" />
|
||||
</th>
|
||||
{:else}
|
||||
<th class="bg-gray-50" />
|
||||
{/if}
|
||||
{#if evaluations.hasScores()}
|
||||
<th class="bg-gray-300 shadow">score</th>
|
||||
{/if}
|
||||
<th class="bg-gray-300 shadow">#</th>
|
||||
{#each schema as column (column.name)}
|
||||
<th
|
||||
transition:scale
|
||||
class="bg-gray-300 shadow {column.annotation === ColumnAnnotation.ADDED ? 'text-green-800' : column.annotation === ColumnAnnotation.REMOVED ? 'text-red-800' : ''} transition-colors duration-300 delay-200">
|
||||
{column.name}
|
||||
</th>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each renderedPages as page, pageIdx}
|
||||
<!-- Separator between pages -->
|
||||
{#if pageIdx > 0}
|
||||
<tr class="h-5" />
|
||||
{/if}
|
||||
|
||||
<!-- Page items -->
|
||||
{#each page.itemGroups as itemGroup, itemIdx}
|
||||
<ItemRow pageIdx={page.index} {itemIdx} {schema} {itemGroup} {evaluations} {changes} {pageControl} />
|
||||
{/each}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{#if $pagePinned}
|
||||
<div class="mb-8" />
|
||||
{:else}
|
||||
{#if renderedMaxPage < pages.length}
|
||||
<span use:inView on:intersect={({ detail }) => detail && calculateNextPageToRenderTo()} />
|
||||
<div class="my-6 text-center text-2xl">...</div>
|
||||
{:else}
|
||||
<div class="my-6 text-center text-2xl">FIN!</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
th {
|
||||
@apply px-1;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@ -1,74 +0,0 @@
|
||||
import StageResult from '@core/debug/StageResult';
|
||||
import PageMapping from '../../../core/src/PageMapping';
|
||||
import { Writable, writable, get, Readable, derived } from 'svelte/store';
|
||||
|
||||
export default class PageControl {
|
||||
pinnedPageIndex: Writable<number | undefined>;
|
||||
pagePinned: Readable<boolean>;
|
||||
canPrev: Readable<boolean>;
|
||||
canNext: Readable<boolean>;
|
||||
pagesWithItems: Set<number> = new Set();
|
||||
pageMapping: Writable<PageMapping> = writable(new PageMapping());
|
||||
|
||||
constructor(public totalPages: number) {
|
||||
this.pinnedPageIndex = writable(undefined);
|
||||
this.pagePinned = derived(this.pinnedPageIndex, (page) => !isNaN(page));
|
||||
this.canPrev = derived([this.pinnedPageIndex, this.pagePinned], ([page, pinned]) => pinned && page > 0);
|
||||
this.canNext = derived(
|
||||
[this.pinnedPageIndex, this.pagePinned],
|
||||
([page, pinned]) => pinned && page < totalPages - 1
|
||||
);
|
||||
this.next.bind(this);
|
||||
this.prev.bind(this);
|
||||
this.unpinPage.bind(this);
|
||||
}
|
||||
|
||||
updateMapping(pageMapping: PageMapping | undefined) {
|
||||
if (pageMapping) {
|
||||
this.pageMapping.set(pageMapping);
|
||||
}
|
||||
}
|
||||
|
||||
selectPages(stageResult: StageResult, relevantChangesOnly: boolean, groupItems: boolean, pinnedPage?: number) {
|
||||
const allRelevantPages = stageResult.selectPages(relevantChangesOnly, groupItems);
|
||||
this.pagesWithItems = new Set(
|
||||
allRelevantPages.filter((page) => page.itemGroups.length > 0).map((page) => page.index)
|
||||
);
|
||||
if (Number.isInteger(pinnedPage)) {
|
||||
return allRelevantPages.filter((page) => page.index === pinnedPage);
|
||||
}
|
||||
return allRelevantPages;
|
||||
}
|
||||
|
||||
pageHasItems(pageIdx: number) {
|
||||
return this.pagesWithItems.has(pageIdx);
|
||||
}
|
||||
|
||||
next() {
|
||||
if (get(this.canNext)) {
|
||||
this.pinnedPageIndex.update((page) => page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
prev() {
|
||||
if (get(this.canPrev)) {
|
||||
this.pinnedPageIndex.update((page) => page - 1);
|
||||
}
|
||||
}
|
||||
|
||||
pinPage(pageIdx: number) {
|
||||
this.pinnedPageIndex.set(pageIdx);
|
||||
}
|
||||
|
||||
unpinPage() {
|
||||
this.pinnedPageIndex.set(undefined);
|
||||
}
|
||||
|
||||
pinnedPage() {
|
||||
return get(this.pinnedPageIndex);
|
||||
}
|
||||
|
||||
pageIsPinned() {
|
||||
return get(this.pagePinned);
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition';
|
||||
import { getContext } from 'svelte';
|
||||
import { Collection } from 'svelte-hero-icons';
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
import PageControl from './PageControl';
|
||||
|
||||
export let pageControl: PageControl;
|
||||
|
||||
let { pinnedPageIndex, pagePinned, pageMapping } = pageControl;
|
||||
let showIndex = false;
|
||||
|
||||
const popupOpened: Writable<boolean> = getContext('popupOpened');
|
||||
|
||||
function pinPage(index: number) {
|
||||
popupOpened.set(false);
|
||||
pageControl.pinPage(index);
|
||||
}
|
||||
function unpinPage() {
|
||||
popupOpened.set(false);
|
||||
pageControl.unpinPage();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="absolute my-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96"
|
||||
style="max-width: 77%;"
|
||||
transition:slide>
|
||||
<span class="mt-1 pr-2" on:click={$pagePinned && unpinPage}>
|
||||
<Collection size="1x" class={$pagePinned ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
|
||||
</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#each new Array(pageControl.totalPages) as _, idx}
|
||||
<div
|
||||
class="flex-grow-0 px-2 w-12 max-w-xs border border-gray-300 rounded-full text-center {pageControl.pageHasItems(idx) ? ($pinnedPageIndex === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}"
|
||||
on:click={() => pageControl.pageHasItems(idx) && pinPage(idx)}>
|
||||
{#if showIndex}{idx}{:else}{$pageMapping.pageLabel(idx)}{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
@ -1,83 +0,0 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition';
|
||||
import { getContext } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
export let stageNames: string[];
|
||||
export let stageDescriptions: string[];
|
||||
export let currentStage: number;
|
||||
|
||||
const popupOpened: Writable<boolean> = getContext('popupOpened');
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function selectTransformer(index: number) {
|
||||
popupOpened.set(false);
|
||||
dispatch('selectTransformer', index);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="absolute -mt-6 " transition:slide>
|
||||
<div class="p-2 bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96">
|
||||
{#each stageNames as stageName, idx}
|
||||
<div
|
||||
on:click={() => selectTransformer(idx)}
|
||||
class="tooltip px-2"
|
||||
class:selected={idx == currentStage}
|
||||
class:selectable={idx != currentStage}
|
||||
data-text={stageDescriptions[idx]}>
|
||||
{stageName}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.selected {
|
||||
@apply cursor-default;
|
||||
@apply bg-gray-300;
|
||||
@apply rounded;
|
||||
}
|
||||
.selectable {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
.selectable:hover {
|
||||
@apply bg-select;
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.tooltip:before {
|
||||
content: attr(data-text); /* here's the magic */
|
||||
position: absolute;
|
||||
|
||||
transform: translateY(-2px);
|
||||
|
||||
/* move to right */
|
||||
left: 100%;
|
||||
|
||||
/* the arrow */
|
||||
border: 10px solid;
|
||||
@apply border-select;
|
||||
@apply border-t-transparent;
|
||||
@apply border-r-transparent;
|
||||
@apply border-b-transparent;
|
||||
|
||||
/* basic styles */
|
||||
@apply ml-2;
|
||||
@apply px-2;
|
||||
@apply py-1;
|
||||
@apply w-72;
|
||||
@apply bg-gray-300;
|
||||
@apply text-gray-800;
|
||||
@apply rounded;
|
||||
@apply shadow-sm;
|
||||
@apply text-center;
|
||||
@apply italic;
|
||||
|
||||
display: none; /* hide by default */
|
||||
}
|
||||
.tooltip:hover:before {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +0,0 @@
|
||||
export function formatValue(value: object) {
|
||||
if (typeof value === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
if (Number.isInteger(value)) {
|
||||
return value;
|
||||
}
|
||||
if (typeof value === 'number') {
|
||||
return (value as number).toFixed(2);
|
||||
}
|
||||
if (typeof value === 'object' && typeof Array.isArray(value)) {
|
||||
let array = value as Array<object>;
|
||||
if (array.length > 0 && typeof array[0] === 'number') {
|
||||
array = (array.map((element) => ((element as unknown) as number).toFixed(2)) as unknown) as Array<object>;
|
||||
}
|
||||
return '[' + array.join(', ') + ']';
|
||||
}
|
||||
return value;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import App from './App.svelte';
|
||||
import './Tailwind.css';
|
||||
|
||||
var app = new App({
|
||||
target: document.body,
|
||||
intro: true,
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
||||
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
|
||||
// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept();
|
||||
import.meta.hot.dispose(() => {
|
||||
app.$destroy();
|
||||
});
|
||||
}
|
||||
@ -1,158 +0,0 @@
|
||||
<script>
|
||||
import { blur, slide } from 'svelte/transition';
|
||||
import Dropzone from 'svelte-file-dropzone';
|
||||
import { Download, Check } from 'svelte-hero-icons';
|
||||
import { processUpload, loadExample, loadUrl } from '../store';
|
||||
import type Progress from '@core/Progress';
|
||||
import ProgressRing from '../components/ProgressRing.svelte';
|
||||
import Checkbox from '../components/Checkbox.svelte';
|
||||
import { debugEnabled } from '../config';
|
||||
import { urlFromParams } from '../processParameters';
|
||||
|
||||
let specifiedFileName: string;
|
||||
let dragover = false;
|
||||
let upload: Promise<any>;
|
||||
let rejectionError: string;
|
||||
let parseProgress: Progress;
|
||||
|
||||
const url = urlFromParams();
|
||||
if (url) {
|
||||
dragover = true;
|
||||
specifiedFileName = url;
|
||||
upload = loadUrl(handleProgress, url);
|
||||
}
|
||||
|
||||
function handleUrlLoad() {
|
||||
dragover = true;
|
||||
let answer = prompt('Url of the pdf');
|
||||
specifiedFileName = answer;
|
||||
rejectionError = undefined;
|
||||
parseProgress = undefined;
|
||||
upload = loadUrl(handleProgress, answer);
|
||||
}
|
||||
|
||||
function handleExampleLoad() {
|
||||
dragover = true;
|
||||
specifiedFileName = 'ExamplePdf.pdf';
|
||||
rejectionError = undefined;
|
||||
parseProgress = undefined;
|
||||
upload = loadExample(handleProgress);
|
||||
}
|
||||
|
||||
function handleFilesSelect(e) {
|
||||
specifiedFileName = undefined;
|
||||
rejectionError = undefined;
|
||||
parseProgress = undefined;
|
||||
const { acceptedFiles, fileRejections } = e.detail;
|
||||
if (acceptedFiles.length === 1) {
|
||||
const specifiedFile = acceptedFiles[0];
|
||||
specifiedFileName = specifiedFile.name;
|
||||
upload = processUpload(specifiedFile, handleProgress);
|
||||
}
|
||||
if (fileRejections.length > 1) {
|
||||
const fileNames = fileRejections.map((r) => r.file.name);
|
||||
rejectionError = `Only one file at a time allowed! Rejected ${fileRejections.length} files: '${fileNames}'.`;
|
||||
}
|
||||
}
|
||||
|
||||
function handleProgress(progress: Progress) {
|
||||
parseProgress = progress;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto">
|
||||
<!-- Options -->
|
||||
<div class="mb-0.5 flex flex-row-reverse space-x-2 space-x-reverse text-sm items-center">
|
||||
<div class="py-0.5 border-2 border-gray-50 hover:underline cursor-pointer" on:click={handleExampleLoad}>
|
||||
Load Example
|
||||
</div>
|
||||
<div class="py-0.5 border-2 border-gray-50 hover:underline cursor-pointer" on:click={handleUrlLoad}>
|
||||
Open Url
|
||||
</div>
|
||||
<Checkbox name="Debug" bind:enabled={$debugEnabled} />
|
||||
</div>
|
||||
|
||||
<!-- Upload Box -->
|
||||
<div class="mb-5 border-2 border-dashed border-gray-400 hover:border-select" class:dragover>
|
||||
<Dropzone
|
||||
on:drop={handleFilesSelect}
|
||||
on:dragenter={() => (dragover = true)}
|
||||
on:dragleave={() => (dragover = false)}
|
||||
multiple={false}
|
||||
noClick={false}
|
||||
disableDefaultStyles={true}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 justify-items-center">
|
||||
<span class:dragoverItem={dragover}>
|
||||
<Download size="21x" />
|
||||
</span>
|
||||
<div class="px-5 mb-5">
|
||||
<div class="text-5xl font-bold my-4">Drop your PDF file here...</div>
|
||||
<div class="text-2xl font-bold">Or click the box to select one...</div>
|
||||
<div class="mt-14"><strong>Note:</strong> Your data stays locally in your browser.</div>
|
||||
<div class="mt-5 text-sm italic font-serif">
|
||||
This tool converts a PDF file into a Markdown text format! Simply drag & drop your PDF file on
|
||||
the upload area and go from there. Don't expect wonders, there are a lot of variances in
|
||||
generated PDF's from different tools and different ages. No matter how good the parser works for
|
||||
your PDF, you will have to invest a good amount of manuell work to complete it.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dropzone>
|
||||
</div>
|
||||
|
||||
<!-- Progress Info -->
|
||||
<div class="mt-5 text-xl font-bold">
|
||||
<div style="min-width: 70%;">
|
||||
{#if specifiedFileName}
|
||||
<div in:blur class="text-2xl mb-2">Parsing {specifiedFileName} ...</div>
|
||||
{/if}
|
||||
{#if parseProgress}
|
||||
<div in:blur class="flex space-x-4">
|
||||
<ProgressRing radius={50} stroke={7} progress={parseProgress?.totalProgress() * 100} />
|
||||
<div>
|
||||
{#each parseProgress.stages as stage, index}
|
||||
{#if parseProgress.isProgressing(index)}
|
||||
<div class="flex space-x-2 items-center">
|
||||
<div>
|
||||
Parsing
|
||||
{stage}
|
||||
{parseProgress.stageDetails[index] ? parseProgress.stageDetails[index] : ''}
|
||||
</div>
|
||||
</div>
|
||||
{:else if parseProgress.isComplete(index)}
|
||||
<div class="flex space-x-2 items-center ">
|
||||
<div>
|
||||
Parsing
|
||||
{stage}
|
||||
{parseProgress.stageDetails[index] ? parseProgress.stageDetails[index] : ''}
|
||||
</div>
|
||||
<Check size="1.5x" class="text-select" />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if rejectionError}
|
||||
<div in:slide class="text-red-700">{rejectionError}</div>
|
||||
{/if}
|
||||
{#await upload}
|
||||
<!-- -->
|
||||
{:catch error}
|
||||
<div in:blur={{ delay: 200 }} class="text-red-700">
|
||||
Failed to parse '{specifiedFileName}':
|
||||
{error?.message}
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dragover {
|
||||
@apply border-select;
|
||||
}
|
||||
.dragoverItem {
|
||||
@apply text-select;
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +0,0 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
export function debugFromParams(defaultValue: boolean): boolean {
|
||||
const defined = params.has('debug');
|
||||
if (!defined) {
|
||||
return defaultValue;
|
||||
}
|
||||
return params.get('debug') !== 'false';
|
||||
}
|
||||
|
||||
export function debugStageFromParams(defaultValue: number): number {
|
||||
if (!params.has('stage')) {
|
||||
return defaultValue;
|
||||
}
|
||||
const stage = +params.get('stage');
|
||||
if (!Number.isInteger(stage)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return stage;
|
||||
}
|
||||
|
||||
export function urlFromParams(): string {
|
||||
return getParameterByName('url');
|
||||
}
|
||||
|
||||
function getParameterByName(name: string): string {
|
||||
const match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
|
||||
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
import { createPipeline } from '@core';
|
||||
import type ProgressListenFunction from '@core/ProgressListenFunction';
|
||||
import type ParseResult from '@core/ParseResult';
|
||||
import type Debugger from '@core/Debugger';
|
||||
import * as pdfjs from 'pdfjs-dist/es5/build/pdf';
|
||||
|
||||
import { Writable, writable } from 'svelte/store';
|
||||
|
||||
export let debug: Writable<Debugger> = writable(undefined);
|
||||
export let parseResult: Writable<ParseResult> = writable(undefined);
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `worker/pdf.worker.min.js`;
|
||||
|
||||
const pdfPipeline = createPipeline(pdfjs, {});
|
||||
|
||||
export async function loadExample(progressListener: ProgressListenFunction): Promise<any> {
|
||||
return parsePdf('ExamplePdf.pdf', progressListener);
|
||||
}
|
||||
|
||||
export async function loadUrl(progressListener: ProgressListenFunction, url: String): Promise<any> {
|
||||
return parsePdf('https://pdf-to-markdown-proxy.herokuapp.com/' + url, progressListener);
|
||||
}
|
||||
|
||||
export async function processUpload(file: File, progressListener: ProgressListenFunction): Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onerror = reject;
|
||||
reader.onload = () => {
|
||||
resolve(reader.result as ArrayBuffer);
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
}).then((buffer) => {
|
||||
const data = new Uint8Array(buffer as ArrayBuffer);
|
||||
return parsePdf(data, progressListener);
|
||||
});
|
||||
}
|
||||
|
||||
async function parsePdf(src: string | Uint8Array, progressListener: ProgressListenFunction): Promise<any> {
|
||||
return pdfPipeline.debug(src, progressListener).then((debugInstance) => {
|
||||
debug.set(debugInstance);
|
||||
return debug;
|
||||
});
|
||||
//TODO without debug-flag
|
||||
// return pdfPipeline.execute(src, progressListener).then((result) => {
|
||||
// parseResult.set(result);
|
||||
// return result;
|
||||
// });
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { backInOut as easing } from 'svelte/easing';
|
||||
|
||||
const defaultOptions = {
|
||||
delay: 0,
|
||||
duration: 400,
|
||||
easing,
|
||||
};
|
||||
|
||||
/**
|
||||
* Slide the element horizontally, across the X-axis.
|
||||
* @param node
|
||||
* @param options
|
||||
*/
|
||||
export default function slideH(node: HTMLElement, options: object) {
|
||||
const mergedOptions = { ...defaultOptions, ...options };
|
||||
|
||||
const style = getComputedStyle(node);
|
||||
const opacity = +style.opacity;
|
||||
const width = parseFloat(style.width);
|
||||
const padding_left = parseFloat(style.paddingLeft);
|
||||
const padding_right = parseFloat(style.paddingRight);
|
||||
const margin_left = parseFloat(style.marginLeft);
|
||||
const margin_right = parseFloat(style.marginRight);
|
||||
const border_left_width = parseFloat(style.borderLeftWidth);
|
||||
const border_right_width = parseFloat(style.borderRightWidth);
|
||||
|
||||
return {
|
||||
delay: mergedOptions.delay,
|
||||
duration: mergedOptions.duration,
|
||||
easing: mergedOptions.easing,
|
||||
css: (t: number) =>
|
||||
`overflow: hidden;` +
|
||||
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
||||
`width: ${t * width}px;` +
|
||||
`padding-left: ${t * padding_left}px;` +
|
||||
`padding-right: ${t * padding_right}px;` +
|
||||
`margin-left: ${t * margin_left}px;` +
|
||||
`margin-right: ${t * margin_right}px;` +
|
||||
`border-left-width: ${t * border_left_width}px;` +
|
||||
`border-right-width: ${t * border_right_width}px;`,
|
||||
};
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
const autoPreprocess = require('svelte-preprocess');
|
||||
|
||||
module.exports = {
|
||||
preprocess: autoPreprocess({
|
||||
defaults: {
|
||||
script: 'typescript',
|
||||
},
|
||||
postcss: true,
|
||||
}),
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
module.exports = {
|
||||
future: {
|
||||
removeDeprecatedGapUtilities: true,
|
||||
purgeLayersByDefault: true,
|
||||
},
|
||||
purge: {
|
||||
content: ['./src/**/*.svelte', './src/**/*.ts'],
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// gray-400 hue-rotated 180deg
|
||||
select: '#A8A297',
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
15: 'repeat(15, minmax(0, 1fr))',
|
||||
20: 'repeat(20, minmax(0, 1fr))',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
plugin(function ({ addUtilities, theme }) {
|
||||
const themeColors = theme('colors');
|
||||
const individualBorderColors = Object.keys(themeColors).map((colorName) => ({
|
||||
[`.border-b-${colorName}`]: {
|
||||
borderBottomColor: themeColors[colorName],
|
||||
},
|
||||
[`.border-t-${colorName}`]: {
|
||||
borderTopColor: themeColors[colorName],
|
||||
},
|
||||
[`.border-l-${colorName}`]: {
|
||||
borderLeftColor: themeColors[colorName],
|
||||
},
|
||||
[`.border-r-${colorName}`]: {
|
||||
borderRightColor: themeColors[colorName],
|
||||
},
|
||||
}));
|
||||
|
||||
addUtilities(individualBorderColors);
|
||||
}),
|
||||
],
|
||||
};
|
||||
@ -1,32 +0,0 @@
|
||||
{
|
||||
"include": ["src", "types"],
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "preserve",
|
||||
"baseUrl": "./",
|
||||
/* paths - If you configure Snowpack import aliases, add them here. */
|
||||
"paths": {
|
||||
"@core": ["../core/src"],
|
||||
"@core/*": ["../core/src/*"]
|
||||
},
|
||||
/* noEmit - Snowpack builds (emits) files, not tsc. */
|
||||
"noEmit": true,
|
||||
/* Additional Options */
|
||||
"strict": true,
|
||||
"noImplicitAny": false,
|
||||
// "noImplicitThis": false,
|
||||
// "alwaysStrict": false,
|
||||
// "strictBindCallApply": false,
|
||||
"strictNullChecks": false,
|
||||
// "strictFunctionTypes": false,
|
||||
// "strictPropertyInitialization": false,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"useDefineForClassFields": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"importsNotUsedAsValues": "remove"
|
||||
}
|
||||
}
|
||||
68
ui/types/static.d.ts
vendored
68
ui/types/static.d.ts
vendored
@ -1,68 +0,0 @@
|
||||
/* Use this file to declare any custom file extensions for importing */
|
||||
/* Use this folder to also add/extend a package d.ts file, if needed. */
|
||||
|
||||
declare module 'svelte-file-dropzone';
|
||||
|
||||
declare namespace svelte.JSX {
|
||||
interface HTMLProps<T> {
|
||||
// inView.ts action
|
||||
onintersect?: (e: CustomEvent) => void;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS MODULES */
|
||||
declare module '*.module.css' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
declare module '*.module.scss' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
declare module '*.module.sass' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
declare module '*.module.less' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
declare module '*.module.styl' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
|
||||
/* CSS */
|
||||
declare module '*.css';
|
||||
declare module '*.scss';
|
||||
declare module '*.sass';
|
||||
declare module '*.less';
|
||||
declare module '*.styl';
|
||||
|
||||
/* IMAGES */
|
||||
declare module '*.svg' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.bmp' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.gif' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.jpg' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.jpeg' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.png' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
|
||||
/* CUSTOM: ADD YOUR OWN HERE */
|
||||
@ -1,6 +0,0 @@
|
||||
// NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
|
||||
process.env.NODE_ENV = 'test';
|
||||
|
||||
module.exports = {
|
||||
plugins: [require('@snowpack/web-test-runner-plugin')()],
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user