mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-20 11:36:25 +08:00
refactor(editor): move present components to its package (#11089)
This commit is contained in:
Saul-Mirone
-82
@@ -1,82 +0,0 @@
|
||||
import type { FrameBlockModel } from '@blocksuite/affine-model';
|
||||
import { createButtonPopper } from '@blocksuite/affine-shared/utils';
|
||||
import { WithDisposable } from '@blocksuite/global/lit';
|
||||
import { LayerIcon } from '@blocksuite/icons/lit';
|
||||
import { css, html, LitElement } from 'lit';
|
||||
import { property, query } from 'lit/decorators.js';
|
||||
|
||||
import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
|
||||
import type { EdgelessFrameOrderMenu } from './frame-order-menu.js';
|
||||
|
||||
export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
|
||||
static override styles = css`
|
||||
edgeless-frame-order-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
edgeless-frame-order-menu[data-show] {
|
||||
display: initial;
|
||||
}
|
||||
`;
|
||||
|
||||
private _edgelessFrameOrderPopper: ReturnType<
|
||||
typeof createButtonPopper
|
||||
> | null = null;
|
||||
|
||||
override disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this._edgelessFrameOrderPopper?.dispose();
|
||||
}
|
||||
|
||||
override firstUpdated() {
|
||||
this._edgelessFrameOrderPopper = createButtonPopper({
|
||||
reference: this._edgelessFrameOrderButton,
|
||||
popperElement: this._edgelessFrameOrderMenu,
|
||||
stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
|
||||
mainAxis: 22,
|
||||
});
|
||||
}
|
||||
|
||||
protected override render() {
|
||||
const { readonly } = this.edgeless.doc;
|
||||
return html`
|
||||
<style>
|
||||
.edgeless-frame-order-button svg {
|
||||
color: ${readonly ? 'var(--affine-text-disable-color)' : 'inherit'};
|
||||
}
|
||||
</style>
|
||||
<edgeless-tool-icon-button
|
||||
class="edgeless-frame-order-button"
|
||||
.iconSize=${'24px'}
|
||||
.tooltip=${this.popperShow ? '' : 'Frame Order'}
|
||||
@click=${() => {
|
||||
if (readonly) return;
|
||||
this._edgelessFrameOrderPopper?.toggle();
|
||||
}}
|
||||
.iconContainerPadding=${0}
|
||||
>
|
||||
${LayerIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
<edgeless-frame-order-menu .edgeless=${this.edgeless}>
|
||||
</edgeless-frame-order-menu>
|
||||
`;
|
||||
}
|
||||
|
||||
@query('.edgeless-frame-order-button')
|
||||
private accessor _edgelessFrameOrderButton!: HTMLElement;
|
||||
|
||||
@query('edgeless-frame-order-menu')
|
||||
private accessor _edgelessFrameOrderMenu!: EdgelessFrameOrderMenu;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor edgeless!: EdgelessRootBlockComponent;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor frames!: FrameBlockModel[];
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor popperShow = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor setPopperShow: (show: boolean) => void = () => {};
|
||||
}
|
||||
-260
@@ -1,260 +0,0 @@
|
||||
import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
|
||||
import { generateKeyBetweenV2 } from '@blocksuite/block-std/gfx';
|
||||
import { DisposableGroup } from '@blocksuite/global/disposable';
|
||||
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
|
||||
import { css, html, LitElement, nothing } from 'lit';
|
||||
import { property, query, state } from 'lit/decorators.js';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
|
||||
|
||||
export class EdgelessFrameOrderMenu extends SignalWatcher(
|
||||
WithDisposable(LitElement)
|
||||
) {
|
||||
static override styles = css`
|
||||
:host {
|
||||
position: relative;
|
||||
}
|
||||
.edgeless-frame-order-items-container {
|
||||
max-height: 281px;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
background: var(--affine-background-overlay-panel-color);
|
||||
box-shadow: var(--affine-menu-shadow);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.edgeless-frame-order-items-container.embed {
|
||||
padding: 0;
|
||||
background: unset;
|
||||
box-shadow: unset;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
width: 256px;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.draggable:hover {
|
||||
background-color: var(--affine-hover-color);
|
||||
}
|
||||
|
||||
.item:hover .drag-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.drag-indicator {
|
||||
cursor: pointer;
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
border-radius: 1px;
|
||||
opacity: 0.2;
|
||||
background: var(--affine-placeholder-color);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
color: var(--affine-text-primary-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.clone {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 8px;
|
||||
height: 30px;
|
||||
border: 1px solid var(--affine-border-color);
|
||||
box-shadow: var(--affine-menu-shadow);
|
||||
background-color: var(--affine-white);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.indicator-line {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 8px;
|
||||
background-color: var(--affine-primary-color);
|
||||
height: 1px;
|
||||
width: 90%;
|
||||
}
|
||||
`;
|
||||
|
||||
get crud() {
|
||||
return this.edgeless.std.get(EdgelessCRUDIdentifier);
|
||||
}
|
||||
|
||||
private get _frames() {
|
||||
return this.edgeless.service.frames;
|
||||
}
|
||||
|
||||
private _bindEvent() {
|
||||
const { _disposables } = this;
|
||||
|
||||
_disposables.addFromEvent(this._container, 'wheel', e => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
_disposables.addFromEvent(this._container, 'pointerdown', e => {
|
||||
const ele = e.target as HTMLElement;
|
||||
const draggable = ele.closest('.draggable');
|
||||
if (!draggable) return;
|
||||
const clone = this._clone;
|
||||
const indicatorLine = this._indicatorLine;
|
||||
clone.style.visibility = 'visible';
|
||||
|
||||
const rect = draggable.getBoundingClientRect();
|
||||
|
||||
const index = Number(draggable.getAttribute('index'));
|
||||
this._curIndex = index;
|
||||
let newIndex = -1;
|
||||
|
||||
const containerRect = this._container.getBoundingClientRect();
|
||||
const start = containerRect.top + 8;
|
||||
const end = containerRect.bottom;
|
||||
|
||||
const shiftX = e.clientX - rect.left;
|
||||
const shiftY = e.clientY - rect.top;
|
||||
function moveAt(x: number, y: number) {
|
||||
clone.style.left = x - containerRect.left - shiftX + 'px';
|
||||
clone.style.top = y - containerRect.top - shiftY + 'px';
|
||||
}
|
||||
|
||||
function isInsideContainer(e: PointerEvent) {
|
||||
return e.clientY >= start && e.clientY <= end;
|
||||
}
|
||||
moveAt(e.clientX, e.clientY);
|
||||
|
||||
this._disposables.addFromEvent(document, 'pointermove', e => {
|
||||
indicatorLine.style.visibility = 'visible';
|
||||
moveAt(e.clientX, e.clientY);
|
||||
if (isInsideContainer(e)) {
|
||||
const relativeY = e.pageY + this._container.scrollTop - start;
|
||||
let top = 0;
|
||||
if (relativeY < rect.height / 2) {
|
||||
newIndex = 0;
|
||||
top = this.embed ? -2 : 4;
|
||||
} else {
|
||||
newIndex = Math.ceil(
|
||||
(relativeY - rect.height / 2) / (rect.height + 10)
|
||||
);
|
||||
top =
|
||||
(this.embed ? -2 : 7.5) +
|
||||
newIndex * rect.height +
|
||||
(newIndex - 0.5) * 4;
|
||||
}
|
||||
|
||||
indicatorLine.style.top = top - this._container.scrollTop + 'px';
|
||||
return;
|
||||
}
|
||||
newIndex = -1;
|
||||
});
|
||||
|
||||
this._disposables.addFromEvent(document, 'pointerup', () => {
|
||||
clone.style.visibility = 'hidden';
|
||||
indicatorLine.style.visibility = 'hidden';
|
||||
if (
|
||||
newIndex >= 0 &&
|
||||
newIndex <= this._frames.length &&
|
||||
newIndex !== index &&
|
||||
newIndex !== index + 1
|
||||
) {
|
||||
const frameMgr = this.edgeless.service.frame;
|
||||
// Legacy compatibility
|
||||
frameMgr.refreshLegacyFrameOrder();
|
||||
|
||||
const before =
|
||||
this._frames[newIndex - 1]?.props.presentationIndex || null;
|
||||
const after = this._frames[newIndex]?.props.presentationIndex || null;
|
||||
|
||||
const frame = this._frames[index];
|
||||
|
||||
this.crud.updateElement(frame.id, {
|
||||
presentationIndex: generateKeyBetweenV2(before, after),
|
||||
});
|
||||
this.edgeless.doc.captureSync();
|
||||
|
||||
this.requestUpdate();
|
||||
}
|
||||
this._disposables.dispose();
|
||||
this._disposables = new DisposableGroup();
|
||||
this._bindEvent();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
override disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this._disposables.dispose();
|
||||
}
|
||||
|
||||
override firstUpdated() {
|
||||
this._bindEvent();
|
||||
}
|
||||
|
||||
override render() {
|
||||
const frame = this._frames[this._curIndex];
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="edgeless-frame-order-items-container ${this.embed
|
||||
? 'embed'
|
||||
: ''}"
|
||||
@click=${(e: MouseEvent) => e.stopPropagation()}
|
||||
>
|
||||
${repeat(
|
||||
this._frames,
|
||||
frame => frame.id,
|
||||
(frame, index) => html`
|
||||
<div class="item draggable" id=${frame.id} index=${index}>
|
||||
<div class="drag-indicator"></div>
|
||||
<div class="title">${frame.props.title.toString()}</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
<div class="indicator-line"></div>
|
||||
<div class="clone item">
|
||||
${frame
|
||||
? html`<div class="drag-indicator"></div>
|
||||
<div class="index">${this._curIndex + 1}</div>
|
||||
<div class="title">${frame.props.title.toString()}</div>`
|
||||
: nothing}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@query('.clone')
|
||||
private accessor _clone!: HTMLDivElement;
|
||||
|
||||
@query('.edgeless-frame-order-items-container')
|
||||
private accessor _container!: HTMLDivElement;
|
||||
|
||||
@state()
|
||||
private accessor _curIndex = -1;
|
||||
|
||||
@query('.indicator-line')
|
||||
private accessor _indicatorLine!: HTMLDivElement;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor edgeless!: EdgelessRootBlockComponent;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor embed = false;
|
||||
}
|
||||
-195
@@ -1,195 +0,0 @@
|
||||
import { EditPropsStore } from '@blocksuite/affine-shared/services';
|
||||
import { createButtonPopper } from '@blocksuite/affine-shared/utils';
|
||||
import { WithDisposable } from '@blocksuite/global/lit';
|
||||
import { SettingsIcon } from '@blocksuite/icons/lit';
|
||||
import { css, html, LitElement, nothing } from 'lit';
|
||||
import { property, query, state } from 'lit/decorators.js';
|
||||
|
||||
import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
|
||||
|
||||
export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
|
||||
static override styles = css`
|
||||
.navigator-setting-menu {
|
||||
display: none;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background-color: var(--affine-background-overlay-panel-color);
|
||||
box-shadow: var(--affine-menu-shadow);
|
||||
color: var(--affine-text-primary-color);
|
||||
}
|
||||
|
||||
.navigator-setting-menu[data-show] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
padding: 4px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 264px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item-container.header {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 0px 4px;
|
||||
line-height: 22px;
|
||||
font-size: var(--affine-font-sm);
|
||||
color: var(--affine-text-primary-color);
|
||||
}
|
||||
|
||||
.text.title {
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
font-size: var(--affine-font-xs);
|
||||
color: var(--affine-text-secondary-color);
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.divider::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--affine-border-color);
|
||||
}
|
||||
`;
|
||||
|
||||
private _navigatorSettingPopper?: ReturnType<
|
||||
typeof createButtonPopper
|
||||
> | null = null;
|
||||
|
||||
private readonly _onBlackBackgroundChange = (checked: boolean) => {
|
||||
this.blackBackground = checked;
|
||||
this.edgeless.slots.navigatorSettingUpdated.next({
|
||||
blackBackground: this.blackBackground,
|
||||
});
|
||||
};
|
||||
|
||||
private _tryRestoreSettings() {
|
||||
const blackBackground = this.edgeless.std
|
||||
.get(EditPropsStore)
|
||||
.getStorage('presentBlackBackground');
|
||||
this.blackBackground = blackBackground ?? true;
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._tryRestoreSettings();
|
||||
}
|
||||
|
||||
override disconnectedCallback(): void {
|
||||
this._navigatorSettingPopper?.dispose();
|
||||
this._navigatorSettingPopper = null;
|
||||
}
|
||||
|
||||
override firstUpdated() {
|
||||
this._navigatorSettingPopper = createButtonPopper({
|
||||
reference: this._navigatorSettingButton,
|
||||
popperElement: this._navigatorSettingMenu,
|
||||
stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
|
||||
mainAxis: 22,
|
||||
});
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<edgeless-tool-icon-button
|
||||
class="navigator-setting-button"
|
||||
.tooltip=${this.popperShow ? '' : 'Settings'}
|
||||
.iconSize=${'24px'}
|
||||
@click=${() => {
|
||||
this._navigatorSettingPopper?.toggle();
|
||||
}}
|
||||
.iconContainerPadding=${0}
|
||||
>
|
||||
${SettingsIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
|
||||
<div
|
||||
class="navigator-setting-menu"
|
||||
@click=${(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div class="item-container header">
|
||||
<div class="text title">Playback Settings</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="text">Black background</div>
|
||||
|
||||
<toggle-switch
|
||||
.subscribe=${this.blackBackground}
|
||||
.onChange=${this._onBlackBackgroundChange}
|
||||
>
|
||||
</toggle-switch>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="text">Hide toolbar</div>
|
||||
|
||||
<toggle-switch
|
||||
.subscribe=${this.hideToolbar}
|
||||
.onChange=${(checked: boolean) => {
|
||||
this.onHideToolbarChange && this.onHideToolbarChange(checked);
|
||||
}}
|
||||
>
|
||||
</toggle-switch>
|
||||
</div>
|
||||
|
||||
${this.includeFrameOrder
|
||||
? html` <div class="divider"></div>
|
||||
<div class="item-container header">
|
||||
<div class="text title">Frame Order</div>
|
||||
</div>
|
||||
|
||||
<edgeless-frame-order-menu
|
||||
.edgeless=${this.edgeless}
|
||||
.embed=${true}
|
||||
></edgeless-frame-order-menu>`
|
||||
: nothing}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@query('.navigator-setting-button')
|
||||
private accessor _navigatorSettingButton!: HTMLElement;
|
||||
|
||||
@query('.navigator-setting-menu')
|
||||
private accessor _navigatorSettingMenu!: HTMLElement;
|
||||
|
||||
@state()
|
||||
accessor blackBackground = true;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor edgeless!: EdgelessRootBlockComponent;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor hideToolbar = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor includeFrameOrder = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor onHideToolbarChange: undefined | ((hideToolbar: boolean) => void) =
|
||||
undefined;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor popperShow = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor setPopperShow: (show: boolean) => void = () => {};
|
||||
}
|
||||
-41
@@ -1,41 +0,0 @@
|
||||
import {
|
||||
EdgelessToolbarToolMixin,
|
||||
QuickToolMixin,
|
||||
} from '@blocksuite/affine-widget-edgeless-toolbar';
|
||||
import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
|
||||
import { PresentationIcon } from '@blocksuite/icons/lit';
|
||||
import { css, html, LitElement } from 'lit';
|
||||
|
||||
export class EdgelessPresentButton extends QuickToolMixin(
|
||||
EdgelessToolbarToolMixin(LitElement)
|
||||
) {
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
.edgeless-note-button {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
`;
|
||||
|
||||
override type: GfxToolsFullOptionValue['type'] = 'frameNavigator';
|
||||
|
||||
override render() {
|
||||
return html`<edgeless-tool-icon-button
|
||||
class="edgeless-frame-navigator-button"
|
||||
.tooltip=${'Present'}
|
||||
.tooltipOffset=${17}
|
||||
.iconContainerPadding=${6}
|
||||
.iconSize=${'24px'}
|
||||
@click=${() => {
|
||||
this.setEdgelessTool({
|
||||
type: 'frameNavigator',
|
||||
});
|
||||
}}
|
||||
>
|
||||
${PresentationIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
-461
@@ -1,461 +0,0 @@
|
||||
import {
|
||||
EdgelessFrameManagerIdentifier,
|
||||
isFrameBlock,
|
||||
type NavigatorMode,
|
||||
} from '@blocksuite/affine-block-frame';
|
||||
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
|
||||
import { toast } from '@blocksuite/affine-components/toast';
|
||||
import type { FrameBlockModel } from '@blocksuite/affine-model';
|
||||
import {
|
||||
EditPropsStore,
|
||||
ViewportElementProvider,
|
||||
} from '@blocksuite/affine-shared/services';
|
||||
import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
|
||||
import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
|
||||
import { Bound, clamp } from '@blocksuite/global/gfx';
|
||||
import { SignalWatcher } from '@blocksuite/global/lit';
|
||||
import {
|
||||
EndPointArrowIcon,
|
||||
ExpandCloseIcon,
|
||||
ExpandFullIcon,
|
||||
StartPointArrowIcon,
|
||||
StopAiIcon,
|
||||
} from '@blocksuite/icons/lit';
|
||||
import { effect } from '@preact/signals-core';
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
|
||||
import { property, state } from 'lit/decorators.js';
|
||||
|
||||
import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
|
||||
import { launchIntoFullscreen } from '../utils.js';
|
||||
|
||||
export class PresentationToolbar extends EdgelessToolbarToolMixin(
|
||||
SignalWatcher(LitElement)
|
||||
) {
|
||||
static override styles = css`
|
||||
:host {
|
||||
align-items: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 8px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.full-divider {
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.full-divider::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: var(--affine-border-color);
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
.config-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.edgeless-frame-navigator {
|
||||
width: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.edgeless-frame-navigator.dense {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.edgeless-frame-navigator-title {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.edgeless-frame-navigator-count {
|
||||
color: var(--affine-text-secondary-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.edgeless-frame-navigator-stop {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.edgeless-frame-navigator-stop::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.edgeless-frame-navigator-stop:hover::before {
|
||||
background: var(--affine-hover-color);
|
||||
}
|
||||
`;
|
||||
|
||||
private _cachedIndex = -1;
|
||||
|
||||
private _timer?: ReturnType<typeof setTimeout>;
|
||||
|
||||
override type: GfxToolsFullOptionValue['type'] = 'frameNavigator';
|
||||
|
||||
private get _cachedPresentHideToolbar() {
|
||||
return !!this.edgeless.std
|
||||
.get(EditPropsStore)
|
||||
.getStorage('presentHideToolbar');
|
||||
}
|
||||
|
||||
private set _cachedPresentHideToolbar(value) {
|
||||
this.edgeless.std
|
||||
.get(EditPropsStore)
|
||||
.setStorage('presentHideToolbar', !!value);
|
||||
}
|
||||
|
||||
private get _frames(): FrameBlockModel[] {
|
||||
return this.edgeless.std.get(EdgelessFrameManagerIdentifier).frames;
|
||||
}
|
||||
|
||||
get dense() {
|
||||
return this.containerWidth < 554;
|
||||
}
|
||||
|
||||
get host() {
|
||||
return this.edgeless.host;
|
||||
}
|
||||
|
||||
get slots() {
|
||||
return this.edgeless.std.get(EdgelessLegacySlotIdentifier);
|
||||
}
|
||||
|
||||
constructor(edgeless: EdgelessRootBlockComponent) {
|
||||
super();
|
||||
this.edgeless = edgeless;
|
||||
}
|
||||
|
||||
private _bindHotKey() {
|
||||
const handleKeyIfFrameNavigator = (action: () => void) => () => {
|
||||
if (this.edgelessTool.type === 'frameNavigator') {
|
||||
action();
|
||||
}
|
||||
};
|
||||
|
||||
this.edgeless.bindHotKey(
|
||||
{
|
||||
ArrowLeft: handleKeyIfFrameNavigator(() => this._previousFrame()),
|
||||
ArrowRight: handleKeyIfFrameNavigator(() => this._nextFrame()),
|
||||
Escape: handleKeyIfFrameNavigator(() => this._exitPresentation()),
|
||||
},
|
||||
{
|
||||
global: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private _exitPresentation() {
|
||||
// When exit presentation mode, we need to set the tool to default or pan
|
||||
// And exit fullscreen
|
||||
this.setEdgelessTool(
|
||||
this.edgeless.doc.readonly
|
||||
? { type: 'pan', panning: false }
|
||||
: { type: 'default' }
|
||||
);
|
||||
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen().catch(console.error);
|
||||
}
|
||||
}
|
||||
|
||||
private _moveToCurrentFrame() {
|
||||
const current = this._currentFrameIndex;
|
||||
const viewport = this.gfx.viewport;
|
||||
const frame = this._frames[current];
|
||||
|
||||
if (frame) {
|
||||
let bound = Bound.deserialize(frame.xywh);
|
||||
|
||||
if (this._navigatorMode === 'fill') {
|
||||
const vb = viewport.viewportBounds;
|
||||
const center = bound.center;
|
||||
let w, h;
|
||||
if (vb.w / vb.h > bound.w / bound.h) {
|
||||
w = bound.w;
|
||||
h = (w * vb.h) / vb.w;
|
||||
} else {
|
||||
h = bound.h;
|
||||
w = (h * vb.w) / vb.h;
|
||||
}
|
||||
bound = Bound.fromCenter(center, w, h);
|
||||
}
|
||||
|
||||
viewport.setViewportByBound(bound, [0, 0, 0, 0], false);
|
||||
this.slots.navigatorFrameChanged.next(
|
||||
this._frames[this._currentFrameIndex]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private _nextFrame() {
|
||||
const frames = this._frames;
|
||||
const min = 0;
|
||||
const max = frames.length - 1;
|
||||
if (this._currentFrameIndex === frames.length - 1) {
|
||||
toast(this.host, 'You have reached the last frame');
|
||||
} else {
|
||||
this._currentFrameIndex = clamp(this._currentFrameIndex + 1, min, max);
|
||||
}
|
||||
}
|
||||
|
||||
private _previousFrame() {
|
||||
const frames = this._frames;
|
||||
const min = 0;
|
||||
const max = frames.length - 1;
|
||||
if (this._currentFrameIndex === 0) {
|
||||
toast(this.host, 'You have reached the first frame');
|
||||
} else {
|
||||
this._currentFrameIndex = clamp(this._currentFrameIndex - 1, min, max);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle fullscreen, but keep edgeless tool to frameNavigator
|
||||
* If already fullscreen, exit fullscreen
|
||||
* If not fullscreen, enter fullscreen
|
||||
*/
|
||||
private _toggleFullScreen() {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen().catch(console.error);
|
||||
this._fullScreenMode = false;
|
||||
} else {
|
||||
const { viewportElement } = this.edgeless.std.get(
|
||||
ViewportElementProvider
|
||||
);
|
||||
launchIntoFullscreen(viewportElement);
|
||||
this._fullScreenMode = true;
|
||||
}
|
||||
}
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
|
||||
const { _disposables } = this;
|
||||
|
||||
_disposables.add(
|
||||
effect(() => {
|
||||
const currentTool = this.gfx.tool.currentToolOption$.value;
|
||||
const selection = this.gfx.selection;
|
||||
|
||||
if (currentTool?.type === 'frameNavigator') {
|
||||
this._cachedIndex = this._currentFrameIndex;
|
||||
this._navigatorMode = currentTool.mode ?? this._navigatorMode;
|
||||
if (isFrameBlock(selection.selectedElements[0])) {
|
||||
this._cachedIndex = this._frames.findIndex(
|
||||
frame => frame.id === selection.selectedElements[0].id
|
||||
);
|
||||
}
|
||||
if (this._frames.length === 0)
|
||||
toast(
|
||||
this.host,
|
||||
'The presentation requires at least 1 frame. You can firstly create a frame.',
|
||||
5000
|
||||
);
|
||||
this._toggleFullScreen();
|
||||
}
|
||||
|
||||
this.requestUpdate();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
override firstUpdated() {
|
||||
const { _disposables } = this;
|
||||
|
||||
this._bindHotKey();
|
||||
|
||||
_disposables.add(
|
||||
this.slots.navigatorSettingUpdated.subscribe(({ fillScreen }) => {
|
||||
if (fillScreen !== undefined) {
|
||||
this._navigatorMode = fillScreen ? 'fill' : 'fit';
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
_disposables.addFromEvent(document, 'fullscreenchange', () => {
|
||||
if (document.fullscreenElement) {
|
||||
// When enter fullscreen, we need to set current frame to the cached index
|
||||
this._timer = setTimeout(() => {
|
||||
this._currentFrameIndex = this._cachedIndex;
|
||||
}, 400);
|
||||
} else {
|
||||
// When exit fullscreen, we need to clear the timer
|
||||
clearTimeout(this._timer);
|
||||
if (
|
||||
this.edgelessTool.type === 'frameNavigator' &&
|
||||
this._fullScreenMode
|
||||
) {
|
||||
this.setEdgelessTool(
|
||||
this.edgeless.doc.readonly
|
||||
? { type: 'pan', panning: false }
|
||||
: { type: 'default' }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => this._moveToCurrentFrame(), 400);
|
||||
this.slots.fullScreenToggled.next();
|
||||
});
|
||||
|
||||
this._navigatorMode =
|
||||
this.edgeless.std.get(EditPropsStore).getStorage('presentFillScreen') ===
|
||||
true
|
||||
? 'fill'
|
||||
: 'fit';
|
||||
}
|
||||
|
||||
override render() {
|
||||
const current = this._currentFrameIndex;
|
||||
const frames = this._frames;
|
||||
const frame = frames[current];
|
||||
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<edgeless-tool-icon-button
|
||||
.iconContainerPadding=${0}
|
||||
.tooltip=${'Previous'}
|
||||
.iconSize=${'24px'}
|
||||
@click=${() => this._previousFrame()}
|
||||
>
|
||||
${StartPointArrowIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
|
||||
<div class="edgeless-frame-navigator ${this.dense ? 'dense' : ''}">
|
||||
${this.dense
|
||||
? nothing
|
||||
: html`<span
|
||||
style="color: ${cssVar('textPrimaryColor')}"
|
||||
class="edgeless-frame-navigator-title"
|
||||
@click=${() => this._moveToCurrentFrame()}
|
||||
>
|
||||
${frame?.props.title ?? 'no frame'}
|
||||
</span>`}
|
||||
|
||||
<span class="edgeless-frame-navigator-count">
|
||||
${frames.length === 0 ? 0 : current + 1} / ${frames.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<edgeless-tool-icon-button
|
||||
.tooltip=${'Next'}
|
||||
@click=${() => this._nextFrame()}
|
||||
.iconContainerPadding=${0}
|
||||
.iconSize=${'24px'}
|
||||
>
|
||||
${EndPointArrowIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<div class="config-buttons">
|
||||
<edgeless-tool-icon-button
|
||||
.tooltip=${document.fullscreenElement
|
||||
? 'Exit Full Screen'
|
||||
: 'Enter Full Screen'}
|
||||
@click=${() => this._toggleFullScreen()}
|
||||
.iconContainerPadding=${0}
|
||||
.iconContainerWidth=${'24px'}
|
||||
.iconSize=${'24px'}
|
||||
>
|
||||
${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
|
||||
${this.dense
|
||||
? nothing
|
||||
: html`<edgeless-frame-order-button
|
||||
.popperShow=${this.frameMenuShow}
|
||||
.setPopperShow=${this.setFrameMenuShow}
|
||||
.edgeless=${this.edgeless}
|
||||
>
|
||||
</edgeless-frame-order-button>`}
|
||||
|
||||
<edgeless-navigator-setting-button
|
||||
.edgeless=${this.edgeless}
|
||||
.hideToolbar=${this._cachedPresentHideToolbar}
|
||||
.onHideToolbarChange=${(hideToolbar: boolean) => {
|
||||
this._cachedPresentHideToolbar = hideToolbar;
|
||||
}}
|
||||
.popperShow=${this.settingMenuShow}
|
||||
.setPopperShow=${this.setSettingMenuShow}
|
||||
.includeFrameOrder=${this.dense}
|
||||
>
|
||||
</edgeless-navigator-setting-button>
|
||||
</div>
|
||||
|
||||
<div class="full-divider"></div>
|
||||
|
||||
<button
|
||||
class="edgeless-frame-navigator-stop"
|
||||
@click=${this._exitPresentation}
|
||||
style="background: ${cssVar('warningColor')}"
|
||||
>
|
||||
${StopAiIcon()}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
protected override updated(changedProperties: PropertyValues) {
|
||||
if (
|
||||
changedProperties.has('_currentFrameIndex') &&
|
||||
this.edgelessTool.type === 'frameNavigator'
|
||||
) {
|
||||
this._moveToCurrentFrame();
|
||||
}
|
||||
}
|
||||
|
||||
@state({
|
||||
hasChanged() {
|
||||
return true;
|
||||
},
|
||||
})
|
||||
private accessor _currentFrameIndex = 0;
|
||||
|
||||
private accessor _fullScreenMode = true;
|
||||
|
||||
@state()
|
||||
private accessor _navigatorMode: NavigatorMode = 'fit';
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor containerWidth = 1920;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor frameMenuShow = false;
|
||||
|
||||
@property()
|
||||
accessor setFrameMenuShow: (show: boolean) => void = () => {};
|
||||
|
||||
@property()
|
||||
accessor setSettingMenuShow: (show: boolean) => void = () => {};
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor settingMenuShow = false;
|
||||
}
|
||||
@@ -141,27 +141,3 @@ export function getResizeLabel(target: HTMLElement) {
|
||||
const ariaLabel = handle?.getAttribute('aria-label');
|
||||
return ariaLabel;
|
||||
}
|
||||
|
||||
export function launchIntoFullscreen(element: Element) {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen().catch(console.error);
|
||||
} else if (
|
||||
'mozRequestFullScreen' in element &&
|
||||
element.mozRequestFullScreen instanceof Function
|
||||
) {
|
||||
// Firefox
|
||||
element.mozRequestFullScreen();
|
||||
} else if (
|
||||
'webkitRequestFullscreen' in element &&
|
||||
element.webkitRequestFullscreen instanceof Function
|
||||
) {
|
||||
// Chrome, Safari and Opera
|
||||
element.webkitRequestFullscreen();
|
||||
} else if (
|
||||
'msRequestFullscreen' in element &&
|
||||
element.msRequestFullscreen instanceof Function
|
||||
) {
|
||||
// IE/Edge
|
||||
element.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,11 +42,6 @@ import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-
|
||||
import { MindMapPlaceholder } from './edgeless/components/toolbar/mindmap/mindmap-importing-placeholder.js';
|
||||
import { EdgelessMindmapMenu } from './edgeless/components/toolbar/mindmap/mindmap-menu.js';
|
||||
import { EdgelessMindmapToolButton } from './edgeless/components/toolbar/mindmap/mindmap-tool-button.js';
|
||||
import { EdgelessFrameOrderButton } from './edgeless/components/toolbar/present/frame-order-button.js';
|
||||
import { EdgelessFrameOrderMenu } from './edgeless/components/toolbar/present/frame-order-menu.js';
|
||||
import { EdgelessNavigatorSettingButton } from './edgeless/components/toolbar/present/navigator-setting-button.js';
|
||||
import { EdgelessPresentButton } from './edgeless/components/toolbar/present/present-button.js';
|
||||
import { PresentationToolbar } from './edgeless/components/toolbar/presentation-toolbar.js';
|
||||
import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
|
||||
import { AffineTemplateLoading } from './edgeless/components/toolbar/template/template-loading.js';
|
||||
import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/template-panel.js';
|
||||
@@ -170,18 +165,6 @@ function registerEdgelessToolbarComponents() {
|
||||
|
||||
// Toolbar components
|
||||
customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon);
|
||||
|
||||
// Frame order components
|
||||
customElements.define(
|
||||
'edgeless-frame-order-button',
|
||||
EdgelessFrameOrderButton
|
||||
);
|
||||
customElements.define('edgeless-frame-order-menu', EdgelessFrameOrderMenu);
|
||||
customElements.define(
|
||||
'edgeless-navigator-setting-button',
|
||||
EdgelessNavigatorSettingButton
|
||||
);
|
||||
customElements.define('edgeless-present-button', EdgelessPresentButton);
|
||||
}
|
||||
|
||||
function registerEdgelessPanelComponents() {
|
||||
@@ -220,7 +203,6 @@ function registerMiscComponents() {
|
||||
|
||||
// Toolbar and UI components
|
||||
customElements.define('affine-image-toolbar', AffineImageToolbar);
|
||||
customElements.define('presentation-toolbar', PresentationToolbar);
|
||||
customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
|
||||
customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);
|
||||
customElements.define('overlay-scrollbar', OverlayScrollbar);
|
||||
@@ -281,7 +263,6 @@ declare global {
|
||||
'edgeless-selected-rect': EdgelessSelectedRectWidget;
|
||||
'edgeless-connector-label-editor': EdgelessConnectorLabelEditor;
|
||||
'edgeless-group-title-editor': EdgelessGroupTitleEditor;
|
||||
'presentation-toolbar': PresentationToolbar;
|
||||
'edgeless-brush-menu': EdgelessBrushMenu;
|
||||
'edgeless-brush-tool-button': EdgelessBrushToolButton;
|
||||
'edgeless-slide-menu': EdgelessSlideMenu;
|
||||
@@ -295,9 +276,6 @@ declare global {
|
||||
'mindmap-import-placeholder': MindMapPlaceholder;
|
||||
'edgeless-mindmap-menu': EdgelessMindmapMenu;
|
||||
'edgeless-mindmap-tool-button': EdgelessMindmapToolButton;
|
||||
'edgeless-frame-order-menu': EdgelessFrameOrderMenu;
|
||||
'edgeless-navigator-setting-button': EdgelessNavigatorSettingButton;
|
||||
'edgeless-present-button': EdgelessPresentButton;
|
||||
'overlay-scrollbar': OverlayScrollbar;
|
||||
'affine-template-loading': AffineTemplateLoading;
|
||||
'edgeless-templates-panel': EdgelessTemplatePanel;
|
||||
|
||||
Reference in New Issue
Block a user