Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-17 06:16:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): remove gfx tool global type (#12116)

Browse Source 
Closes: BS-2650
This commit is contained in:
Saul-Mirone
2025-05-04 13:53:26 +00:00
parent f3b5c36cf7
commit 30a2e5b4fb
95 changed files with 664 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
blocksuite/affine/widgets/drag-handle/src/watchers/edgeless-watcher.ts
View File

@@ -3,7 +3,7 @@ import { getSelectedRect } from '@blocksuite/affine-shared/utils';
import { type IVec, Rect } from '@blocksuite/global/gfx';
import {
GfxControllerIdentifier,
type GfxToolsFullOptionValue,
type ToolOptionWithType,
} from '@blocksuite/std/gfx';
import { effect } from '@preact/signals-core';
@@ -22,10 +22,9 @@ import type { AffineDragHandleWidget } from '../drag-handle.js';
*/
export class EdgelessWatcher {
private readonly _handleEdgelessToolUpdated = (
newTool: GfxToolsFullOptionValue
newTool: ToolOptionWithType
) => {
// @ts-expect-error GfxToolsFullOptionValue is extended in other packages
if (newTool.type === 'default') {
if (newTool.toolType?.toolName === 'default') {
this.updateAnchorElement();
} else {
this.widget.hide();

21
blocksuite/affine/widgets/edgeless-toolbar/src/edgeless-toolbar.ts
View File

@@ -1,5 +1,8 @@
/* oxlint-disable @typescript-eslint/no-non-null-assertion */
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import {
DefaultTool,
EdgelessLegacySlotIdentifier,
} from '@blocksuite/affine-block-surface';
import {
type MenuHandler,
popMenu,
@@ -430,8 +433,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
}
get edgelessTool() {
// FIXME: maybe we need to fix this type
return this.gfx.tool.currentToolOption$.value as { type: string };
return this.gfx.tool.currentToolName$.value;
}
get gfx() {
@@ -439,7 +441,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
}
get isPresentMode() {
return this.edgelessTool.type === 'frameNavigator';
return this.edgelessTool === 'frameNavigator';
}
get scrollSeniorToolSize() {
@@ -523,7 +525,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
@click=${this._openMoreQuickToolsMenu}
?active=${this._quickTools
.slice(this._visibleQuickToolSize)
.some(tool => tool.type === this.edgelessTool?.type)}
.some(tool => tool.type === this.edgelessTool)}
>
${MoreHorizontalIcon({ width: '20px', height: '20px' })}
<affine-tooltip tip-position="top" .offset=${25}>
@@ -602,16 +604,15 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
{
Escape: () => {
if (this.gfx.selection.editing) return;
if (this.edgelessTool.type === 'frameNavigator') return;
if (this.edgelessTool.type === 'default') {
if (this.edgelessTool === 'frameNavigator') return;
if (this.edgelessTool === 'default') {
if (this.activePopper) {
this.activePopper.dispose();
this.activePopper = null;
}
return;
}
// @ts-expect-error FIXME: resolve after gfx tool refactor
this.gfx.tool.setTool('default');
this.gfx.tool.setTool(DefaultTool);
},
},
{ global: true }
@@ -658,7 +659,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
}
override render() {
const { type } = this.edgelessTool || {};
const type = this.edgelessTool;
if (this.doc.readonly && type !== 'frameNavigator') {
return nothing;
}

4
blocksuite/affine/widgets/edgeless-toolbar/src/extension/index.ts
View File

@@ -1,12 +1,12 @@
import type { MenuConfig } from '@blocksuite/affine-components/context-menu';
import { createIdentifier } from '@blocksuite/global/di';
import type { BlockComponent } from '@blocksuite/std';
import type { GfxController, GfxToolsMap } from '@blocksuite/std/gfx';
import type { GfxController } from '@blocksuite/std/gfx';
import type { ExtensionType } from '@blocksuite/store';
import { type TemplateResult } from 'lit';
export interface QuickTool {
type?: keyof GfxToolsMap;
type?: string;
enable?: boolean;
content: TemplateResult;
/**

31
blocksuite/affine/widgets/edgeless-toolbar/src/mixins/tool.mixin.ts
View File

@@ -9,9 +9,9 @@ import type { BlockComponent } from '@blocksuite/std';
import {
type GfxController,
GfxControllerIdentifier,
type GfxToolsFullOption,
type GfxToolsFullOptionValue,
type ToolController,
type ToolOptionWithType,
type ToolType,
} from '@blocksuite/std/gfx';
import { consume } from '@lit/context';
import { effect } from '@preact/signals-core';
@@ -28,8 +28,6 @@ import {
import { createPopper, type MenuPopper } from '../create-popper';
import type { EdgelessToolbarWidget } from '../edgeless-toolbar';
type ValueOf<T> = T[keyof T];
export declare abstract class EdgelessToolbarToolClass extends DisposableClass {
active: boolean;
@@ -37,7 +35,7 @@ export declare abstract class EdgelessToolbarToolClass extends DisposableClass {
edgeless: BlockComponent;
edgelessTool: GfxToolsFullOptionValue;
edgelessTool: ToolOptionWithType;
enableActiveBackground?: boolean;
@@ -58,9 +56,7 @@ export declare abstract class EdgelessToolbarToolClass extends DisposableClass {
*/
tryDisposePopper: () => boolean;
abstract type:
| GfxToolsFullOptionValue['type']
| GfxToolsFullOptionValue['type'][];
abstract type: ToolType | ToolType[];
accessor toolbar: EdgelessToolbarWidget;
}
@@ -71,19 +67,15 @@ export const EdgelessToolbarToolMixin = <T extends Constructor<LitElement>>(
abstract class DerivedClass extends WithDisposable(SuperClass) {
enableActiveBackground = false;
abstract type:
| GfxToolsFullOptionValue['type']
| GfxToolsFullOptionValue['type'][];
abstract type: ToolType | ToolType[];
get active() {
const { type } = this;
// @ts-expect-error FIXME: we need to fix the type of edgelessTool
const activeType = this.edgelessTool?.type;
const activeType = this.edgelessTool?.toolType;
return activeType
? Array.isArray(type)
? // @ts-expect-error FIXME: we need to fix the type of edgelessTool
type.includes(activeType)
? type.includes(activeType)
: activeType === type
: false;
}
@@ -93,12 +85,7 @@ export const EdgelessToolbarToolMixin = <T extends Constructor<LitElement>>(
}
get setEdgelessTool() {
return (...args: Parameters<ToolController['setTool']>) => {
this.gfx.tool.setTool(
// @ts-expect-error FIXME: ts error
...args
);
};
return this.gfx.tool.setTool;
}
private _applyActiveStyle() {
@@ -162,7 +149,7 @@ export const EdgelessToolbarToolMixin = <T extends Constructor<LitElement>>(
accessor edgeless!: BlockComponent;
@state()
accessor edgelessTool!: ValueOf<GfxToolsFullOption> | null;
accessor edgelessTool!: ToolOptionWithType | null;
@state()
public accessor popper: MenuPopper<HTMLElement> | null = null;

1
blocksuite/affine/widgets/frame-title/package.json
View File

@@ -10,6 +10,7 @@
"author": "toeverything",
"license": "MIT",
"dependencies": {
"@blocksuite/affine-block-surface": "workspace:*",
"@blocksuite/affine-components": "workspace:*",
"@blocksuite/affine-ext-loader": "workspace:*",
"@blocksuite/affine-model": "workspace:*",

4
blocksuite/affine/widgets/frame-title/src/mount-frame-title-editor.ts
View File

@@ -1,3 +1,4 @@
import { DefaultTool } from '@blocksuite/affine-block-surface';
import type { FrameBlockModel } from '@blocksuite/affine-model';
import { BlockSuiteError } from '@blocksuite/global/exceptions';
import type { BlockComponent } from '@blocksuite/std';
@@ -19,8 +20,7 @@ export function mountFrameTitleEditor(
const gfx = edgeless.std.get(GfxControllerIdentifier);
// @ts-expect-error TODO: refactor gfx tool
gfx.tool.setTool('default');
gfx.tool.setTool(DefaultTool);
gfx.selection.set({
elements: [frame.id],
editing: true,

1
blocksuite/affine/widgets/frame-title/tsconfig.json
View File

@@ -7,6 +7,7 @@
},
"include": ["./src"],
"references": [
{ "path": "../../blocks/surface" },
{ "path": "../../components" },
{ "path": "../../ext-loader" },
{ "path": "../../model" },

43
blocksuite/affine/widgets/keyboard-toolbar/src/config.ts
View File

@@ -16,7 +16,7 @@ import {
dedentParagraphCommand,
indentParagraphCommand,
} from '@blocksuite/affine-block-paragraph';
import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
import { DefaultTool, getSurfaceBlock } from '@blocksuite/affine-block-surface';
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
import { toast } from '@blocksuite/affine-components/toast';
@@ -101,6 +101,7 @@ import {
type BlockStdScope,
ConfigExtensionFactory,
} from '@blocksuite/std';
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
import { computed } from '@preact/signals-core';
import { cssVarV2 } from '@toeverything/theme/v2';
import type { TemplateResult } from 'lit';
@@ -393,7 +394,13 @@ const contentMediaToolGroup: KeyboardToolPanelGroup = {
std.host,
'Links',
'The added link will be displayed as a card view.',
{ mode: 'page', parentModel, index }
{ mode: 'page', parentModel, index },
({ mode }) => {
if (mode === 'edgeless') {
const gfx = std.get(GfxControllerIdentifier);
gfx.tool.setTool(DefaultTool);
}
}
);
if (model.text?.length === 0) {
std.store.deleteBlock(model);
@@ -486,7 +493,13 @@ const embedToolGroup: KeyboardToolPanelGroup = {
std.host,
'YouTube',
'The added YouTube video link will be displayed as an embed view.',
{ mode: 'page', parentModel, index }
{ mode: 'page', parentModel, index },
({ mode }) => {
if (mode === 'edgeless') {
const gfx = std.get(GfxControllerIdentifier);
gfx.tool.setTool(DefaultTool);
}
}
);
if (model.text?.length === 0) {
std.store.deleteBlock(model);
@@ -513,7 +526,13 @@ const embedToolGroup: KeyboardToolPanelGroup = {
std.host,
'GitHub',
'The added GitHub issue or pull request link will be displayed as a card view.',
{ mode: 'page', parentModel, index }
{ mode: 'page', parentModel, index },
({ mode }) => {
if (mode === 'edgeless') {
const gfx = std.get(GfxControllerIdentifier);
gfx.tool.setTool(DefaultTool);
}
}
);
if (model.text?.length === 0) {
std.store.deleteBlock(model);
@@ -541,7 +560,13 @@ const embedToolGroup: KeyboardToolPanelGroup = {
std.host,
'Figma',
'The added Figma link will be displayed as an embed view.',
{ mode: 'page', parentModel, index }
{ mode: 'page', parentModel, index },
({ mode }) => {
if (mode === 'edgeless') {
const gfx = std.get(GfxControllerIdentifier);
gfx.tool.setTool(DefaultTool);
}
}
);
if (model.text?.length === 0) {
std.store.deleteBlock(model);
@@ -568,7 +593,13 @@ const embedToolGroup: KeyboardToolPanelGroup = {
std.host,
'Loom',
'The added Loom video link will be displayed as an embed view.',
{ mode: 'page', parentModel, index }
{ mode: 'page', parentModel, index },
({ mode }) => {
if (mode === 'edgeless') {
const gfx = std.get(GfxControllerIdentifier);
gfx.tool.setTool(DefaultTool);
}
}
);
if (model.text?.length === 0) {
std.store.deleteBlock(model);