Skip to content

Commit

Permalink
feat(edgeless): add change note scale button (toeverything#6335)
Browse files Browse the repository at this point in the history
  • Loading branch information
@donteatfriedrice
donteatfriedrice authored Mar 1, 2024
1 parent 274f778 commit b64a502
Show file tree
Hide file tree
Showing 4 changed files with 436 additions and 33 deletions.
77 changes: 57 additions & 20 deletions packages/blocks/src/_common/icons/edgeless.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,17 +261,39 @@ export const ExpandIcon = html`
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.70825 4.99967C2.70825 3.73402 3.73427 2.70801 4.99992 2.70801H7.08325C7.42843 2.70801 7.70825 2.98783 7.70825 3.33301C7.70825 3.67819 7.42843 3.95801 7.08325 3.95801H4.99992C4.42462 3.95801 3.95825 4.42438 3.95825 4.99967V7.08301C3.95825 7.42819 3.67843 7.70801 3.33325 7.70801C2.98807 7.70801 2.70825 7.42819 2.70825 7.08301V4.99967ZM12.2916 3.33301C12.2916 2.98783 12.5714 2.70801 12.9166 2.70801H14.9999C16.2656 2.70801 17.2916 3.73402 17.2916 4.99967V7.08301C17.2916 7.42819 17.0118 7.70801 16.6666 7.70801C16.3214 7.70801 16.0416 7.42819 16.0416 7.08301V4.99967C16.0416 4.42438 15.5752 3.95801 14.9999 3.95801H12.9166C12.5714 3.95801 12.2916 3.67819 12.2916 3.33301ZM3.33325 12.2913C3.67843 12.2913 3.95825 12.5712 3.95825 12.9163V14.9997C3.95825 15.575 4.42462 16.0413 4.99992 16.0413H7.49992C7.8451 16.0413 8.12492 16.3212 8.12492 16.6663C8.12492 17.0115 7.8451 17.2913 7.49992 17.2913H4.99992C3.73427 17.2913 2.70825 16.2653 2.70825 14.9997V12.9163C2.70825 12.5712 2.98807 12.2913 3.33325 12.2913ZM16.6666 12.2913C17.0118 12.2913 17.2916 12.5712 17.2916 12.9163V14.9997C17.2916 16.2653 16.2656 17.2913 14.9999 17.2913H12.4999C12.1547 17.2913 11.8749 17.0115 11.8749 16.6663C11.8749 16.3212 12.1547 16.0413 12.4999 16.0413H14.9999C15.5752 16.0413 16.0416 15.575 16.0416 14.9997V12.9163C16.0416 12.5712 16.3214 12.2913 16.6666 12.2913Z"
fill="#77757D"
/>
<g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.70825 3.33301C2.70825 2.98783 2.98807 2.70801 3.33325 2.70801H16.6666C17.0118 2.70801 17.2916 2.98783 17.2916 3.33301C17.2916 3.67819 17.0118 3.95801 16.6666 3.95801H3.33325C2.98807 3.95801 2.70825 3.67819 2.70825 3.33301Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.70825 16.6663C2.70825 16.3212 2.98807 16.0413 3.33325 16.0413H16.6666C17.0118 16.0413 17.2916 16.3212 17.2916 16.6663C17.2916 17.0115 17.0118 17.2913 16.6666 17.2913H3.33325C2.98807 17.2913 2.70825 17.0115 2.70825 16.6663Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.55798 4.55773C9.80205 4.31365 10.1978 4.31365 10.4419 4.55773L12.9419 7.05773C13.1859 7.30181 13.1859 7.69754 12.9419 7.94162C12.6978 8.18569 12.3021 8.18569 12.058 7.94162L9.99992 5.88356L7.94186 7.94162C7.69778 8.18569 7.30205 8.18569 7.05798 7.94162C6.8139 7.69754 6.8139 7.30181 7.05798 7.05773L9.55798 4.55773Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.05798 12.0577C7.30205 11.8137 7.69778 11.8137 7.94186 12.0577L9.99992 14.1158L12.058 12.0577C12.3021 11.8137 12.6978 11.8137 12.9419 12.0577C13.1859 12.3018 13.1859 12.6975 12.9419 12.9416L10.4419 15.4416C10.1978 15.6857 9.80205 15.6857 9.55798 15.4416L7.05798 12.9416C6.8139 12.6975 6.8139 12.3018 7.05798 12.0577Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.99992 4.37467C10.3451 4.37467 10.6249 4.6545 10.6249 4.99967L10.6249 14.9997C10.6249 15.3449 10.3451 15.6247 9.99992 15.6247C9.65474 15.6247 9.37492 15.3449 9.37492 14.9997L9.37492 4.99967C9.37492 4.6545 9.65474 4.37467 9.99992 4.37467Z"
/>
</g>
</svg>
`;

export const NavigatorSettingsIcon = html`
<svg
width="24"
Expand Down Expand Up @@ -301,21 +323,36 @@ export const ShrinkIcon = html`
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.70825 4.99967C2.70825 3.73402 3.73427 2.70801 4.99992 2.70801H7.08325C7.42843 2.70801 7.70825 2.98783 7.70825 3.33301C7.70825 3.67819 7.42843 3.95801 7.08325 3.95801H4.99992C4.42462 3.95801 3.95825 4.42438 3.95825 4.99967V7.08301C3.95825 7.42819 3.67843 7.70801 3.33325 7.70801C2.98807 7.70801 2.70825 7.42819 2.70825 7.08301V4.99967ZM12.2916 3.33301C12.2916 2.98783 12.5714 2.70801 12.9166 2.70801H14.9999C16.2656 2.70801 17.2916 3.73402 17.2916 4.99967V7.08301C17.2916 7.42819 17.0118 7.70801 16.6666 7.70801C16.3214 7.70801 16.0416 7.42819 16.0416 7.08301V4.99967C16.0416 4.42438 15.5752 3.95801 14.9999 3.95801H12.9166C12.5714 3.95801 12.2916 3.67819 12.2916 3.33301ZM3.33325 12.2913C3.67843 12.2913 3.95825 12.5712 3.95825 12.9163V14.9997C3.95825 15.575 4.42462 16.0413 4.99992 16.0413H7.49992C7.8451 16.0413 8.12492 16.3212 8.12492 16.6663C8.12492 17.0115 7.8451 17.2913 7.49992 17.2913H4.99992C3.73427 17.2913 2.70825 16.2653 2.70825 14.9997V12.9163C2.70825 12.5712 2.98807 12.2913 3.33325 12.2913ZM16.6666 12.2913C17.0118 12.2913 17.2916 12.5712 17.2916 12.9163V14.9997C17.2916 16.2653 16.2656 17.2913 14.9999 17.2913H12.4999C12.1547 17.2913 11.8749 17.0115 11.8749 16.6663C11.8749 16.3212 12.1547 16.0413 12.4999 16.0413H14.9999C15.5752 16.0413 16.0416 15.575 16.0416 14.9997V12.9163C16.0416 12.5712 16.3214 12.2913 16.6666 12.2913Z"
fill="#77757D"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.04159 7.49967C6.04159 6.69426 6.6945 6.04134 7.49992 6.04134H12.4999C13.3053 6.04134 13.9583 6.69426 13.9583 7.49967V12.4997C13.9583 13.3051 13.3053 13.958 12.4999 13.958H7.49992C6.6945 13.958 6.04159 13.3051 6.04159 12.4997V7.49967ZM7.49992 7.29134C7.38486 7.29134 7.29158 7.38461 7.29158 7.49967V12.4997C7.29158 12.6147 7.38486 12.708 7.49992 12.708H12.4999C12.615 12.708 12.7083 12.6147 12.7083 12.4997V7.49967C12.7083 7.38461 12.615 7.29134 12.4999 7.29134H7.49992Z"
fill="#77757D"
/>
<g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.7085 10C2.7085 9.65482 2.98832 9.375 3.3335 9.375H16.6668C17.012 9.375 17.2918 9.65482 17.2918 10C17.2918 10.3452 17.012 10.625 16.6668 10.625H3.3335C2.98832 10.625 2.7085 10.3452 2.7085 10Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.4421 8.77527C10.198 9.01935 9.8023 9.01935 9.55822 8.77527L7.05822 6.27527C6.81414 6.0312 6.81414 5.63547 7.05822 5.39139C7.3023 5.14731 7.69803 5.14731 7.9421 5.39139L10.0002 7.44945L12.0582 5.39139C12.3023 5.14731 12.698 5.14731 12.9421 5.39139C13.1862 5.63547 13.1862 6.0312 12.9421 6.27528L10.4421 8.77527Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.9421 14.6086C12.698 14.8527 12.3023 14.8527 12.0582 14.6086L10.0002 12.5506L7.9421 14.6086C7.69803 14.8527 7.3023 14.8527 7.05822 14.6086C6.81414 14.3645 6.81414 13.9688 7.05822 13.7247L9.55822 11.2247C9.8023 10.9806 10.198 10.9806 10.4421 11.2247L12.9421 13.7247C13.1862 13.9688 13.1862 14.3645 12.9421 14.6086Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.0002 1.875C10.3453 1.875 10.6252 2.15482 10.6252 2.5V7.5C10.6252 7.84518 10.3453 8.125 10.0002 8.125C9.65498 8.125 9.37516 7.84518 9.37516 7.5V2.5C9.37516 2.15482 9.65498 1.875 10.0002 1.875Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.37516 17.5V11.6667H10.6252V17.5C10.6252 17.8452 10.3453 18.125 10.0002 18.125C9.65498 18.125 9.37516 17.8452 9.37516 17.5Z"
/>
</g>
</svg>
`;

Expand Down
108 changes: 102 additions & 6 deletions ...s/blocks/src/root-block/edgeless/components/component-toolbar/change-embed-card-button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,15 @@ import type { BlockStdScope } from '@blocksuite/block-std';
import { assertExists } from '@blocksuite/global/utils';
import type { EditorHost } from '@blocksuite/lit';
import { WithDisposable } from '@blocksuite/lit';
import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
import { baseTheme } from '@toeverything/theme';
import {
css,
html,
LitElement,
nothing,
type TemplateResult,
unsafeCSS,
} from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

Expand All @@ -16,7 +24,10 @@ import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '../../../../_common/consts.js';
import { BookmarkIcon } from '../../../../_common/icons/edgeless.js';
import {
BookmarkIcon,
SmallArrowDownIcon,
} from '../../../../_common/icons/edgeless.js';
import {
CaptionIcon,
CopyIcon,
Expand Down Expand Up @@ -121,7 +132,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
font-feature-settings:
'clig' off,
'liga' off;
font-family: var(--affine-font-family);
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
font-size: 15px;
font-style: normal;
font-weight: 400;
Expand Down Expand Up @@ -161,7 +172,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
'clig' off,
'liga' off;
word-break: break-all;
font-family: var(--affine-font-family);
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
font-size: 14px;
font-style: normal;
font-weight: 400;
Expand Down Expand Up @@ -201,10 +212,30 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
height: 24px;
}
card-style-panel {
.embed-synced-doc-scale-button {
display: flex;
border-radius: 4px;
align-items: center;
gap: 2px;
padding: 2px;
font-size: var(--affine-font-sm);
font-weight: 500;
color: var(--affine-text-secondary-color);
height: 26px;
}
.embed-synced-doc-scale-label {
display: flex;
padding: 2px 0px 2px 4px;
align-items: center;
}
card-style-panel,
edgeless-scale-panel {
display: none;
}
card-style-panel[data-show] {
card-style-panel[data-show],
edgeless-scale-panel[data-show] {
display: flex;
}
`;
Expand Down Expand Up @@ -235,6 +266,14 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
@query('card-style-panel')
private _cardStylePanel!: HTMLDivElement;

@query('.embed-synced-doc-scale-button')
private _embedSyncedDocScaleButton!: HTMLDivElement;
@query('edgeless-scale-panel')
private _embedSyncedDocScalePanel!: HTMLDivElement;
private _embedSyncedDocScalePopper: ReturnType<
typeof createButtonPopper
> | null = null;

private get _doc() {
return this.model.doc;
}
Expand Down Expand Up @@ -512,6 +551,21 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
this._doc.deleteBlock(this.model);
}

private _getScale(model: EmbedSyncedDocModel) {
return model.scale ?? 1;
}

private _setEmbedSyncedDocScale(scale: number) {
if (!isEmbedSyncedDocBlock(this.model)) return;
const bound = Bound.deserialize(this.model.xywh);
const oldScale = this.model.scale ?? 1;
const ratio = scale / oldScale;
bound.w *= ratio;
bound.h *= ratio;
const xywh = bound.serialize();
this.model.doc.updateBlock(this.model, { scale, xywh });
}

override updated(changedProperties: Map<string, unknown>) {
this._cardStylePopper?.dispose();
if (this._canShowCardStylePanel) {
Expand All @@ -525,6 +579,17 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
this._disposables.add(this._cardStylePopper);
}

if (isEmbedSyncedDocBlock(this.model)) {
this._embedSyncedDocScalePopper = createButtonPopper(
this._embedSyncedDocScaleButton,
this._embedSyncedDocScalePanel,
({ display }) => {
this._showPopper = display === 'show';
}
);
this._disposables.add(this._embedSyncedDocScalePopper);
}

super.updated(changedProperties);
}

Expand Down Expand Up @@ -677,6 +742,37 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
${CaptionIcon}
</edgeless-tool-icon-button>
${isEmbedSyncedDocBlock(model)
? html`
<component-toolbar-menu-divider
.vertical=${true}
></component-toolbar-menu-divider>
<edgeless-tool-icon-button
.tooltip=${this._showPopper ? '' : 'Scale'}
.iconContainerPadding=${0}
@click=${() => this._embedSyncedDocScalePopper?.toggle()}
>
<div class="embed-synced-doc-scale-button">
<span class="embed-synced-doc-scale-label"
>${Math.round(this._getScale(model) * 100) + '%'}</span
>
${SmallArrowDownIcon}
</div>
</edgeless-tool-icon-button>
<edgeless-scale-panel
class="embed-synced-doc-scale-popper"
.scale=${Math.round(this._getScale(model) * 100)}
.scales=${[50, 100, 200]}
.minSize=${0}
.onSelect=${(scale: number) => {
this._setEmbedSyncedDocScale(scale);
}}
.onPopperCose=${() => this._embedSyncedDocScalePopper?.hide()}
></edgeless-scale-panel>
`
: nothing}
<component-toolbar-menu-divider
.vertical=${true}
></component-toolbar-menu-divider>
Expand Down
Loading

3 comments on commit b64a502

@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.9 MB (+56.1 kB) 2.88 MB (+11.9 kB) 1.79 MB (+6.44 kB)

Packages

Name Size Gzip Brotli
blocks 2.19 MB (+6.84 kB) 509 kB (+1.38 kB) 371 kB (+646 B)
editor 84 B 89 B 63 B
store 83 B 88 B 63 B
inline 84 B 88 B 63 B

@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.9 MB 2.88 MB 1.79 MB

Packages

Name Size Gzip Brotli
blocks 2.19 MB 509 kB 371 kB
editor 84 B 89 B 63 B
store 83 B 88 B 63 B
inline 84 B 88 B 63 B

@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.9 MB 2.88 MB 1.79 MB

Packages

Name Size Gzip Brotli
blocks 2.19 MB 509 kB 371 kB
editor 84 B 89 B 63 B
store 83 B 88 B 63 B
inline 84 B 88 B 63 B

Please sign in to comment.