Cleanup, progress storing and settings handling
This commit is contained in:
ZXY101
@@ -1,41 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { settings } from '$lib/settings';
|
||||
import type { Page } from '$lib/types';
|
||||
import { clamp } from '$lib/util';
|
||||
import TextBoxes from './TextBoxes.svelte';
|
||||
|
||||
export let page: Page;
|
||||
export let left: () => void;
|
||||
export let right: () => void;
|
||||
|
||||
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
||||
|
||||
$: textBoxes = page.blocks.map((block) => {
|
||||
const { img_height, img_width } = page;
|
||||
const { box, font_size, lines, vertical } = block;
|
||||
|
||||
let [_xmin, _ymin, _xmax, _ymax] = box;
|
||||
|
||||
const xmin = clamp(_xmin, 0, img_width);
|
||||
const ymin = clamp(_ymin, 0, img_height);
|
||||
const xmax = clamp(_xmax, 0, img_width);
|
||||
const ymax = clamp(_ymax, 0, img_height);
|
||||
|
||||
const width = xmax - xmin;
|
||||
const height = ymax - ymin;
|
||||
|
||||
const textBox = {
|
||||
left: `${xmin}px`,
|
||||
top: `${ymin}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
fontSize: `${font_size}px`,
|
||||
writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
|
||||
lines
|
||||
};
|
||||
|
||||
return textBox;
|
||||
});
|
||||
|
||||
export let src: Blob;
|
||||
</script>
|
||||
|
||||
@@ -44,67 +11,7 @@
|
||||
style:width={`${page.img_width}px`}
|
||||
style:height={`${page.img_height}px`}
|
||||
style:background-image={`url(${URL.createObjectURL(src)})`}
|
||||
class="relative"
|
||||
>
|
||||
{#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }}
|
||||
<div
|
||||
class="text-box"
|
||||
style:width
|
||||
style:height
|
||||
style:left
|
||||
style:top
|
||||
style:font-size={fontSize}
|
||||
style:writing-mode={writingMode}
|
||||
style:font-weight={fontWeight}
|
||||
>
|
||||
{#each lines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</div>
|
||||
<div />
|
||||
{/each}
|
||||
<button
|
||||
on:click={left}
|
||||
class={`left-0 top-0 absolute h-full w-[200%]`}
|
||||
style:margin-left={page.img_width * -2 + 'px'}
|
||||
/>
|
||||
<button
|
||||
on:click={right}
|
||||
class={`right-0 top-0 absolute h-full w-[200%]`}
|
||||
style:margin-right={page.img_width * -2 + 'px'}
|
||||
/>
|
||||
<TextBoxes {page} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
color: black;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
line-height: 1.1em;
|
||||
font-size: 16pt;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
.text-box:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 999 !important;
|
||||
}
|
||||
.text-box p {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
font-weight: var(--bold);
|
||||
}
|
||||
|
||||
.text-box:hover p {
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import { Panzoom } from '$lib/panzoom';
|
||||
import { progress, settings, updateProgress } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import MangaPage from './MangaPage.svelte';
|
||||
|
||||
const volume = $currentVolume;
|
||||
let page = 1;
|
||||
const pages = volume?.mokuroData.pages;
|
||||
|
||||
let pages = volume?.mokuroData.pages;
|
||||
function right() {
|
||||
page++;
|
||||
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
||||
$: index = page - 1;
|
||||
$: navAmount = $settings.singlePageView ? 1 : 2;
|
||||
|
||||
let start: Date;
|
||||
|
||||
function mouseDown() {
|
||||
start = new Date();
|
||||
}
|
||||
|
||||
function left() {
|
||||
if (page > 1) {
|
||||
page--;
|
||||
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
|
||||
function right() {
|
||||
const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
|
||||
function changePage(newPage: number) {
|
||||
const end = new Date();
|
||||
const clickDuration = end.getTime() - start.getTime();
|
||||
if (pages && volume && clickDuration < 200) {
|
||||
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if volume && pages}
|
||||
<div
|
||||
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
||||
class:hidden={!$settings.pageNum}
|
||||
>
|
||||
{page}/{pages.length}
|
||||
</div>
|
||||
<Panzoom>
|
||||
<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} {left} {right} />
|
||||
<div class="flex flex-row justify-center">
|
||||
{#if !$settings.singlePageView && index + 1 < pages.length}
|
||||
<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
|
||||
{/if}
|
||||
<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
|
||||
</div>
|
||||
</Panzoom>
|
||||
<button
|
||||
style:width={'10%'}
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
class="left-0 top-0 absolute h-full"
|
||||
/>
|
||||
<button
|
||||
style:width={'10%'}
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
class="right-0 top-0 absolute h-full"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
94
src/lib/components/Reader/TextBoxes.svelte
Normal file
94
src/lib/components/Reader/TextBoxes.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { clamp } from '$lib/util';
|
||||
import type { Page } from '$lib/types';
|
||||
import { settings } from '$lib/settings';
|
||||
|
||||
export let page: Page;
|
||||
|
||||
$: textBoxes = page.blocks.map((block) => {
|
||||
const { img_height, img_width } = page;
|
||||
const { box, font_size, lines, vertical } = block;
|
||||
|
||||
let [_xmin, _ymin, _xmax, _ymax] = box;
|
||||
|
||||
const xmin = clamp(_xmin, 0, img_width);
|
||||
const ymin = clamp(_ymin, 0, img_height);
|
||||
const xmax = clamp(_xmax, 0, img_width);
|
||||
const ymax = clamp(_ymax, 0, img_height);
|
||||
|
||||
const width = xmax - xmin;
|
||||
const height = ymax - ymin;
|
||||
|
||||
const textBox = {
|
||||
left: `${xmin}px`,
|
||||
top: `${ymin}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
|
||||
writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
|
||||
lines
|
||||
};
|
||||
|
||||
return textBox;
|
||||
});
|
||||
|
||||
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
||||
$: display = $settings.displayOCR ? 'block' : 'none';
|
||||
$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
|
||||
$: contenteditable = $settings.textEditable;
|
||||
</script>
|
||||
|
||||
{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
|
||||
<div
|
||||
class="text-box"
|
||||
style:width
|
||||
style:height
|
||||
style:left
|
||||
style:top
|
||||
style:font-size={fontSize}
|
||||
style:writing-mode={writingMode}
|
||||
style:font-weight={fontWeight}
|
||||
style:display
|
||||
style:border
|
||||
{contenteditable}
|
||||
>
|
||||
{#each lines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
color: black;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
line-height: 1.1em;
|
||||
font-size: 16pt;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-box:focus,
|
||||
.text-box:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.text-box p {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
font-weight: var(--bold);
|
||||
}
|
||||
|
||||
.text-box:focus p,
|
||||
.text-box:hover p {
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user