Enhance Document and Edgeless Board Modes with Drawing Blocks and Mind Map Features; Add Hand-drawn Shape Recognition and React Component Support in BlockSuite​

[WesternFastShooters]

Description

1.Add “Board Block“ in document mode of BlockSuite Editor

Add a drawing board block to the document mode, similar to the Yuque drawing board. This block should be exclusively available in the document mode and not in the borderless mode. The drawing board block should enable the creation of mind maps and flowcharts. Note: In the drawing board block, the mind map elements should support relevant shortcuts for mind mapping, such as using the 'tab' key to create child nodes, akin to the functionality in XMind.

ps: button location

ps: performance

2.Add MindMap block in Edgeless mode of BlockSuite Editor

Add a special block called “mind map“ distinct from the existing graphic block. Its interactive operations, such as shortcut key , is similar to popular mind mapping software like Xmind.

3. Hand-drawn pattern recognition

In the edgeless mode, it is desired to have a hand-drawn shape recognition feature for freehand drawing, similar in operation to Notability and GoodNotes. After drawing, if the contact with the surface is maintained for 1 second, the system should recognize the corresponding shape. The recognizable shapes include square, rectangle, diamond, parallelogram, trapezoid, circle, ellipse, and arrow.

4. BlockSuite component can provide React Component

It is hoped that BlockSuite components can provide React-related components. The component usage is as follows:

const App = () => {
const ref = useRef();
return
};

Use case

No response

Anything else?

No response

Are you willing to submit a PR?

• Yes I'd like to help by submitting a PR!

[affine-issue-bot]

Issue Status: ✅ Done

✅ Done

If the issue was a bug, it’s been fixed; if it was a missing feature, it’s been implemented.

^{_{This is an automatic reply by the bot.}}