Skip to content

Commit

Permalink
fix(edgeless): incorrect dragStart in surface (#5985)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AyushAgrawal-A2
AyushAgrawal-A2 authored Jan 14, 2024
1 parent 7631023 commit b78b5e7
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 66 deletions.
45 changes: 23 additions & 22 deletions packages/blocks/src/_common/embed-block-helper/embed-block-element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,37 +72,38 @@ export class EmbedBlockElement<
const blockComponent = anchorComponent as this;
const element = captureEventTarget(state.raw.target);

const canDrag =
blockComponent.contains(element) ||
!!element?.closest(AFFINE_DRAG_HANDLE_WIDGET);
if (!canDrag) return false;

const isDraggingByDragHandle = !!element?.closest(
AFFINE_DRAG_HANDLE_WIDGET
);
const isDraggingByComponent = blockComponent.contains(element);
const isInSurface = blockComponent.isInSurface;
if (!isInSurface) {

if (!isInSurface && (isDraggingByDragHandle || isDraggingByComponent)) {
this.host.selection.setGroup('note', [
this.host.selection.create('block', {
path: blockComponent.path,
}),
]);
startDragging([blockComponent], state);
return true;
} else if (isInSurface && isDraggingByDragHandle) {
const embedPortal = blockComponent.closest(
'.edgeless-block-portal-embed'
);
assertExists(embedPortal);
const dragPreviewEl = embedPortal.cloneNode() as HTMLElement;
dragPreviewEl.style.transform = '';
dragPreviewEl.style.left = '0';
dragPreviewEl.style.top = '0';
render(
blockComponent.host.renderModel(blockComponent.model),
dragPreviewEl
);

startDragging([blockComponent], state, dragPreviewEl);
return true;
}

const embedPortal = blockComponent.closest(
'.edgeless-block-portal-embed'
);
assertExists(embedPortal);
const dragPreviewEl = embedPortal.cloneNode() as HTMLElement;
dragPreviewEl.style.transform = '';
dragPreviewEl.style.left = '0';
dragPreviewEl.style.top = '0';
render(
blockComponent.host.renderModel(blockComponent.model),
dragPreviewEl
);

startDragging([blockComponent], state, dragPreviewEl);
return true;
return false;
},
onDragEnd: props => {
const { state, draggingElements, dropBlockId } = props;
Expand Down
2 changes: 1 addition & 1 deletion packages/blocks/src/_common/inline/presets/nodes/reference-node/reference-popup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export class ReferencePopup extends WithDisposable(LitElement) {
@click=${() => this._convertToCardView()}
>
${BookmarkIcon}
<affine-tooltip .offset=${12}>${'Embed view'}</affine-tooltip>
<affine-tooltip .offset=${12}>${'Card view'}</affine-tooltip>
</icon-button>
</div>
Expand Down
45 changes: 23 additions & 22 deletions packages/blocks/src/bookmark-block/bookmark-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,37 +83,38 @@ export class BookmarkBlockComponent extends BlockElement<
const blockComponent = anchorComponent as BookmarkBlockComponent;
const element = captureEventTarget(state.raw.target);

const canDrag =
blockComponent.contains(element) ||
!!element?.closest(AFFINE_DRAG_HANDLE_WIDGET);
if (!canDrag) return false;

const isDraggingByDragHandle = !!element?.closest(
AFFINE_DRAG_HANDLE_WIDGET
);
const isDraggingByComponent = blockComponent.contains(element);
const isInSurface = blockComponent.isInSurface;
if (!isInSurface) {

if (!isInSurface && (isDraggingByDragHandle || isDraggingByComponent)) {
this.host.selection.setGroup('note', [
this.host.selection.create('block', {
path: blockComponent.path,
}),
]);
startDragging([blockComponent], state);
return true;
} else if (isInSurface && isDraggingByDragHandle) {
const bookmarkPortal = blockComponent.closest(
'.edgeless-block-portal-bookmark'
);
assertExists(bookmarkPortal);
const dragPreviewEl = bookmarkPortal.cloneNode() as HTMLElement;
dragPreviewEl.style.transform = '';
dragPreviewEl.style.left = '0';
dragPreviewEl.style.top = '0';
render(
blockComponent.host.renderModel(blockComponent.model),
dragPreviewEl
);

startDragging([blockComponent], state, dragPreviewEl);
return true;
}

const bookmarkPortal = blockComponent.closest(
'.edgeless-block-portal-bookmark'
);
assertExists(bookmarkPortal);
const dragPreviewEl = bookmarkPortal.cloneNode() as HTMLElement;
dragPreviewEl.style.transform = '';
dragPreviewEl.style.left = '0';
dragPreviewEl.style.top = '0';
render(
blockComponent.host.renderModel(blockComponent.model),
dragPreviewEl
);

startDragging([blockComponent], state, dragPreviewEl);
return true;
return false;
},
onDragEnd: props => {
const { state, draggingElements, dropBlockId } = props;
Expand Down
43 changes: 22 additions & 21 deletions packages/blocks/src/image-block/image-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,36 +134,37 @@ export class ImageBlockComponent extends BlockElement<ImageBlockModel> {

const blockComponent = anchorComponent as ImageBlockComponent;

const canDrag =
blockComponent.contains(element) ||
!!element?.closest(AFFINE_DRAG_HANDLE_WIDGET);
if (!canDrag) return false;

const isDraggingByDragHandle = !!element?.closest(
AFFINE_DRAG_HANDLE_WIDGET
);
const isDraggingByComponent = blockComponent.contains(element);
const isInSurface = blockComponent.isInSurface;
if (!isInSurface) {

if (!isInSurface && (isDraggingByDragHandle || isDraggingByComponent)) {
this.std.selection.setGroup('note', [
this.std.selection.create('block', {
path: blockComponent.path,
}),
]);
startDragging([blockComponent], state);
return true;
} else if (isInSurface && isDraggingByDragHandle) {
const edgelessPage = getEdgelessPageByElement(blockComponent);
const scale = edgelessPage ? edgelessPage.surface.viewport.zoom : 1;
const width = blockComponent.getBoundingClientRect().width;

const dragPreviewEl = document.createElement('div');
dragPreviewEl.classList.add('affine-block-element');
dragPreviewEl.style.border = '2px solid var(--affine-border-color)';
dragPreviewEl.style.borderRadius = '4px';
dragPreviewEl.style.overflow = 'hidden';
dragPreviewEl.style.width = `${width / scale}px`;
render(blockComponent.renderModel(blockComponent.model), dragPreviewEl);

startDragging([blockComponent], state, dragPreviewEl);
return true;
}

const edgelessPage = getEdgelessPageByElement(blockComponent);
const scale = edgelessPage ? edgelessPage.surface.viewport.zoom : 1;
const width = blockComponent.getBoundingClientRect().width;

const dragPreviewEl = document.createElement('div');
dragPreviewEl.classList.add('affine-block-element');
dragPreviewEl.style.border = '2px solid var(--affine-border-color)';
dragPreviewEl.style.borderRadius = '4px';
dragPreviewEl.style.overflow = 'hidden';
dragPreviewEl.style.width = `${width / scale}px`;
render(blockComponent.renderModel(blockComponent.model), dragPreviewEl);

startDragging([blockComponent], state, dragPreviewEl);
return true;
return false;
},
onDragEnd: props => {
const { state, draggingElements } = props;
Expand Down

2 comments on commit b78b5e7

@vercel
Copy link

@vercel vercel bot commented on b78b5e7 Jan 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

blocksuite – ./packages/playground

blocksuite-toeverything.vercel.app
try-blocksuite.vercel.app
blocksuite-git-master-toeverything.vercel.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Size Report

Bundles

Entry Size Gzip Brotli
examples/basic 13 MB (+10.7 kB) 2.7 MB (+2.96 kB) 1.69 MB (+969 B)

Packages

Name Size Gzip Brotli
blocks 2.27 MB (+1.09 kB) 513 kB (-462 B) 380 kB (+189 B)
editor 84 B 89 B 63 B
store 62 kB 17.7 kB 15.8 kB
inline 32.5 kB 8.94 kB 8.01 kB

Please sign in to comment.