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 04b70d8
Show file tree
Hide file tree
Showing 7 changed files with 427 additions and 313 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 04b70d8

Please sign in to comment.