Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(edgeless): frame container #8048

Merged
merged 1 commit into from
Sep 4, 2024
Merged

Conversation

L-Sun
Copy link
Contributor

@L-Sun L-Sun commented Aug 27, 2024

This PR introduces a new interactive feature for Frame, which determines whether to add elements to the Frame based on the mouse position during dragging. It also optimizes the behavior of Group and MindMap within the Frame.

CleanShot.2024-08-30.at.10.20.18.mp4

What changes

  • Features:
    • add element to frame according dragging point, BS-1109
      • support nested group or frame
    • select frame when mouse click on area of frame, BS-1088
    • update children after adjust size of Frame
  • Refactor
    • FrameBlockModel and FrameManager
    • root-block/edgeless/utils/tree.ts
      • two new utility functions based on the tree structure of GfxContainerElement
    • edgeless/clipboard.ts
      • refactor sortEdgelessElements function based on element dependency tree
      • create pasted element based on the dependency of elements, which are sorted by sortEdgelessElements
      • move the ` computation of position of pasted elements before element creation
  • Bug Fixes
    • Fixed descendant elements of group not moved when moving frame.
    • Fixed relationship broken when create linked doc on edgeless elements.
    • Fixed relationship broken when pasting edgeless elements.
    • Fixed frame block missing in surface-ref in page mode when importing snapshot. BS-1197
  • A series e2e tests for frame

Change Need in AFFiNE Side

Copy link

vercel bot commented Aug 27, 2024

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 Sep 4, 2024 5:21am
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
blocksuite-docs ⬜️ Ignored (Inspect) Visit Preview Sep 4, 2024 5:21am

Copy link

graphite-app bot commented Aug 27, 2024

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.

@L-Sun L-Sun added the test needed Should provide test cases altogether label Aug 27, 2024 — with Graphite App
Copy link
Contributor Author

L-Sun commented Aug 27, 2024

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

Join @L-Sun and the rest of your teammates on Graphite Graphite

Copy link

nx-cloud bot commented Aug 27, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit e82211e. 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 3 targets

Sent with 💌 from NxCloud.

Copy link

changeset-bot bot commented Aug 30, 2024

⚠️ No Changeset found

Latest commit: e82211e

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

@L-Sun L-Sun removed the dont merge Experimental pull requests label Sep 2, 2024
@L-Sun L-Sun added the dont merge Experimental pull requests label Sep 3, 2024 — with Graphite App
@L-Sun L-Sun removed the dont merge Experimental pull requests label Sep 4, 2024
@L-Sun L-Sun added the merge label Sep 4, 2024
Copy link

graphite-app bot commented Sep 4, 2024

Merge activity

  • Sep 4, 1:20 AM EDT: The merge label 'merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Sep 4, 1:20 AM EDT: L-Sun added this pull request to the Graphite merge queue.
  • Sep 4, 1:25 AM EDT: L-Sun merged this pull request with the Graphite merge queue.

This PR introduces a new interactive feature for **Frame**, which determines whether to add elements to the Frame based on the mouse position during dragging. It also optimizes the behavior of **Group** and **MindMap** within the **Frame**.

https://github.com/user-attachments/assets/11497c76-7965-41ac-9c9b-b734b116861d

## What changes
- Features:
  - add element to frame according dragging point, [BS-1109](https://linear.app/affine-design/issue/BS-1109/[frame-improvements]-yuan素拖入拖出-frame-的判定依据以鼠标拖动yuan素时的位置是否进入-frame)
    -  support nested group or frame
  - select frame when mouse click on area of frame, [BS-1088](https://linear.app/affine-design/issue/BS-1108/[frame-improvements]-frame-点击可选中区域调整为-frame-的全部区域)
  - update children after adjust size of Frame
- Refactor
  - `FrameBlockModel` and `FrameManager`
    - add `childElementIds` field to props of `affine:frame`, [BS-1028](https://linear.app/affine-design/issue/BS-1208/frame-block-model-新增-childelements-字段,数据迁移方案rfc)
    - Integrate `FrameBlockModel` with the `GfxContainerElement` interface. #8059
    - Implemente some methods to maintain child relationship in `FrameManager`
  - `root-block/edgeless/utils/tree.ts`
    - two new utility functions based on the tree structure of `GfxContainerElement`
  - `edgeless/clipboard.ts`
    - refactor `sortEdgelessElements` function based on element dependency tree
    - create pasted element based on the dependency of elements, which are sorted by `sortEdgelessElements`
    - move the ` computation of position of pasted elements before element creation
- Bug Fixes
  - Fixed descendant elements of group not moved when moving frame.
  - Fixed relationship broken when create linked doc on edgeless elements.
  - Fixed  relationship broken when pasting edgeless elements.
  - Fixed frame block missing in `surface-ref` in page mode when importing snapshot. [BS-1197](https://linear.app/affine-design/issue/BS-1197/文档模式下导入的-embed-frame-block缺失)
- A series e2e tests for frame

## Change Need in AFFiNE Side
- change function name from `getElementsInFrame` to `getElementsInFrameBound` in files:
  - https://github.com/toeverything/AFFiNE/blob/canary/packages/frontend/core/src/blocksuite/presets/ai/_common/selection-utils.ts#L59
  - https://github.com/toeverything/AFFiNE/blob/canary/packages/frontend/core/src/blocksuite/presets/ai/_common/selection-utils.ts#L109
  - https://github.com/toeverything/AFFiNE/blob/canary/packages/frontend/core/src/blocksuite/presets/ai/utils/selection-utils.ts#L65
  - https://github.com/toeverything/AFFiNE/blob/canary/packages/frontend/core/src/blocksuite/presets/ai/utils/selection-utils.ts#L216
@graphite-app graphite-app bot merged commit e82211e into master Sep 4, 2024
8 checks passed
@graphite-app graphite-app bot deleted the l-sun/feat/frame-container branch September 4, 2024 05:25
L-Sun added a commit that referenced this pull request Sep 6, 2024
This PR is to remove the previous `frame.spec.ts` which has been splited into `tests/edgeless/*.spec.ts` in PR #8048
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

2 participants