Fix/element not found v2.7：Add condition for when element is null

[betterdancing]

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

场景：当画布上元素大小变化时（如按钮大小变化）会有一个过渡动画，但选中的边框是立即检测元素变化，导致边框和组件边缘不重合，因此需要通过getElementById获取组件的animation delay

What is the current behavior?

elementId存在但是找不到对应的element元素，例如teleport 或者是 顶层是 fragment 的元素
Issue Number: N/A

What is the new behavior?

如果在elementId找不到对应的元素，则直接return默认的delay毫秒50ms

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Bug Fixes
  • Improved handling of missing elements in duration calculations with optimized default timing behavior.

[coderabbitai]

Walkthrough

The getElementDurationTime function in the canvas container was modified to return early with a 50ms default delay when the target element is not found, instead of proceeding with duration computation. Valid elements continue using the existing logic.

Changes

Cohort / File(s)	Summary
Canvas Container Duration Logic packages/canvas/container/src/container.ts	Modified getElementDurationTime to default delayTime to 50ms and return immediately when target element is missing, rather than continuing to compute durations

Sequence Diagram

sequenceDiagram
    participant Caller
    participant getElementDurationTime
    participant DOM

    rect rgb(240, 248, 255)
    Note over Caller,DOM: Old Behavior (no early return)
    Caller->>getElementDurationTime: query element
    getElementDurationTime->>DOM: find element
    DOM-->>getElementDurationTime: not found (null)
    getElementDurationTime->>getElementDurationTime: proceed with duration computation
    getElementDurationTime-->>Caller: computed value
    end

    rect rgb(230, 245, 220)
    Note over Caller,DOM: New Behavior (with early return)
    Caller->>getElementDurationTime: query element
    getElementDurationTime->>DOM: find element
    DOM-->>getElementDurationTime: not found (null)
    getElementDurationTime-->>Caller: return 50ms (default)
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify existing callers handle the early return correctly
• Confirm the 50ms default is appropriate for all use cases
• Check if test coverage exists for the missing element scenario

Poem

🐰 A swift return when paths don't align,
Fifty milliseconds, a graceful design,
No more wandering through absent nodes,
Early exits smooth the coded roads! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a null check condition for missing elements in the getElementDurationTime function, which aligns with the core objective of handling cases where elementId exists but the DOM element cannot be found.

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 137e4b0 and 6fe8623.

📒 Files selected for processing (1)

• packages/canvas/container/src/container.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: gene9831
Repo: opentiny/tiny-engine PR: 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: 2025-01-14T08:45:57.032Z

Learnt from: rhlin
Repo: opentiny/tiny-engine PR: 1011
File: packages/canvas/render/src/application-function/global-state.ts:12-25
Timestamp: 2025-01-14T08:45:57.032Z
Learning: The code in `packages/canvas/render/src/application-function/global-state.ts` is migrated from an existing codebase and should be handled with care when making modifications.

Applied to files:

• packages/canvas/container/src/container.ts

📚 Learning: 2025-01-14T08:44:09.485Z

Learnt from: rhlin
Repo: opentiny/tiny-engine PR: 1011
File: packages/canvas/render/src/canvas-function/controller.ts:1-7
Timestamp: 2025-01-14T08:44:09.485Z
Learning: Type safety improvements for the controller in `packages/canvas/render/src/canvas-function/controller.ts` should be deferred until the data structure is finalized.

Applied to files:

• packages/canvas/container/src/container.ts

⏰ 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