mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-25 18:26:05 +08:00
feat(editor): brush gfx package (#11131)
This commit is contained in:
@@ -33,6 +33,7 @@
|
|||||||
"@blocksuite/affine-fragment-doc-title": "workspace:*",
|
"@blocksuite/affine-fragment-doc-title": "workspace:*",
|
||||||
"@blocksuite/affine-fragment-frame-panel": "workspace:*",
|
"@blocksuite/affine-fragment-frame-panel": "workspace:*",
|
||||||
"@blocksuite/affine-fragment-outline": "workspace:*",
|
"@blocksuite/affine-fragment-outline": "workspace:*",
|
||||||
|
"@blocksuite/affine-gfx-brush": "workspace:*",
|
||||||
"@blocksuite/affine-gfx-connector": "workspace:*",
|
"@blocksuite/affine-gfx-connector": "workspace:*",
|
||||||
"@blocksuite/affine-gfx-group": "workspace:*",
|
"@blocksuite/affine-gfx-group": "workspace:*",
|
||||||
"@blocksuite/affine-gfx-mindmap": "workspace:*",
|
"@blocksuite/affine-gfx-mindmap": "workspace:*",
|
||||||
@@ -121,6 +122,7 @@
|
|||||||
"./fragments/frame-panel": "./src/fragments/frame-panel.ts",
|
"./fragments/frame-panel": "./src/fragments/frame-panel.ts",
|
||||||
"./fragments/outline": "./src/fragments/outline.ts",
|
"./fragments/outline": "./src/fragments/outline.ts",
|
||||||
"./gfx/text": "./src/gfx/text.ts",
|
"./gfx/text": "./src/gfx/text.ts",
|
||||||
|
"./gfx/brush": "./src/gfx/brush.ts",
|
||||||
"./gfx/shape": "./src/gfx/shape.ts",
|
"./gfx/shape": "./src/gfx/shape.ts",
|
||||||
"./gfx/note": "./src/gfx/note.ts",
|
"./gfx/note": "./src/gfx/note.ts",
|
||||||
"./gfx/mindmap": "./src/gfx/mindmap.ts",
|
"./gfx/mindmap": "./src/gfx/mindmap.ts",
|
||||||
|
|||||||
1
blocksuite/affine/all/src/gfx/brush.ts
Normal file
1
blocksuite/affine/all/src/gfx/brush.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from '@blocksuite/affine-gfx-brush';
|
||||||
@@ -30,6 +30,7 @@
|
|||||||
{ "path": "../fragments/fragment-doc-title" },
|
{ "path": "../fragments/fragment-doc-title" },
|
||||||
{ "path": "../fragments/fragment-frame-panel" },
|
{ "path": "../fragments/fragment-frame-panel" },
|
||||||
{ "path": "../fragments/fragment-outline" },
|
{ "path": "../fragments/fragment-outline" },
|
||||||
|
{ "path": "../gfx/brush" },
|
||||||
{ "path": "../gfx/connector" },
|
{ "path": "../gfx/connector" },
|
||||||
{ "path": "../gfx/group" },
|
{ "path": "../gfx/group" },
|
||||||
{ "path": "../gfx/mindmap" },
|
{ "path": "../gfx/mindmap" },
|
||||||
|
|||||||
@@ -27,6 +27,7 @@
|
|||||||
"@blocksuite/affine-block-table": "workspace:*",
|
"@blocksuite/affine-block-table": "workspace:*",
|
||||||
"@blocksuite/affine-components": "workspace:*",
|
"@blocksuite/affine-components": "workspace:*",
|
||||||
"@blocksuite/affine-fragment-doc-title": "workspace:*",
|
"@blocksuite/affine-fragment-doc-title": "workspace:*",
|
||||||
|
"@blocksuite/affine-gfx-brush": "workspace:*",
|
||||||
"@blocksuite/affine-gfx-connector": "workspace:*",
|
"@blocksuite/affine-gfx-connector": "workspace:*",
|
||||||
"@blocksuite/affine-gfx-group": "workspace:*",
|
"@blocksuite/affine-gfx-group": "workspace:*",
|
||||||
"@blocksuite/affine-gfx-mindmap": "workspace:*",
|
"@blocksuite/affine-gfx-mindmap": "workspace:*",
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import { frameQuickTool } from '@blocksuite/affine-block-frame';
|
import { frameQuickTool } from '@blocksuite/affine-block-frame';
|
||||||
|
import { penSeniorTool } from '@blocksuite/affine-gfx-brush';
|
||||||
import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
|
import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
|
||||||
|
import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
|
||||||
import { noteSeniorTool } from '@blocksuite/affine-gfx-note';
|
import { noteSeniorTool } from '@blocksuite/affine-gfx-note';
|
||||||
import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
|
import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
|
||||||
import {
|
import {
|
||||||
@@ -28,34 +30,6 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
|
|
||||||
return {
|
|
||||||
name: 'Pen',
|
|
||||||
content: html`<div class="brush-and-eraser">
|
|
||||||
<edgeless-brush-tool-button
|
|
||||||
.edgeless=${block}
|
|
||||||
></edgeless-brush-tool-button>
|
|
||||||
|
|
||||||
<edgeless-eraser-tool-button
|
|
||||||
.edgeless=${block}
|
|
||||||
></edgeless-eraser-tool-button>
|
|
||||||
</div> `,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const mindMapSeniorTool = SeniorToolExtension(
|
|
||||||
'mindMap',
|
|
||||||
({ block, toolbarContainer }) => {
|
|
||||||
return {
|
|
||||||
name: 'Mind Map',
|
|
||||||
content: html`<edgeless-mindmap-tool-button
|
|
||||||
.edgeless=${block}
|
|
||||||
.toolbarContainer=${toolbarContainer}
|
|
||||||
></edgeless-mindmap-tool-button>`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const templateSeniorTool = SeniorToolExtension('template', ({ block }) => {
|
const templateSeniorTool = SeniorToolExtension('template', ({ block }) => {
|
||||||
return {
|
return {
|
||||||
name: 'Template',
|
name: 'Template',
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { edgelessTextToolbarExtension } from '@blocksuite/affine-block-edgeless-text';
|
import { edgelessTextToolbarExtension } from '@blocksuite/affine-block-edgeless-text';
|
||||||
import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
|
import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
|
||||||
|
import { brushToolbarExtension } from '@blocksuite/affine-gfx-brush';
|
||||||
import { connectorToolbarExtension } from '@blocksuite/affine-gfx-connector';
|
import { connectorToolbarExtension } from '@blocksuite/affine-gfx-connector';
|
||||||
import { groupToolbarExtension } from '@blocksuite/affine-gfx-group';
|
import { groupToolbarExtension } from '@blocksuite/affine-gfx-group';
|
||||||
import { mindmapToolbarExtension } from '@blocksuite/affine-gfx-mindmap';
|
import { mindmapToolbarExtension } from '@blocksuite/affine-gfx-mindmap';
|
||||||
@@ -9,7 +10,6 @@ import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
|
|||||||
import { BlockFlavourIdentifier } from '@blocksuite/block-std';
|
import { BlockFlavourIdentifier } from '@blocksuite/block-std';
|
||||||
import type { ExtensionType } from '@blocksuite/store';
|
import type { ExtensionType } from '@blocksuite/store';
|
||||||
|
|
||||||
import { builtinBrushToolbarConfig } from './brush';
|
|
||||||
import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
|
import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
|
||||||
|
|
||||||
export const EdgelessElementToolbarExtension: ExtensionType[] = [
|
export const EdgelessElementToolbarExtension: ExtensionType[] = [
|
||||||
@@ -17,10 +17,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
|
|||||||
|
|
||||||
groupToolbarExtension,
|
groupToolbarExtension,
|
||||||
|
|
||||||
ToolbarModuleExtension({
|
brushToolbarExtension,
|
||||||
id: BlockFlavourIdentifier('affine:surface:brush'),
|
|
||||||
config: builtinBrushToolbarConfig,
|
|
||||||
}),
|
|
||||||
|
|
||||||
connectorToolbarExtension,
|
connectorToolbarExtension,
|
||||||
|
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import {
|
|||||||
PresentTool,
|
PresentTool,
|
||||||
} from '@blocksuite/affine-block-frame';
|
} from '@blocksuite/affine-block-frame';
|
||||||
import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
|
import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
|
||||||
|
import { BrushTool, EraserTool } from '@blocksuite/affine-gfx-brush';
|
||||||
import {
|
import {
|
||||||
ConnectorFilter,
|
ConnectorFilter,
|
||||||
ConnectorTool,
|
ConnectorTool,
|
||||||
@@ -24,10 +25,8 @@ import type { ExtensionType } from '@blocksuite/store';
|
|||||||
import { EdgelessElementToolbarExtension } from './configs/toolbar';
|
import { EdgelessElementToolbarExtension } from './configs/toolbar';
|
||||||
import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
|
import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
|
||||||
import { SnapExtension } from './element-transform/snap-manager.js';
|
import { SnapExtension } from './element-transform/snap-manager.js';
|
||||||
import { BrushTool } from './gfx-tool/brush-tool.js';
|
|
||||||
import { DefaultTool } from './gfx-tool/default-tool.js';
|
import { DefaultTool } from './gfx-tool/default-tool.js';
|
||||||
import { EmptyTool } from './gfx-tool/empty-tool.js';
|
import { EmptyTool } from './gfx-tool/empty-tool.js';
|
||||||
import { EraserTool } from './gfx-tool/eraser-tool.js';
|
|
||||||
import { LassoTool } from './gfx-tool/lasso-tool.js';
|
import { LassoTool } from './gfx-tool/lasso-tool.js';
|
||||||
import { PanTool } from './gfx-tool/pan-tool.js';
|
import { PanTool } from './gfx-tool/pan-tool.js';
|
||||||
import { TemplateTool } from './gfx-tool/template-tool.js';
|
import { TemplateTool } from './gfx-tool/template-tool.js';
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
export { BrushTool } from './brush-tool.js';
|
|
||||||
export { DefaultTool } from './default-tool.js';
|
export { DefaultTool } from './default-tool.js';
|
||||||
export { EmptyTool } from './empty-tool.js';
|
export { EmptyTool } from './empty-tool.js';
|
||||||
export { EraserTool } from './eraser-tool.js';
|
|
||||||
export { LassoTool, type LassoToolOption } from './lasso-tool.js';
|
export { LassoTool, type LassoToolOption } from './lasso-tool.js';
|
||||||
export { PanTool, type PanToolOption } from './pan-tool.js';
|
export { PanTool, type PanToolOption } from './pan-tool.js';
|
||||||
export { TemplateTool } from './template-tool.js';
|
export { TemplateTool } from './template-tool.js';
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { effects as gfxBrushEffects } from '@blocksuite/affine-gfx-brush/effects';
|
||||||
import { effects as gfxConnectorEffects } from '@blocksuite/affine-gfx-connector/effects';
|
import { effects as gfxConnectorEffects } from '@blocksuite/affine-gfx-connector/effects';
|
||||||
import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects';
|
import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects';
|
||||||
import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
|
import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
|
||||||
@@ -20,12 +21,9 @@ import {
|
|||||||
EDGELESS_SELECTED_RECT_WIDGET,
|
EDGELESS_SELECTED_RECT_WIDGET,
|
||||||
EdgelessSelectedRectWidget,
|
EdgelessSelectedRectWidget,
|
||||||
} from './edgeless/components/rects/edgeless-selected-rect.js';
|
} from './edgeless/components/rects/edgeless-selected-rect.js';
|
||||||
import { EdgelessBrushMenu } from './edgeless/components/toolbar/brush/brush-menu.js';
|
|
||||||
import { EdgelessBrushToolButton } from './edgeless/components/toolbar/brush/brush-tool-button.js';
|
|
||||||
import { EdgelessSlideMenu } from './edgeless/components/toolbar/common/slide-menu.js';
|
import { EdgelessSlideMenu } from './edgeless/components/toolbar/common/slide-menu.js';
|
||||||
import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar-arrow-up-icon.js';
|
import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar-arrow-up-icon.js';
|
||||||
import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
|
import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
|
||||||
import { EdgelessEraserToolButton } from './edgeless/components/toolbar/eraser/eraser-tool-button.js';
|
|
||||||
import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
|
import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
|
||||||
import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
|
import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
|
||||||
import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
|
import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
|
||||||
@@ -101,6 +99,7 @@ function registerGfxEffects() {
|
|||||||
gfxConnectorEffects();
|
gfxConnectorEffects();
|
||||||
gfxMindmapEffects();
|
gfxMindmapEffects();
|
||||||
gfxGroupEffects();
|
gfxGroupEffects();
|
||||||
|
gfxBrushEffects();
|
||||||
}
|
}
|
||||||
|
|
||||||
function registerWidgets() {
|
function registerWidgets() {
|
||||||
@@ -123,21 +122,15 @@ function registerWidgets() {
|
|||||||
|
|
||||||
function registerEdgelessToolbarComponents() {
|
function registerEdgelessToolbarComponents() {
|
||||||
// Tool buttons
|
// Tool buttons
|
||||||
customElements.define('edgeless-brush-tool-button', EdgelessBrushToolButton);
|
|
||||||
customElements.define(
|
customElements.define(
|
||||||
'edgeless-default-tool-button',
|
'edgeless-default-tool-button',
|
||||||
EdgelessDefaultToolButton
|
EdgelessDefaultToolButton
|
||||||
);
|
);
|
||||||
customElements.define(
|
|
||||||
'edgeless-eraser-tool-button',
|
|
||||||
EdgelessEraserToolButton
|
|
||||||
);
|
|
||||||
customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
|
customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
|
||||||
customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
|
customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
|
||||||
customElements.define('edgeless-template-button', EdgelessTemplateButton);
|
customElements.define('edgeless-template-button', EdgelessTemplateButton);
|
||||||
|
|
||||||
// Menus
|
// Menus
|
||||||
customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
|
|
||||||
customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
|
customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
|
||||||
|
|
||||||
// Toolbar components
|
// Toolbar components
|
||||||
@@ -196,12 +189,9 @@ declare global {
|
|||||||
'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
|
'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
|
||||||
'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
|
'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
|
||||||
'edgeless-selected-rect': EdgelessSelectedRectWidget;
|
'edgeless-selected-rect': EdgelessSelectedRectWidget;
|
||||||
'edgeless-brush-menu': EdgelessBrushMenu;
|
|
||||||
'edgeless-brush-tool-button': EdgelessBrushToolButton;
|
|
||||||
'edgeless-slide-menu': EdgelessSlideMenu;
|
'edgeless-slide-menu': EdgelessSlideMenu;
|
||||||
'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
|
'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
|
||||||
'edgeless-default-tool-button': EdgelessDefaultToolButton;
|
'edgeless-default-tool-button': EdgelessDefaultToolButton;
|
||||||
'edgeless-eraser-tool-button': EdgelessEraserToolButton;
|
|
||||||
'edgeless-lasso-tool-button': EdgelessLassoToolButton;
|
'edgeless-lasso-tool-button': EdgelessLassoToolButton;
|
||||||
'edgeless-link-tool-button': EdgelessLinkToolButton;
|
'edgeless-link-tool-button': EdgelessLinkToolButton;
|
||||||
'overlay-scrollbar': OverlayScrollbar;
|
'overlay-scrollbar': OverlayScrollbar;
|
||||||
|
|||||||
@@ -24,6 +24,7 @@
|
|||||||
{ "path": "../block-table" },
|
{ "path": "../block-table" },
|
||||||
{ "path": "../../components" },
|
{ "path": "../../components" },
|
||||||
{ "path": "../../fragments/fragment-doc-title" },
|
{ "path": "../../fragments/fragment-doc-title" },
|
||||||
|
{ "path": "../../gfx/brush" },
|
||||||
{ "path": "../../gfx/connector" },
|
{ "path": "../../gfx/connector" },
|
||||||
{ "path": "../../gfx/group" },
|
{ "path": "../../gfx/group" },
|
||||||
{ "path": "../../gfx/mindmap" },
|
{ "path": "../../gfx/mindmap" },
|
||||||
|
|||||||
45
blocksuite/affine/gfx/brush/package.json
Normal file
45
blocksuite/affine/gfx/brush/package.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "@blocksuite/affine-gfx-brush",
|
||||||
|
"description": "Gfx brush for BlockSuite.",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc"
|
||||||
|
},
|
||||||
|
"sideEffects": false,
|
||||||
|
"keywords": [],
|
||||||
|
"author": "toeverything",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@blocksuite/affine-block-surface": "workspace:*",
|
||||||
|
"@blocksuite/affine-components": "workspace:*",
|
||||||
|
"@blocksuite/affine-model": "workspace:*",
|
||||||
|
"@blocksuite/affine-rich-text": "workspace:*",
|
||||||
|
"@blocksuite/affine-shared": "workspace:*",
|
||||||
|
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||||
|
"@blocksuite/block-std": "workspace:*",
|
||||||
|
"@blocksuite/global": "workspace:*",
|
||||||
|
"@blocksuite/icons": "^2.2.6",
|
||||||
|
"@blocksuite/store": "workspace:*",
|
||||||
|
"@lit/context": "^1.1.2",
|
||||||
|
"@preact/signals-core": "^1.8.0",
|
||||||
|
"@toeverything/theme": "^1.1.12",
|
||||||
|
"@types/lodash-es": "^4.17.12",
|
||||||
|
"lit": "^3.2.0",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"minimatch": "^10.0.1",
|
||||||
|
"rxjs": "^7.8.1",
|
||||||
|
"yjs": "^13.6.21",
|
||||||
|
"zod": "^3.23.8"
|
||||||
|
},
|
||||||
|
"exports": {
|
||||||
|
".": "./src/index.ts",
|
||||||
|
"./effects": "./src/effects.ts"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"src",
|
||||||
|
"dist",
|
||||||
|
"!src/__tests__",
|
||||||
|
"!dist/__tests__"
|
||||||
|
],
|
||||||
|
"version": "0.20.0"
|
||||||
|
}
|
||||||
20
blocksuite/affine/gfx/brush/src/effects.ts
Normal file
20
blocksuite/affine/gfx/brush/src/effects.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { EdgelessBrushMenu } from './toolbar/components/brush/brush-menu';
|
||||||
|
import { EdgelessBrushToolButton } from './toolbar/components/brush/brush-tool-button';
|
||||||
|
import { EdgelessEraserToolButton } from './toolbar/components/eraser/eraser-tool-button';
|
||||||
|
|
||||||
|
export function effects() {
|
||||||
|
customElements.define('edgeless-brush-tool-button', EdgelessBrushToolButton);
|
||||||
|
customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
|
||||||
|
customElements.define(
|
||||||
|
'edgeless-eraser-tool-button',
|
||||||
|
EdgelessEraserToolButton
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'edgeless-brush-tool-button': EdgelessBrushToolButton;
|
||||||
|
'edgeless-brush-menu': EdgelessBrushMenu;
|
||||||
|
'edgeless-eraser-tool-button': EdgelessEraserToolButton;
|
||||||
|
}
|
||||||
|
}
|
||||||
4
blocksuite/affine/gfx/brush/src/index.ts
Normal file
4
blocksuite/affine/gfx/brush/src/index.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export * from './brush-tool';
|
||||||
|
export * from './eraser-tool';
|
||||||
|
export * from './toolbar/config';
|
||||||
|
export * from './toolbar/senior-tool';
|
||||||
@@ -41,6 +41,7 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
|
|||||||
{
|
{
|
||||||
Escape: () => {
|
Escape: () => {
|
||||||
if (this.edgelessTool.type === 'eraser') {
|
if (this.edgelessTool.type === 'eraser') {
|
||||||
|
// @ts-expect-error FIXME: resolve after gfx tool refactor
|
||||||
this.setEdgelessTool({ type: 'default' });
|
this.setEdgelessTool({ type: 'default' });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -9,14 +9,18 @@ import {
|
|||||||
LineWidth,
|
LineWidth,
|
||||||
resolveColor,
|
resolveColor,
|
||||||
} from '@blocksuite/affine-model';
|
} from '@blocksuite/affine-model';
|
||||||
import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
|
import {
|
||||||
|
type ToolbarModuleConfig,
|
||||||
|
ToolbarModuleExtension,
|
||||||
|
} from '@blocksuite/affine-shared/services';
|
||||||
import {
|
import {
|
||||||
getMostCommonResolvedValue,
|
getMostCommonResolvedValue,
|
||||||
getMostCommonValue,
|
getMostCommonValue,
|
||||||
} from '@blocksuite/affine-shared/utils';
|
} from '@blocksuite/affine-shared/utils';
|
||||||
|
import { BlockFlavourIdentifier } from '@blocksuite/block-std';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
|
|
||||||
export const builtinBrushToolbarConfig = {
|
export const brushToolbarConfig = {
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
id: 'a.line-width',
|
id: 'a.line-width',
|
||||||
@@ -98,3 +102,8 @@ export const builtinBrushToolbarConfig = {
|
|||||||
|
|
||||||
when: ctx => ctx.getSurfaceModelsByType(BrushElementModel).length > 0,
|
when: ctx => ctx.getSurfaceModelsByType(BrushElementModel).length > 0,
|
||||||
} as const satisfies ToolbarModuleConfig;
|
} as const satisfies ToolbarModuleConfig;
|
||||||
|
|
||||||
|
export const brushToolbarExtension = ToolbarModuleExtension({
|
||||||
|
id: BlockFlavourIdentifier('affine:surface:brush'),
|
||||||
|
config: brushToolbarConfig,
|
||||||
|
});
|
||||||
17
blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts
Normal file
17
blocksuite/affine/gfx/brush/src/toolbar/senior-tool.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
|
||||||
|
import { html } from 'lit';
|
||||||
|
|
||||||
|
export const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
|
||||||
|
return {
|
||||||
|
name: 'Pen',
|
||||||
|
content: html`<div class="brush-and-eraser">
|
||||||
|
<edgeless-brush-tool-button
|
||||||
|
.edgeless=${block}
|
||||||
|
></edgeless-brush-tool-button>
|
||||||
|
|
||||||
|
<edgeless-eraser-tool-button
|
||||||
|
.edgeless=${block}
|
||||||
|
></edgeless-eraser-tool-button>
|
||||||
|
</div> `,
|
||||||
|
};
|
||||||
|
});
|
||||||
20
blocksuite/affine/gfx/brush/tsconfig.json
Normal file
20
blocksuite/affine/gfx/brush/tsconfig.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"rootDir": "./src",
|
||||||
|
"outDir": "./dist",
|
||||||
|
"tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
|
||||||
|
},
|
||||||
|
"include": ["./src"],
|
||||||
|
"references": [
|
||||||
|
{ "path": "../../blocks/block-surface" },
|
||||||
|
{ "path": "../../components" },
|
||||||
|
{ "path": "../../model" },
|
||||||
|
{ "path": "../../rich-text" },
|
||||||
|
{ "path": "../../shared" },
|
||||||
|
{ "path": "../../widgets/widget-edgeless-toolbar" },
|
||||||
|
{ "path": "../../../framework/block-std" },
|
||||||
|
{ "path": "../../../framework/global" },
|
||||||
|
{ "path": "../../../framework/store" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
export * from './element-transform';
|
export * from './element-transform';
|
||||||
export * from './indicator-overlay';
|
export * from './indicator-overlay';
|
||||||
export * from './toolbar/config';
|
export * from './toolbar/config';
|
||||||
|
export * from './toolbar/senior-tool';
|
||||||
export * from './utils';
|
export * from './utils';
|
||||||
export * from './view';
|
export * from './view';
|
||||||
|
|||||||
15
blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts
Normal file
15
blocksuite/affine/gfx/mindmap/src/toolbar/senior-tool.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
|
||||||
|
import { html } from 'lit';
|
||||||
|
|
||||||
|
export const mindMapSeniorTool = SeniorToolExtension(
|
||||||
|
'mindMap',
|
||||||
|
({ block, toolbarContainer }) => {
|
||||||
|
return {
|
||||||
|
name: 'Mind Map',
|
||||||
|
content: html`<edgeless-mindmap-tool-button
|
||||||
|
.edgeless=${block}
|
||||||
|
.toolbarContainer=${toolbarContainer}
|
||||||
|
></edgeless-mindmap-tool-button>`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
@@ -28,6 +28,7 @@ export const PackageList = [
|
|||||||
'blocksuite/affine/fragments/fragment-doc-title',
|
'blocksuite/affine/fragments/fragment-doc-title',
|
||||||
'blocksuite/affine/fragments/fragment-frame-panel',
|
'blocksuite/affine/fragments/fragment-frame-panel',
|
||||||
'blocksuite/affine/fragments/fragment-outline',
|
'blocksuite/affine/fragments/fragment-outline',
|
||||||
|
'blocksuite/affine/gfx/brush',
|
||||||
'blocksuite/affine/gfx/connector',
|
'blocksuite/affine/gfx/connector',
|
||||||
'blocksuite/affine/gfx/group',
|
'blocksuite/affine/gfx/group',
|
||||||
'blocksuite/affine/gfx/mindmap',
|
'blocksuite/affine/gfx/mindmap',
|
||||||
@@ -312,6 +313,7 @@ export const PackageList = [
|
|||||||
'blocksuite/affine/blocks/block-table',
|
'blocksuite/affine/blocks/block-table',
|
||||||
'blocksuite/affine/components',
|
'blocksuite/affine/components',
|
||||||
'blocksuite/affine/fragments/fragment-doc-title',
|
'blocksuite/affine/fragments/fragment-doc-title',
|
||||||
|
'blocksuite/affine/gfx/brush',
|
||||||
'blocksuite/affine/gfx/connector',
|
'blocksuite/affine/gfx/connector',
|
||||||
'blocksuite/affine/gfx/group',
|
'blocksuite/affine/gfx/group',
|
||||||
'blocksuite/affine/gfx/mindmap',
|
'blocksuite/affine/gfx/mindmap',
|
||||||
@@ -450,6 +452,21 @@ export const PackageList = [
|
|||||||
'blocksuite/framework/store',
|
'blocksuite/framework/store',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
location: 'blocksuite/affine/gfx/brush',
|
||||||
|
name: '@blocksuite/affine-gfx-brush',
|
||||||
|
workspaceDependencies: [
|
||||||
|
'blocksuite/affine/blocks/block-surface',
|
||||||
|
'blocksuite/affine/components',
|
||||||
|
'blocksuite/affine/model',
|
||||||
|
'blocksuite/affine/rich-text',
|
||||||
|
'blocksuite/affine/shared',
|
||||||
|
'blocksuite/affine/widgets/widget-edgeless-toolbar',
|
||||||
|
'blocksuite/framework/block-std',
|
||||||
|
'blocksuite/framework/global',
|
||||||
|
'blocksuite/framework/store',
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
location: 'blocksuite/affine/gfx/connector',
|
location: 'blocksuite/affine/gfx/connector',
|
||||||
name: '@blocksuite/affine-gfx-connector',
|
name: '@blocksuite/affine-gfx-connector',
|
||||||
@@ -1145,6 +1162,7 @@ export type PackageName =
|
|||||||
| '@blocksuite/affine-fragment-doc-title'
|
| '@blocksuite/affine-fragment-doc-title'
|
||||||
| '@blocksuite/affine-fragment-frame-panel'
|
| '@blocksuite/affine-fragment-frame-panel'
|
||||||
| '@blocksuite/affine-fragment-outline'
|
| '@blocksuite/affine-fragment-outline'
|
||||||
|
| '@blocksuite/affine-gfx-brush'
|
||||||
| '@blocksuite/affine-gfx-connector'
|
| '@blocksuite/affine-gfx-connector'
|
||||||
| '@blocksuite/affine-gfx-group'
|
| '@blocksuite/affine-gfx-group'
|
||||||
| '@blocksuite/affine-gfx-mindmap'
|
| '@blocksuite/affine-gfx-mindmap'
|
||||||
|
|||||||
@@ -75,6 +75,7 @@
|
|||||||
{ "path": "./blocksuite/affine/fragments/fragment-doc-title" },
|
{ "path": "./blocksuite/affine/fragments/fragment-doc-title" },
|
||||||
{ "path": "./blocksuite/affine/fragments/fragment-frame-panel" },
|
{ "path": "./blocksuite/affine/fragments/fragment-frame-panel" },
|
||||||
{ "path": "./blocksuite/affine/fragments/fragment-outline" },
|
{ "path": "./blocksuite/affine/fragments/fragment-outline" },
|
||||||
|
{ "path": "./blocksuite/affine/gfx/brush" },
|
||||||
{ "path": "./blocksuite/affine/gfx/connector" },
|
{ "path": "./blocksuite/affine/gfx/connector" },
|
||||||
{ "path": "./blocksuite/affine/gfx/group" },
|
{ "path": "./blocksuite/affine/gfx/group" },
|
||||||
{ "path": "./blocksuite/affine/gfx/mindmap" },
|
{ "path": "./blocksuite/affine/gfx/mindmap" },
|
||||||
|
|||||||
29
yarn.lock
29
yarn.lock
@@ -2733,6 +2733,7 @@ __metadata:
|
|||||||
"@blocksuite/affine-block-table": "workspace:*"
|
"@blocksuite/affine-block-table": "workspace:*"
|
||||||
"@blocksuite/affine-components": "workspace:*"
|
"@blocksuite/affine-components": "workspace:*"
|
||||||
"@blocksuite/affine-fragment-doc-title": "workspace:*"
|
"@blocksuite/affine-fragment-doc-title": "workspace:*"
|
||||||
|
"@blocksuite/affine-gfx-brush": "workspace:*"
|
||||||
"@blocksuite/affine-gfx-connector": "workspace:*"
|
"@blocksuite/affine-gfx-connector": "workspace:*"
|
||||||
"@blocksuite/affine-gfx-group": "workspace:*"
|
"@blocksuite/affine-gfx-group": "workspace:*"
|
||||||
"@blocksuite/affine-gfx-mindmap": "workspace:*"
|
"@blocksuite/affine-gfx-mindmap": "workspace:*"
|
||||||
@@ -2972,6 +2973,33 @@ __metadata:
|
|||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
|
"@blocksuite/affine-gfx-brush@workspace:*, @blocksuite/affine-gfx-brush@workspace:blocksuite/affine/gfx/brush":
|
||||||
|
version: 0.0.0-use.local
|
||||||
|
resolution: "@blocksuite/affine-gfx-brush@workspace:blocksuite/affine/gfx/brush"
|
||||||
|
dependencies:
|
||||||
|
"@blocksuite/affine-block-surface": "workspace:*"
|
||||||
|
"@blocksuite/affine-components": "workspace:*"
|
||||||
|
"@blocksuite/affine-model": "workspace:*"
|
||||||
|
"@blocksuite/affine-rich-text": "workspace:*"
|
||||||
|
"@blocksuite/affine-shared": "workspace:*"
|
||||||
|
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
|
||||||
|
"@blocksuite/block-std": "workspace:*"
|
||||||
|
"@blocksuite/global": "workspace:*"
|
||||||
|
"@blocksuite/icons": "npm:^2.2.6"
|
||||||
|
"@blocksuite/store": "workspace:*"
|
||||||
|
"@lit/context": "npm:^1.1.2"
|
||||||
|
"@preact/signals-core": "npm:^1.8.0"
|
||||||
|
"@toeverything/theme": "npm:^1.1.12"
|
||||||
|
"@types/lodash-es": "npm:^4.17.12"
|
||||||
|
lit: "npm:^3.2.0"
|
||||||
|
lodash-es: "npm:^4.17.21"
|
||||||
|
minimatch: "npm:^10.0.1"
|
||||||
|
rxjs: "npm:^7.8.1"
|
||||||
|
yjs: "npm:^13.6.21"
|
||||||
|
zod: "npm:^3.23.8"
|
||||||
|
languageName: unknown
|
||||||
|
linkType: soft
|
||||||
|
|
||||||
"@blocksuite/affine-gfx-connector@workspace:*, @blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector":
|
"@blocksuite/affine-gfx-connector@workspace:*, @blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector":
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector"
|
resolution: "@blocksuite/affine-gfx-connector@workspace:blocksuite/affine/gfx/connector"
|
||||||
@@ -3629,6 +3657,7 @@ __metadata:
|
|||||||
"@blocksuite/affine-fragment-doc-title": "workspace:*"
|
"@blocksuite/affine-fragment-doc-title": "workspace:*"
|
||||||
"@blocksuite/affine-fragment-frame-panel": "workspace:*"
|
"@blocksuite/affine-fragment-frame-panel": "workspace:*"
|
||||||
"@blocksuite/affine-fragment-outline": "workspace:*"
|
"@blocksuite/affine-fragment-outline": "workspace:*"
|
||||||
|
"@blocksuite/affine-gfx-brush": "workspace:*"
|
||||||
"@blocksuite/affine-gfx-connector": "workspace:*"
|
"@blocksuite/affine-gfx-connector": "workspace:*"
|
||||||
"@blocksuite/affine-gfx-group": "workspace:*"
|
"@blocksuite/affine-gfx-group": "workspace:*"
|
||||||
"@blocksuite/affine-gfx-mindmap": "workspace:*"
|
"@blocksuite/affine-gfx-mindmap": "workspace:*"
|
||||||
|
|||||||
Reference in New Issue
Block a user