feat(edgeless): improve local element support #8869
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Your org has enabled the Graphite merge queue for merging into masterAdd 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. |
How to use the Graphite Merge QueueAdd 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. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
packages/framework/block-std/src/gfx/model/surface/local-element-model.ts
Show resolved
Hide resolved
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 10a4437. 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 targetSent with 💌 from NxCloud. |
This was referenced Dec 6, 2024
doouding
force-pushed
the
11-26-fix_expand_mind_map_area
branch
from
8cf2b40 to
1feb37d
Compare
doouding
force-pushed
the
12-05-feat_add_local_element_support
branch
from
08bab64 to
760c08f
Compare
doouding
force-pushed
the
11-26-fix_expand_mind_map_area
branch
from
1feb37d to
286432a
Compare
doouding
force-pushed
the
12-05-feat_add_local_element_support
branch
from
f4d2fb7 to
5e26e5b
Compare
doouding
changed the base branch from
11-26-fix_expand_mind_map_area
to
graphite-base/8869
doouding
force-pushed
the
12-05-feat_add_local_element_support
branch
from
3268c13 to
de7bbc7
Compare
packages/framework/block-std/src/gfx/model/surface/local-element-model.ts
Show resolved
Hide resolved
size-limit report 📦
|
doouding
force-pushed
the
12-05-feat_add_local_element_support
branch
from
fdd053d to
02b4245
Compare
doouding
changed the title
doouding
force-pushed
the
12-05-feat_add_local_element_support
branch
from
6d487de to
a61fbb6
Compare
doodlewind
approved these changes
Dec 18, 2024
Merge activity
|
### Defining a New Local Element
To define a local element, create a class that extends `GfxLocalElementModel`, and use the `@prop` decorator on any field that you want to track changes for via `localElementUpdated`.
Note: Do **not** use any Yjs data structures, as local elements are intended for local data only.
Example:
```typescript
import { GfxLocalElementModel, prop } from '@blocksuite/block-std/gfx';
export class LocalTextElement extends GfxLocalElementModel {
get type() {
return 'text'
}
@prop()
accessor text: string = '';
}
```
Once the class is defined, create an instance with `const localText = new LocalTextElement(surfaceModel)`. You can then use its render function to manually render the model.
To watch `@prop` decorated property changes, use `surface.localElementUpdated` to listen for updates.
### Adding to surface model
Add instances to the surface using the `surface.addLocalElement` method. This enables event support and automatic rendering—there’s no need to call the render function manually.
When the element is no longer needed, remove it from the surface with `surface.deleteLocalElement`.
Calling `addLocalElement` and `deleteLocalElement` will trigger `localElementAdded` and `localElementDeleted` slot respectively.
Note: Adding to the surface is **not** required if a local instance is sufficient for your needs.
doouding
force-pushed
the
12-05-feat_add_local_element_support
branch
from
a61fbb6 to
10a4437
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Defining a New Local Element
To define a local element, create a class that extends
GfxLocalElementModel, and use the@propdecorator on any field that you want to track changes for vialocalElementUpdated.Note: Do not use any Yjs data structures, as local elements are intended for local data only.
Example:
Once the class is defined, create an instance with
const localText = new LocalTextElement(surfaceModel). You can then use its render function to manually render the model.To watch
@propdecorated property changes, usesurface.localElementUpdatedto listen for updates.Adding to surface model
Add instances to the surface using the
surface.addLocalElementmethod. This enables event support and automatic rendering—there’s no need to call the render function manually.When the element is no longer needed, remove it from the surface with
surface.deleteLocalElement.Calling
addLocalElementanddeleteLocalElementwill triggerlocalElementAddedandlocalElementDeletedslot respectively.Note: Adding to the surface is not required if a local instance is sufficient for your needs.