mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 05:14:54 +00:00
chore: merge blocksuite source code (#9213)
This commit is contained in:
Mirone
@@ -0,0 +1,136 @@
|
||||
import type { ImageBlockModel } from '@blocksuite/affine-model';
|
||||
import { humanFileSize } from '@blocksuite/affine-shared/utils';
|
||||
import { modelContext, ShadowlessElement } from '@blocksuite/block-std';
|
||||
import { WithDisposable } from '@blocksuite/global/utils';
|
||||
import { consume } from '@lit/context';
|
||||
import { css, html } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
|
||||
import { FailedImageIcon, ImageIcon, LoadingIcon } from '../styles.js';
|
||||
|
||||
export const SURFACE_IMAGE_CARD_WIDTH = 220;
|
||||
export const SURFACE_IMAGE_CARD_HEIGHT = 122;
|
||||
export const NOTE_IMAGE_CARD_WIDTH = 752;
|
||||
export const NOTE_IMAGE_CARD_HEIGHT = 78;
|
||||
|
||||
export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) {
|
||||
static override styles = css`
|
||||
.affine-image-fallback-card-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.affine-image-fallback-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--affine-background-secondary-color, #f4f4f5);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--affine-background-tertiary-color, #eee);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.affine-image-fallback-card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--affine-placeholder-color);
|
||||
text-align: justify;
|
||||
font-family: var(--affine-font-family);
|
||||
font-size: var(--affine-font-sm);
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: var(--affine-line-height);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.affine-image-card-size {
|
||||
overflow: hidden;
|
||||
padding-top: 12px;
|
||||
color: var(--affine-text-secondary-color);
|
||||
text-overflow: ellipsis;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
`;
|
||||
|
||||
override render() {
|
||||
const { mode, loading, error, model } = this;
|
||||
|
||||
const isEdgeless = mode === 'edgeless';
|
||||
const width = isEdgeless
|
||||
? `${SURFACE_IMAGE_CARD_WIDTH}px`
|
||||
: `${NOTE_IMAGE_CARD_WIDTH}px`;
|
||||
const height = isEdgeless
|
||||
? `${SURFACE_IMAGE_CARD_HEIGHT}px`
|
||||
: `${NOTE_IMAGE_CARD_HEIGHT}px`;
|
||||
|
||||
const rotate = isEdgeless ? model.rotate : 0;
|
||||
|
||||
const cardStyleMap = styleMap({
|
||||
transform: `rotate(${rotate}deg)`,
|
||||
transformOrigin: 'center',
|
||||
width,
|
||||
height,
|
||||
});
|
||||
|
||||
const titleIcon = loading
|
||||
? LoadingIcon
|
||||
: error
|
||||
? FailedImageIcon
|
||||
: ImageIcon;
|
||||
|
||||
const titleText = loading
|
||||
? 'Loading image...'
|
||||
: error
|
||||
? 'Image loading failed.'
|
||||
: 'Image';
|
||||
|
||||
const size =
|
||||
!!model.size && model.size > 0
|
||||
? humanFileSize(model.size, true, 0)
|
||||
: null;
|
||||
|
||||
return html`
|
||||
<div class="affine-image-fallback-card-container">
|
||||
<div
|
||||
class="affine-image-fallback-card drag-target"
|
||||
style=${cardStyleMap}
|
||||
>
|
||||
<div class="affine-image-fallback-card-content">
|
||||
${titleIcon}
|
||||
<span class="affine-image-fallback-card-title-text"
|
||||
>${titleText}</span
|
||||
>
|
||||
</div>
|
||||
<div class="affine-image-card-size">${size}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor error!: boolean;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor loading!: boolean;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor mode!: 'page' | 'edgeless';
|
||||
|
||||
@consume({ context: modelContext })
|
||||
accessor model!: ImageBlockModel;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'affine-image-fallback-card': ImageBlockFallbackCard;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { html } from 'lit';
|
||||
|
||||
const styles = html`<style>
|
||||
.affine-page-selected-embed-rects-container {
|
||||
position: absolute;
|
||||
border: 2px solid var(--affine-primary-color);
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: calc(100% + 1px);
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.affine-page-selected-embed-rects-container .resize {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
pointer-events: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.affine-page-selected-embed-rects-container .resize-inner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
border: 2px solid var(--affine-primary-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.affine-page-selected-embed-rects-container .resize.top-left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: nwse-resize; /*resizer cursor*/
|
||||
}
|
||||
.affine-page-selected-embed-rects-container .resize.top-right {
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: translate(50%, -50%);
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.affine-page-selected-embed-rects-container .resize.bottom-left {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 50%);
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.affine-page-selected-embed-rects-container .resize.bottom-right {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translate(50%, 50%);
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
export function ImageSelectedRect(readonly: boolean) {
|
||||
if (readonly) {
|
||||
return html`${styles}
|
||||
<div
|
||||
class="affine-page-selected-embed-rects-container resizable resizes"
|
||||
></div> `;
|
||||
}
|
||||
return html`
|
||||
${styles}
|
||||
<div class="affine-page-selected-embed-rects-container resizable resizes">
|
||||
<div class="resize top-left">
|
||||
<div class="resize-inner"></div>
|
||||
</div>
|
||||
<div class="resize top-right">
|
||||
<div class="resize-inner"></div>
|
||||
</div>
|
||||
<div class="resize bottom-left">
|
||||
<div class="resize-inner"></div>
|
||||
</div>
|
||||
<div class="resize bottom-right">
|
||||
<div class="resize-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
348
blocksuite/blocks/src/image-block/components/page-image-block.ts
Normal file
348
blocksuite/blocks/src/image-block/components/page-image-block.ts
Normal file
@@ -0,0 +1,348 @@
|
||||
import type { BaseSelection, UIEventStateContext } from '@blocksuite/block-std';
|
||||
import { ShadowlessElement } from '@blocksuite/block-std';
|
||||
import { WithDisposable } from '@blocksuite/global/utils';
|
||||
import { css, html, type PropertyValues } from 'lit';
|
||||
import { property, query, state } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
|
||||
import type { ImageBlockComponent } from '../image-block.js';
|
||||
import { ImageResizeManager } from '../image-resize-manager.js';
|
||||
import { shouldResizeImage } from '../utils.js';
|
||||
import { ImageSelectedRect } from './image-selected-rect.js';
|
||||
|
||||
export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
|
||||
static override styles = css`
|
||||
affine-page-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
affine-page-image .resizable-img {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
affine-page-image .resizable-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
private _isDragging = false;
|
||||
|
||||
private get _doc() {
|
||||
return this.block.doc;
|
||||
}
|
||||
|
||||
private get _host() {
|
||||
return this.block.host;
|
||||
}
|
||||
|
||||
private get _model() {
|
||||
return this.block.model;
|
||||
}
|
||||
|
||||
private _bindKeyMap() {
|
||||
const selection = this._host.selection;
|
||||
|
||||
const addParagraph = (ctx: UIEventStateContext) => {
|
||||
const parent = this._doc.getParent(this._model);
|
||||
if (!parent) return;
|
||||
|
||||
const index = parent.children.indexOf(this._model);
|
||||
const blockId = this._doc.addBlock(
|
||||
'affine:paragraph',
|
||||
{},
|
||||
parent,
|
||||
index + 1
|
||||
);
|
||||
|
||||
const event = ctx.get('defaultState').event;
|
||||
event.preventDefault();
|
||||
|
||||
selection.update(selList =>
|
||||
selList
|
||||
.filter<BaseSelection>(sel => !sel.is('image'))
|
||||
.concat(
|
||||
selection.create('text', {
|
||||
from: {
|
||||
blockId,
|
||||
index: 0,
|
||||
length: 0,
|
||||
},
|
||||
to: null,
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
this.block.bindHotKey({
|
||||
Escape: () => {
|
||||
selection.update(selList => {
|
||||
return selList.map(sel => {
|
||||
const current =
|
||||
sel.is('image') && sel.blockId === this.block.blockId;
|
||||
if (current) {
|
||||
return selection.create('block', { blockId: this.block.blockId });
|
||||
}
|
||||
return sel;
|
||||
});
|
||||
});
|
||||
return true;
|
||||
},
|
||||
Delete: ctx => {
|
||||
if (this._host.doc.readonly || !this._isSelected) return;
|
||||
|
||||
addParagraph(ctx);
|
||||
this._doc.deleteBlock(this._model);
|
||||
return true;
|
||||
},
|
||||
Backspace: ctx => {
|
||||
if (this._host.doc.readonly || !this._isSelected) return;
|
||||
|
||||
addParagraph(ctx);
|
||||
this._doc.deleteBlock(this._model);
|
||||
return true;
|
||||
},
|
||||
Enter: ctx => {
|
||||
if (this._host.doc.readonly || !this._isSelected) return;
|
||||
|
||||
addParagraph(ctx);
|
||||
return true;
|
||||
},
|
||||
ArrowDown: ctx => {
|
||||
const std = this._host.std;
|
||||
|
||||
// If the selection is not image selection, we should not handle it.
|
||||
if (!std.selection.find('image')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const event = ctx.get('keyboardState');
|
||||
event.raw.preventDefault();
|
||||
|
||||
std.command
|
||||
.chain()
|
||||
.getNextBlock({ path: this.block.blockId })
|
||||
.inline((ctx, next) => {
|
||||
const { nextBlock } = ctx;
|
||||
if (!nextBlock) return;
|
||||
|
||||
return next({ focusBlock: nextBlock });
|
||||
})
|
||||
.focusBlockStart()
|
||||
.run();
|
||||
return true;
|
||||
},
|
||||
ArrowUp: ctx => {
|
||||
const std = this._host.std;
|
||||
|
||||
// If the selection is not image selection, we should not handle it.
|
||||
|
||||
if (!std.selection.find('image')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const event = ctx.get('keyboardState');
|
||||
event.raw.preventDefault();
|
||||
|
||||
std.command
|
||||
.chain()
|
||||
.getPrevBlock({ path: this.block.blockId })
|
||||
.inline((ctx, next) => {
|
||||
const { prevBlock } = ctx;
|
||||
if (!prevBlock) return;
|
||||
|
||||
return next({ focusBlock: prevBlock });
|
||||
})
|
||||
.focusBlockEnd()
|
||||
.run();
|
||||
return true;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private _handleError() {
|
||||
this.block.error = true;
|
||||
}
|
||||
|
||||
private _handleSelection() {
|
||||
const selection = this._host.selection;
|
||||
this._disposables.add(
|
||||
selection.slots.changed.on(selList => {
|
||||
this._isSelected = selList.some(
|
||||
sel => sel.blockId === this.block.blockId && sel.is('image')
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
this._disposables.add(
|
||||
this._model.propsUpdated.on(() => {
|
||||
this.requestUpdate();
|
||||
})
|
||||
);
|
||||
|
||||
this._disposables.addFromEvent(
|
||||
this.resizeImg,
|
||||
'click',
|
||||
(event: MouseEvent) => {
|
||||
// the peek view need handle shift + click
|
||||
if (event.shiftKey) return;
|
||||
|
||||
event.stopPropagation();
|
||||
selection.update(selList => {
|
||||
return selList
|
||||
.filter(sel => !['block', 'image', 'text'].includes(sel.type))
|
||||
.concat(selection.create('image', { blockId: this.block.blockId }));
|
||||
});
|
||||
return true;
|
||||
}
|
||||
);
|
||||
|
||||
this.block.handleEvent(
|
||||
'click',
|
||||
() => {
|
||||
if (!this._isSelected) return;
|
||||
|
||||
selection.update(selList =>
|
||||
selList.filter(
|
||||
sel => !(sel.is('image') && sel.blockId === this.block.blockId)
|
||||
)
|
||||
);
|
||||
},
|
||||
{
|
||||
global: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private _normalizeImageSize() {
|
||||
// If is dragging, we should use the real size of the image
|
||||
if (this._isDragging && this.resizeImg) {
|
||||
return {
|
||||
width: this.resizeImg.style.width,
|
||||
};
|
||||
}
|
||||
|
||||
const { width, height } = this._model;
|
||||
if (!width || !height) {
|
||||
return {
|
||||
width: 'unset',
|
||||
height: 'unset',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
width: `${width}px`,
|
||||
};
|
||||
}
|
||||
|
||||
private _observeDrag() {
|
||||
const imageResizeManager = new ImageResizeManager();
|
||||
|
||||
this._disposables.add(
|
||||
this._host.event.add('dragStart', ctx => {
|
||||
const pointerState = ctx.get('pointerState');
|
||||
const target = pointerState.event.target;
|
||||
if (shouldResizeImage(this, target)) {
|
||||
this._isDragging = true;
|
||||
imageResizeManager.onStart(pointerState);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
);
|
||||
|
||||
this._disposables.add(
|
||||
this._host.event.add('dragMove', ctx => {
|
||||
const pointerState = ctx.get('pointerState');
|
||||
if (this._isDragging) {
|
||||
imageResizeManager.onMove(pointerState);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
);
|
||||
|
||||
this._disposables.add(
|
||||
this._host.event.add('dragEnd', () => {
|
||||
if (this._isDragging) {
|
||||
this._isDragging = false;
|
||||
imageResizeManager.onEnd();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
this._bindKeyMap();
|
||||
|
||||
this._observeDrag();
|
||||
}
|
||||
|
||||
override firstUpdated(changedProperties: PropertyValues) {
|
||||
super.firstUpdated(changedProperties);
|
||||
|
||||
this._handleSelection();
|
||||
|
||||
// The embed block can not be focused,
|
||||
// so the active element will be the last activated element.
|
||||
// If the active element is the title textarea,
|
||||
// any event will dispatch from it and be ignored. (Most events will ignore title)
|
||||
// so we need to blur it.
|
||||
// See also https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
|
||||
this.addEventListener('click', () => {
|
||||
if (
|
||||
document.activeElement &&
|
||||
document.activeElement instanceof HTMLElement
|
||||
) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
override render() {
|
||||
const imageSize = this._normalizeImageSize();
|
||||
|
||||
const imageSelectedRect = this._isSelected
|
||||
? ImageSelectedRect(this._doc.readonly)
|
||||
: null;
|
||||
|
||||
return html`
|
||||
<div class="resizable-img" style=${styleMap(imageSize)}>
|
||||
<img
|
||||
class="drag-target"
|
||||
src=${this.block.blobUrl ?? ''}
|
||||
draggable="false"
|
||||
@error=${this._handleError}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
${imageSelectedRect}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@state()
|
||||
accessor _isSelected = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor block!: ImageBlockComponent;
|
||||
|
||||
@query('.resizable-img')
|
||||
accessor resizeImg!: HTMLElement;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'affine-page-image': ImageBlockPageComponent;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user