Skip to content

Commit

Permalink
fix(edgeless): show curve icon on resize handle hover before scaling …
Browse files Browse the repository at this point in the history 
…starts (toeverything#6095)
  • Loading branch information
@AyushAgrawal-A2
AyushAgrawal-A2 authored Jan 24, 2024
1 parent b0af286 commit 2643330
Showing 1 changed file with 84 additions and 23 deletions.
107 changes: 84 additions & 23 deletions packages/blocks/src/page-block/edgeless/components/rects/edgeless-selected-rect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { assertType, type Disposable } from '@blocksuite/global/utils';
import { WithDisposable } from '@blocksuite/lit';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';

import { EMBED_CARD_HEIGHT } from '../../../../_common/consts.js';
Expand Down Expand Up @@ -303,7 +304,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
bottom: -0.5px;
}
.affine-edgeless-selected-rect::before {
.affine-edgeless-selected-rect .handle .resize::before {
content: '';
display: none;
position: absolute;
Expand All @@ -313,26 +314,45 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
background-size: contain;
background-repeat: no-repeat;
}
.affine-edgeless-selected-rect[data-direction='top-left']::before {
.affine-edgeless-selected-rect[data-mode='scale']
.handle[aria-label='top-left']
.resize:hover::before,
.affine-edgeless-selected-rect[data-scale-direction='top-left'][data-scale-percent]
.handle[aria-label='top-left']
.resize::before {
display: block;
top: 0px;
left: 0px;
transform-origin: bottom right;
transform: translate(-100%, -100%);
}
.affine-edgeless-selected-rect[data-direction='top-right']::before {
.affine-edgeless-selected-rect[data-mode='scale']
.handle[aria-label='top-right']
.resize:hover::before,
.affine-edgeless-selected-rect[data-scale-direction='top-right'][data-scale-percent]
.handle[aria-label='top-right']
.resize::before {
display: block;
top: 0px;
right: 0px;
transform: translate(100%, -100%) rotate(90deg);
}
.affine-edgeless-selected-rect[data-direction='bottom-right']::before {
.affine-edgeless-selected-rect[data-mode='scale']
.handle[aria-label='bottom-right']
.resize:hover::before,
.affine-edgeless-selected-rect[data-scale-direction='bottom-right'][data-scale-percent]
.handle[aria-label='bottom-right']
.resize::before {
display: block;
bottom: 0px;
right: 0px;
transform: translate(100%, 100%) rotate(180deg);
}
.affine-edgeless-selected-rect[data-direction='bottom-left']::before {
.affine-edgeless-selected-rect[data-mode='scale']
.handle[aria-label='bottom-left']
.resize:hover::before,
.affine-edgeless-selected-rect[data-scale-direction='bottom-left'][data-scale-percent]
.handle[aria-label='bottom-left']
.resize::before {
display: block;
bottom: 0px;
left: 0px;
Expand All @@ -353,25 +373,25 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
font-weight: 400;
line-height: 24px;
}
.affine-edgeless-selected-rect[data-direction='top-left']::after {
.affine-edgeless-selected-rect[data-scale-direction='top-left']::after {
display: block;
top: -20px;
left: -20px;
transform: translate(-100%, -100%);
}
.affine-edgeless-selected-rect[data-direction='top-right']::after {
.affine-edgeless-selected-rect[data-scale-direction='top-right']::after {
display: block;
top: -20px;
right: -20px;
transform: translate(100%, -100%);
}
.affine-edgeless-selected-rect[data-direction='bottom-right']::after {
.affine-edgeless-selected-rect[data-scale-direction='bottom-right']::after {
display: block;
bottom: -20px;
right: -20px;
transform: translate(100%, 100%);
}
.affine-edgeless-selected-rect[data-direction='bottom-left']::after {
.affine-edgeless-selected-rect[data-scale-direction='bottom-left']::after {
display: block;
bottom: -20px;
left: -20px;
Expand All @@ -397,10 +417,13 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
private _isResizing = false;

@state()
private _dragDirection: HandleDirection | null = null;
private _mode: 'resize' | 'scale' | 'rotate' = 'resize';

@state()
private _scalePercent: string | null = null;
private _scalePercent?: string;

@state()
private _scaleDirection?: HandleDirection;

@state()
private _isNoteWidthLimit = false;
Expand Down Expand Up @@ -581,8 +604,8 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {

if (this._shiftKey) {
scale = bound.w / width;
this._dragDirection = direction;
this._scalePercent = `${Math.round(scale * 100)}%`;
this._scaleDirection = direction;
} else if (curBound.h !== bound.h) {
edgeless.page.updateBlock(element, () => {
element.edgeless.collapse = true;
Expand Down Expand Up @@ -610,15 +633,14 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
if (isImageBlock(element)) {
const { height } = element;
if (height) {
this._dragDirection = direction;
this._scalePercent = `${Math.round((bound.h / height) * 100)}%`;
this._scaleDirection = direction;
}
} else {
this._dragDirection = direction;

const cardStyle = (element as BookmarkBlockModel).style;
const height = EMBED_CARD_HEIGHT[cardStyle];
this._scalePercent = `${Math.round((bound.h / height) * 100)}%`;
this._scaleDirection = direction;
}
if (
direction === HandleDirection.Left ||
Expand Down Expand Up @@ -698,12 +720,10 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
});

this._updateCursor(true, { type: 'rotate', angle: delta });
this._updateMode();
};

private _onDragEnd = () => {
this._dragDirection = null;
this._scalePercent = null;

this.page.transact(() => {
this._dragEndCallback.forEach(cb => cb());
});
Expand All @@ -713,10 +733,42 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
this._isNoteHeightLimit = false;

this._updateCursor(false);

this._scalePercent = undefined;
this._scaleDirection = undefined;
this._updateMode();

this.setToolbarVisible(true);
this.edgeless.slots.elementResizeEnd.emit();
};

private _updateMode = () => {
if (this._cursorRotate) {
this._mode = 'rotate';
return;
}

const { selection } = this;
const elements = selection.elements;

if (elements.length !== 1) this._mode = 'scale';

const element = elements[0];

if (isNoteBlock(element)) {
this._mode = this._shiftKey ? 'scale' : 'resize';
} else if (this._isProportionalElement(element)) {
this._mode = 'scale';
} else {
this._mode = 'resize';
}

if (this._mode !== 'scale') {
this._scalePercent = undefined;
this._scaleDirection = undefined;
}
};

private _updateCursor = (
dragging: boolean,
options?: {
Expand Down Expand Up @@ -835,6 +887,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {

private _updateOnViewportChange = () => {
this._updateSelectedRect();
this._updateMode();
};

private _initSelectedSlot = () => {
Expand All @@ -858,19 +911,23 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
this._updateResizeManagerState(true);
// Reset the cursor
this._updateCursor(false);
this._updateMode();
};

private _updateOnElementChange = (
element: string | { id: string },
fromRemote: boolean = false
) => {
if ((fromRemote && this._resizeManager.dragging) || !this.isConnected)
if ((fromRemote && this._resizeManager.dragging) || !this.isConnected) {
return;
}

const id = typeof element === 'string' ? element : element.id;

if (this._resizeManager.bounds.has(id) || this.selection.has(id))
if (this._resizeManager.bounds.has(id) || this.selection.has(id)) {
this._updateSelectedRect();
this._updateMode();
}
};

override firstUpdated() {
Expand Down Expand Up @@ -898,6 +955,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
this._shiftKey = pressed;
this._resizeManager.onPressShiftKey(pressed);
this._updateSelectedRect();
this._updateMode();
})
);

Expand Down Expand Up @@ -1049,6 +1107,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
filter: drop-shadow(-6px 0px 12px rgba(235, 67, 53, 0.35));
}
</style>
${!page.readonly && this._canAutoComplete()
? html`<edgeless-auto-complete
.current=${this.selection.elements[0]}
Expand All @@ -1057,6 +1116,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
>
</edgeless-auto-complete>`
: nothing}
<div
class="affine-edgeless-selected-rect"
style=${styleMap({
Expand All @@ -1067,8 +1127,9 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
transform: `translate(${_selectedRect.left}px, ${_selectedRect.top}px) rotate(${_selectedRect.rotate}deg)`,
})}
disabled="true"
data-scale-percent=${this._scalePercent ?? ''}
data-direction=${this._dragDirection ?? ''}
data-mode=${this._mode}
data-scale-percent=${ifDefined(this._scalePercent)}
data-scale-direction=${ifDefined(this._scaleDirection)}
>
${resizeHandles} ${connectorHandle} ${elementHandle}
</div>
Expand Down

1 comment on commit 2643330

@github-actions
Copy link

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.2 MB (+182 kB) 2.76 MB (+44 kB) 1.72 MB (+23.3 kB)

Packages

Name Size Gzip Brotli
blocks 2.39 MB (+103 kB) 543 kB (+27.8 kB) 399 kB (+17.1 kB)
editor 84 B 89 B 63 B
store 62.3 kB (+2 B) 17.8 kB (+7 B) 16 kB (+17 B)
inline 33.6 kB 9.08 kB 8.15 kB

Please sign in to comment.