Skip to content

Commit

Permalink
chore: improve pdf preview
Browse files Browse the repository at this point in the history
  • Loading branch information
fundon committed Oct 29, 2024
1 parent 162958f commit 0d57b01
Show file tree
Hide file tree
Showing 12 changed files with 611 additions and 349 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,22 @@ export const errorBtns = style({
marginTop: '28px',
});

export const viewerPage = style({
export const mainItemWrapper = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '20px auto',
selectors: {
'&:first-of-type': {
marginTop: 0,
},
'&:last-of-type': {
marginBottom: 0,
},
},
});

export const viewerPage = style({
maxWidth: 'calc(100% - 40px)',
background: cssVarV2('layer/white'),
boxSizing: 'border-box',
Expand All @@ -116,12 +130,15 @@ export const viewerPage = style({
});

export const thumbnails = style({
display: 'flex',
flexDirection: 'column',
position: 'absolute',
boxSizing: 'border-box',
width: '120px',
padding: '12px 0',
right: '30px',
bottom: '30px',
maxHeight: 'calc(100% - 60px)',
borderRadius: '8px',
borderWidth: '1px',
borderStyle: 'solid',
Expand All @@ -135,8 +152,11 @@ export const thumbnails = style({
});

export const thumbnailsPages = style({
position: 'relative',
display: 'flex',
flexDirection: 'column',
maxHeight: '100%',
overflow: 'hidden',
// gap: '12px',
selectors: {
'&.collapsed': {
Expand All @@ -148,8 +168,11 @@ export const thumbnailsPages = style({
},
});

export const thumbnailsPage = style({
export const thumbnailsItemWrapper = style({
margin: '0px 12px 12px',
});

export const thumbnailsPage = style({
display: 'flex',
overflow: 'clip',
// width: '100%',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
import {
EditIcon,
//EditIcon,
LocalDataIcon,
MoreHorizontalIcon,
ZoomDownIcon,
Expand All @@ -12,22 +12,20 @@ import { useState } from 'react';
import { IconButton } from '../../ui/button';
import { Menu, MenuItem } from '../../ui/menu';
import * as styles from './styles.css';
import { saveBufferToFile } from './utils';
import { download } from './utils';

const items = [
/*
{
name: 'Rename',
icon: <EditIcon />,
action(_model: AttachmentBlockModel) {},
},
*/
{
name: 'Download',
icon: <LocalDataIcon />,
action(model: AttachmentBlockModel) {
const { sourceId, name } = model;
if (!sourceId) return;
saveBufferToFile(sourceId, name).catch(console.error);
},
action: download,
},
];

Expand All @@ -53,7 +51,7 @@ export const Titlebar = ({
ext,
size,
zoom = 100,
isPDF = false,
//isPDF = false,
}: TitlebarProps) => {
const [openMenu, setOpenMenu] = useState(false);

Expand All @@ -65,7 +63,10 @@ export const Titlebar = ({
<span>.{ext}</span>
</div>
<div>{size}</div>
<IconButton icon={<LocalDataIcon />}></IconButton>
<IconButton
icon={<LocalDataIcon />}
onClick={() => download(model)}
></IconButton>
<Menu
items={<MenuItems model={model} />}
rootOptions={{
Expand All @@ -86,7 +87,8 @@ export const Titlebar = ({
styles.titlebarChild,
'zoom',
{
show: isPDF,
// show: isPDF,
show: false,
},
])}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,40 +1,63 @@
import { fileTypeFromBuffer } from 'file-type';
import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';

export async function saveBufferToFile(url: string, filename: string) {
// given input url may not have correct mime type
const blob = await attachmentUrlToBlob(url);
if (!blob) {
return;
export async function getAttachmentBlob(model: AttachmentBlockModel) {
const sourceId = model.sourceId;
if (!sourceId) {
return null;
}

const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
document.body.append(a);
a.click();
a.remove();
URL.revokeObjectURL(blobUrl);
}

export async function attachmentUrlToBlob(
url: string
): Promise<Blob | undefined> {
const buffer = await fetch(url).then(response => response.arrayBuffer());
const doc = model.doc;
let blob = await doc.blobSync.get(sourceId);

if (!buffer) {
console.warn('Could not get blob');
return;
if (blob) {
blob = new Blob([blob], { type: model.type });
}
try {
const type = await fileTypeFromBuffer(buffer);
if (!type) {

return blob;
}

export function download(model: AttachmentBlockModel) {
(async () => {
const blob = await getAttachmentBlob(model);
if (!blob) {
return;
}
const blob = new Blob([buffer], { type: type.mime });
return blob;
} catch (error) {
console.error('Error converting attachment to blob', error);
}
return;

const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = model.name;
document.body.append(a);
a.click();
a.remove();
URL.revokeObjectURL(blobUrl);
})().catch(console.error);
}

export function renderItem(
scroller: HTMLElement | null,
id: number,
imageBitmap: ImageBitmap
) {
if (!scroller) return;

const wrapper = scroller.querySelector(`[data-index="${id}"]`);
if (!wrapper) return;

const item = wrapper.firstElementChild;
if (!item) return;
if (item.firstElementChild) return;

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('bitmaprenderer');
if (!ctx) return;

canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
canvas.style.width = '100%';
canvas.style.height = '100%';

ctx.transferFromImageBitmap(imageBitmap);

item.append(canvas);
}
Loading

0 comments on commit 0d57b01

Please sign in to comment.