Use spaces, run prettier on project
This commit is contained in:
ZXY101
@@ -1,17 +1,17 @@
|
||||
<script lang="ts">
|
||||
import type { Page } from '$lib/types';
|
||||
import TextBoxes from './TextBoxes.svelte';
|
||||
import type { Page } from '$lib/types';
|
||||
import TextBoxes from './TextBoxes.svelte';
|
||||
|
||||
export let page: Page;
|
||||
export let src: Blob;
|
||||
export let page: Page;
|
||||
export let src: Blob;
|
||||
</script>
|
||||
|
||||
<div
|
||||
draggable="false"
|
||||
style:width={`${page.img_width}px`}
|
||||
style:height={`${page.img_height}px`}
|
||||
style:background-image={`url(${URL.createObjectURL(src)})`}
|
||||
class="relative"
|
||||
draggable="false"
|
||||
style:width={`${page.img_width}px`}
|
||||
style:height={`${page.img_height}px`}
|
||||
style:background-image={`url(${URL.createObjectURL(src)})`}
|
||||
class="relative"
|
||||
>
|
||||
<TextBoxes {page} />
|
||||
<TextBoxes {page} />
|
||||
</div>
|
||||
|
||||
@@ -1,133 +1,122 @@
|
||||
<script lang="ts">
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import {
|
||||
Panzoom,
|
||||
keepZoomStart,
|
||||
zoomDefault,
|
||||
zoomFitToScreen,
|
||||
zoomFitToWidth,
|
||||
zoomOriginal
|
||||
} from '$lib/panzoom';
|
||||
import { progress, settings, updateProgress } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import { Button, Input, Popover, Range } from 'flowbite-svelte';
|
||||
import MangaPage from './MangaPage.svelte';
|
||||
import {
|
||||
ChervonDoubleLeftSolid,
|
||||
ChervonDoubleRightSolid,
|
||||
ChevronLeftSolid
|
||||
} from 'flowbite-svelte-icons';
|
||||
import { onMount } from 'svelte';
|
||||
import { currentVolume } from '$lib/catalog';
|
||||
import { Panzoom, zoomDefault } from '$lib/panzoom';
|
||||
import { progress, settings, updateProgress } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import { Input, Popover, Range } from 'flowbite-svelte';
|
||||
import MangaPage from './MangaPage.svelte';
|
||||
import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const volume = $currentVolume;
|
||||
const pages = volume?.mokuroData.pages;
|
||||
const volume = $currentVolume;
|
||||
const pages = volume?.mokuroData.pages;
|
||||
|
||||
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
||||
$: index = page - 1;
|
||||
$: navAmount = $settings.singlePageView ? 1 : 2;
|
||||
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
|
||||
$: index = page - 1;
|
||||
$: navAmount = $settings.singlePageView ? 1 : 2;
|
||||
|
||||
let start: Date;
|
||||
let start: Date;
|
||||
|
||||
function mouseDown() {
|
||||
start = new Date();
|
||||
}
|
||||
function mouseDown() {
|
||||
start = new Date();
|
||||
}
|
||||
|
||||
function left() {
|
||||
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
function left() {
|
||||
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
|
||||
changePage(newPage);
|
||||
}
|
||||
|
||||
function right() {
|
||||
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, ingoreTimeOut = false) {
|
||||
const end = new Date();
|
||||
const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
|
||||
function changePage(newPage: number, ingoreTimeOut = false) {
|
||||
const end = new Date();
|
||||
const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
|
||||
|
||||
if (pages && volume && clickDuration < 200) {
|
||||
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
||||
zoomDefault();
|
||||
}
|
||||
}
|
||||
if (pages && volume && clickDuration < 200) {
|
||||
updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
|
||||
zoomDefault();
|
||||
}
|
||||
}
|
||||
|
||||
$: manualPage = page;
|
||||
$: pageDisplay = `${page}/${pages?.length}`;
|
||||
$: manualPage = page;
|
||||
$: pageDisplay = `${page}/${pages?.length}`;
|
||||
|
||||
function onInputClick(this: any) {
|
||||
this.select();
|
||||
}
|
||||
function onInputClick(this: any) {
|
||||
this.select();
|
||||
}
|
||||
|
||||
function onManualPageChange() {
|
||||
changePage(manualPage, true);
|
||||
}
|
||||
function onManualPageChange() {
|
||||
changePage(manualPage, true);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
zoomDefault();
|
||||
});
|
||||
onMount(() => {
|
||||
zoomDefault();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={zoomDefault} />
|
||||
{#if volume && pages}
|
||||
<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-row items-center gap-5 z-10">
|
||||
<ChervonDoubleLeftSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
size="sm"
|
||||
defaultClass="select-all"
|
||||
bind:value={manualPage}
|
||||
on:click={onInputClick}
|
||||
on:change={onManualPageChange}
|
||||
/>
|
||||
<ChervonDoubleRightSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
</div>
|
||||
<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
|
||||
</div>
|
||||
</Popover>
|
||||
<button
|
||||
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
||||
class:hidden={!$settings.pageNum}
|
||||
id="page-num"
|
||||
>
|
||||
{pageDisplay}
|
||||
</button>
|
||||
<div class="flex">
|
||||
<Panzoom>
|
||||
<button
|
||||
class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
/>
|
||||
<button
|
||||
class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
/>
|
||||
<div class="flex flex-row">
|
||||
{#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>
|
||||
</div>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-row items-center gap-5 z-10">
|
||||
<ChervonDoubleLeftSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
size="sm"
|
||||
defaultClass="select-all"
|
||||
bind:value={manualPage}
|
||||
on:click={onInputClick}
|
||||
on:change={onManualPageChange}
|
||||
/>
|
||||
<ChervonDoubleRightSolid
|
||||
on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
|
||||
class="hover:text-primary-600"
|
||||
/>
|
||||
</div>
|
||||
<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
|
||||
</div>
|
||||
</Popover>
|
||||
<button
|
||||
class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
|
||||
class:hidden={!$settings.pageNum}
|
||||
id="page-num"
|
||||
>
|
||||
{pageDisplay}
|
||||
</button>
|
||||
<div class="flex">
|
||||
<Panzoom>
|
||||
<button
|
||||
class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
/>
|
||||
<button
|
||||
class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
/>
|
||||
<div class="flex flex-row">
|
||||
{#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>
|
||||
</div>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={left}
|
||||
class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
<button
|
||||
on:mousedown={mouseDown}
|
||||
on:mouseup={right}
|
||||
class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { clamp } from '$lib/util';
|
||||
import type { Page } from '$lib/types';
|
||||
import { settings } from '$lib/settings';
|
||||
import { clamp } from '$lib/util';
|
||||
import type { Page } from '$lib/types';
|
||||
import { settings } from '$lib/settings';
|
||||
|
||||
export let page: Page;
|
||||
export let page: Page;
|
||||
|
||||
$: textBoxes = page.blocks.map((block) => {
|
||||
const { img_height, img_width } = page;
|
||||
const { box, font_size, lines, vertical } = block;
|
||||
$: textBoxes = page.blocks.map((block) => {
|
||||
const { img_height, img_width } = page;
|
||||
const { box, font_size, lines, vertical } = block;
|
||||
|
||||
let [_xmin, _ymin, _xmax, _ymax] = box;
|
||||
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 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 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
|
||||
};
|
||||
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;
|
||||
});
|
||||
return textBox;
|
||||
});
|
||||
|
||||
$: fontWeight = $settings.boldFont ? 'bold' : '400';
|
||||
$: display = $settings.displayOCR ? 'block' : 'none';
|
||||
$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
|
||||
$: contenteditable = $settings.textEditable;
|
||||
$: 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>
|
||||
<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 {
|
||||
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: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 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;
|
||||
}
|
||||
.text-box:focus p,
|
||||
.text-box:hover p {
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user