feat(edgeless): add views and event support for canvas elements #8882

doouding · 2024-12-06T08:26:33Z

Introducing Views for Canvas Elements

This PR introduces the concept of views for canvas elements. Each canvas element, including those local element added via addLocalElement, now has an associated view instance. Views handle logic related to the view layer, such as binding mouse events to elements.

const modelView = std.gfx.view.get(model);

view.on('pointerenter', () => {
  console.log('mouse entered the element.');
});

You don’t need to manually instantiate views for elements. They are automatically managed by the ViewManager.

Custom View Classes

By default, each element's view is an instance of the GfxElementModelView class. However, you can define custom view classes for specific element types

import { GfxElementModelView } from '@blocksuite/block-std/gfx';

export class ShapeView extends GfxElementModelView {
  // Required static property: the model type this view is associated with
  static override type = 'shape';

  onCreated() {
    this.on('click', () => {
      enterShapeTextEditor(this.model);
    });
  }
}

// surface-spec.ts
export surfaceSpec = [
  //... other extensions
  ShapeView
];

Supported Events

The following mouse events are currently supported by views:

click
dblclick
pointerdown
pointerenter
pointerleave
pointermove
pointerup

vercel · 2024-12-06T08:26:35Z

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

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 3:49am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Dec 18, 2024 3:49am

changeset-bot · 2024-12-06T08:26:37Z

⚠️ No Changeset found

Latest commit: 91118b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

graphite-app · 2024-12-06T08:26:39Z

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 · 2024-12-06T08:26:53Z

feat(edgeless): mind map collapse #8905
feat(edgeless): add views and event support for canvas elements #8882 👈 (View in Graphite)
feat(edgeless): improve local element support #8869
feat(edgeless): rewrite mind map drag indicator #8805 : 1 other dependent PR (#8837 )
master

How to use the Graphite Merge Queue

Add the label merge to this PR to add it to the merge queue.

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

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

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

nx-cloud · 2024-12-06T08:27:48Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 91118b8. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx vite:build @blocksuite/playground

Sent with 💌 from NxCloud.

packages/blocks/src/root-block/edgeless/gfx-tool/default-tool-ext/event-ext.ts

packages/framework/block-std/src/gfx/surface-middleware.ts

github-actions · 2024-12-18T02:48:30Z

size-limit report 📦

Path	Size
@blocksuite/affine	13 B (0%)
@blocksuite/affine/effects	2.1 MB (-0.01% 🔽)
@blocksuite/affine/block-std	158.45 KB (+0.26% 🔺)
@blocksuite/affine/block-std/gfx	82.44 KB (+0.71% 🔺)
@blocksuite/affine/global	13 B (0%)
@blocksuite/affine/global/utils	13.88 KB (0%)
@blocksuite/affine/global/env	217 B (0%)
@blocksuite/affine/global/exceptions	562 B (0%)
@blocksuite/affine/global/di	1.65 KB (0%)
@blocksuite/affine/global/types	13 B (0%)
@blocksuite/affine/store	78.66 KB (0%)
@blocksuite/affine/inline	32.66 KB (0%)
@blocksuite/affine/inline/consts	242 B (0%)
@blocksuite/affine/inline/types	13 B (0%)
@blocksuite/affine/presets	1.9 MB (+0.03% 🔺)
@blocksuite/affine/blocks	1.99 MB (+0.05% 🔺)
@blocksuite/affine/blocks/schemas	89.95 KB (+0.11% 🔺)

L-Sun · 2024-12-18T03:22:56Z

Can these listener be disposed 🤔?

L-Sun

LGTM

graphite-app · 2024-12-18T03:48:01Z

Merge activity

Dec 17, 10:48 PM EST: A user added this pull request to the Graphite merge queue.
Dec 17, 10:53 PM EST: A user merged this pull request with the Graphite merge queue.

### **Introducing Views for Canvas Elements** This PR introduces the concept of views for canvas elements. Each canvas element, including those local element added via `addLocalElement`, now has an associated view instance. Views handle logic related to the view layer, such as binding mouse events to elements. ```typescript const modelView = std.gfx.view.get(model); view.on('pointerenter', () => { console.log('mouse entered the element.'); }); ``` You don’t need to manually instantiate views for elements. They are automatically managed by the `ViewManager`. ### **Custom View Classes** By default, each element's view is an instance of the `GfxElementModelView` class. However, you can define custom view classes for specific element types ```typescript import { GfxElementModelView } from '@blocksuite/block-std/gfx'; export class ShapeView extends GfxElementModelView { // Required static property: the model type this view is associated with static override type = 'shape'; onCreated() { this.on('click', () => { enterShapeTextEditor(this.model); }); } } // surface-spec.ts export surfaceSpec = [ //... other extensions ShapeView ]; ``` ### **Supported Events** The following mouse events are currently supported by views: - `click` - `dblclick` - `pointerdown` - `pointerenter` - `pointerleave` - `pointermove` - `pointerup`

github-actions bot assigned doouding Dec 6, 2024

doouding mentioned this pull request Dec 6, 2024

feat(edgeless): improve local element support #8869

Merged

vercel bot deployed to Preview – blocksuite December 6, 2024 08:28 View deployment

doouding mentioned this pull request Dec 9, 2024

feat(edgeless): mind map collapse #8905

Merged

doouding force-pushed the 12-06-feat_canvas_event_support branch from b7b2b40 to b204cec Compare December 9, 2024 09:45

graphite-app bot reviewed Dec 9, 2024

View reviewed changes

packages/blocks/src/root-block/edgeless/gfx-tool/default-tool-ext/event-ext.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview – blocksuite December 9, 2024 09:48 View deployment

doouding force-pushed the 12-05-feat_add_local_element_support branch from 08bab64 to 760c08f Compare December 9, 2024 09:53

doouding force-pushed the 12-06-feat_canvas_event_support branch from b204cec to 35b315f Compare December 9, 2024 09:53

vercel bot deployed to Preview – blocksuite December 9, 2024 09:57 View deployment

graphite-app bot reviewed Dec 9, 2024

View reviewed changes

packages/blocks/src/root-block/edgeless/gfx-tool/default-tool-ext/event-ext.ts Outdated Show resolved Hide resolved

doouding force-pushed the 12-06-feat_canvas_event_support branch from 35b315f to df7c1ed Compare December 9, 2024 10:43

vercel bot deployed to Preview – blocksuite December 9, 2024 10:46 View deployment

doouding force-pushed the 12-06-feat_canvas_event_support branch from df7c1ed to 15992c9 Compare December 9, 2024 15:02

vercel bot deployed to Preview – blocksuite December 9, 2024 15:05 View deployment

doouding force-pushed the 12-05-feat_add_local_element_support branch from f4d2fb7 to 5e26e5b Compare December 10, 2024 02:31

doouding force-pushed the 12-06-feat_canvas_event_support branch from 15992c9 to 59cc6db Compare December 10, 2024 02:31

vercel bot deployed to Preview – blocksuite December 10, 2024 02:35 View deployment

doouding force-pushed the 12-06-feat_canvas_event_support branch from 59cc6db to 86baae9 Compare December 10, 2024 06:11

vercel bot deployed to Preview – blocksuite December 10, 2024 06:14 View deployment

vercel bot deployed to Preview – blocksuite December 12, 2024 13:46 View deployment

graphite-app bot reviewed Dec 12, 2024

View reviewed changes

packages/framework/block-std/src/gfx/surface-middleware.ts Show resolved Hide resolved

vercel bot deployed to Preview – blocksuite December 12, 2024 13:59 View deployment

vercel bot deployed to Preview – blocksuite December 12, 2024 14:07 View deployment

vercel bot deployed to Preview – blocksuite December 12, 2024 14:35 View deployment

vercel bot deployed to Preview – blocksuite December 17, 2024 03:23 View deployment

doouding force-pushed the 12-06-feat_canvas_event_support branch from 06990c0 to f9b0419 Compare December 17, 2024 09:17

vercel bot deployed to Preview – blocksuite December 17, 2024 09:18 View deployment

doouding marked this pull request as ready for review December 17, 2024 09:24

doouding requested a review from a team as a code owner December 17, 2024 09:24

doouding changed the title ~~feat: add event support~~ feat(edgeless): add views and event support for canvas elements Dec 17, 2024

doouding force-pushed the 12-05-feat_add_local_element_support branch from 6d487de to a61fbb6 Compare December 17, 2024 09:38

doouding force-pushed the 12-06-feat_canvas_event_support branch from f9b0419 to 73b5e55 Compare December 17, 2024 09:38

vercel bot deployed to Preview – blocksuite December 17, 2024 09:41 View deployment

vercel bot deployed to Preview – blocksuite December 17, 2024 10:03 View deployment

vercel bot deployed to Preview – blocksuite December 17, 2024 10:11 View deployment

doouding requested review from doodlewind and L-Sun December 18, 2024 02:24

doouding changed the base branch from 12-05-feat_add_local_element_support to graphite-base/8882 December 18, 2024 02:37

doouding force-pushed the 12-06-feat_canvas_event_support branch from ce9a665 to a7a07eb Compare December 18, 2024 02:44

doouding force-pushed the graphite-base/8882 branch from a61fbb6 to 10a4437 Compare December 18, 2024 02:44

doouding changed the base branch from graphite-base/8882 to master December 18, 2024 02:44

doouding force-pushed the 12-06-feat_canvas_event_support branch from a7a07eb to fe3d272 Compare December 18, 2024 02:44

vercel bot deployed to Preview – blocksuite December 18, 2024 02:47 View deployment

L-Sun approved these changes Dec 18, 2024

View reviewed changes

doouding force-pushed the 12-06-feat_canvas_event_support branch from fe3d272 to 91118b8 Compare December 18, 2024 03:48

vercel bot deployed to Preview – blocksuite December 18, 2024 03:49 View deployment

graphite-app bot merged commit 91118b8 into master Dec 18, 2024
36 checks passed

graphite-app bot deleted the 12-06-feat_canvas_event_support branch December 18, 2024 03:53

vercel bot deployed to Production – blocksuite December 18, 2024 03:54 View deployment

github-actions bot mentioned this pull request Dec 18, 2024

chore: version packages #9013

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(edgeless): add views and event support for canvas elements #8882

feat(edgeless): add views and event support for canvas elements #8882

doouding commented Dec 6, 2024 •

edited

Loading

vercel bot commented Dec 6, 2024 •

edited

Loading

changeset-bot bot commented Dec 6, 2024 •

edited

Loading

graphite-app bot commented Dec 6, 2024

doouding commented Dec 6, 2024 •

edited

Loading

nx-cloud bot commented Dec 6, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading

L-Sun commented Dec 18, 2024

L-Sun left a comment

graphite-app bot commented Dec 18, 2024 •

edited

Loading

feat(edgeless): add views and event support for canvas elements #8882

feat(edgeless): add views and event support for canvas elements #8882

Conversation

doouding commented Dec 6, 2024 • edited Loading

Introducing Views for Canvas Elements

Custom View Classes

Supported Events

vercel bot commented Dec 6, 2024 • edited Loading

changeset-bot bot commented Dec 6, 2024 • edited Loading

⚠️ No Changeset found

graphite-app bot commented Dec 6, 2024

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

doouding commented Dec 6, 2024 • edited Loading

How to use the Graphite Merge Queue

nx-cloud bot commented Dec 6, 2024 • edited Loading

☁️ Nx Cloud Report

github-actions bot commented Dec 18, 2024 • edited Loading

size-limit report 📦

L-Sun commented Dec 18, 2024

L-Sun left a comment

Choose a reason for hiding this comment

graphite-app bot commented Dec 18, 2024 • edited Loading

Merge activity

doouding commented Dec 6, 2024 •

edited

Loading

vercel bot commented Dec 6, 2024 •

edited

Loading

changeset-bot bot commented Dec 6, 2024 •

edited

Loading

doouding commented Dec 6, 2024 •

edited

Loading

nx-cloud bot commented Dec 6, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading

graphite-app bot commented Dec 18, 2024 •

edited

Loading