refactor(edgeless): refine edgeless block definition

doouding commented 3 days ago

Edgeless block usage guide

To define a edgeless block, you need to use selectable and EdgelessBlockElement to define you model and rendering element:

import { BlockModel, defineBlockSchema } from '@blocksuite/store';
import { EdgelessBlockElement, BlockElement, selectable, SerializedXYWH } from '@blocksuite/block-std';

// define your model schema first
type ExampleProps = {
     xywh: SerializedXYWH;
     index: string
}

defineBlockSchema({
     flavour: 'affine:example',
     props: () => ({
        xywh: '[0,0,0,0]',
        index: 'a0'
     }),
     toModel: () => new EdgelessExampleBlock()
})

// edgeless block model should extend the `BlockModel` wrapped with `selectable`
class ExampleBlockModel extends selectable<ExampleProps>(BlockModel) {}

/**
 * Define how to render that block in dom.
 *
 * RootService is a temporary solution that author may need to access some API in edgeless which haven't been migrated to std. It can provide service of other block. Access through `affine:root`;
 */
export ExampleBlock extends EdgelessBlockElement<EdgelessRootService, ExampleBlockModel> {
    // tell the block which blocks' service is used at rootService
    rootServiceFlavour!: 'affine:page';

    xxxx() {
        this.rootService.xxxx;
    }

    /**
     * Usually the block will parse model's `xywh` and `index` during the rendering process.
     * If you need to return xywh other than model's xywh property. You can override this method.
     */
    override getRenderingRect() {}

    /**
     * Define how your block should be rendered
     */
    override renderEdgelessBlock() {
      return html`<div class="example-block"></div>`
    }
}

May change in the future

[ ] new package edgeless-std

vercel[bot] commented 3 days ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	❌ Failed (Inspect)			Jul 5, 2024 3:30am

1 Skipped Deployment

graphite-app[bot] commented 3 days ago

Your org has enabled the Graphite merge queue for merging into master

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

doouding commented 3 days ago

#7461 👈
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @doouding and the rest of your teammates on Graphite

toeverything / blocksuite