Skip to content

feat(draw): add fillStyle support for shapes#1137

Merged
pubuzhixing8 merged 14 commits into
worktile:developfrom
Kripu77:feature/fillstyle-support
Jul 4, 2026
Merged

feat(draw): add fillStyle support for shapes#1137
pubuzhixing8 merged 14 commits into
worktile:developfrom
Kripu77:feature/fillstyle-support

Conversation

@Kripu77

@Kripu77 Kripu77 commented Feb 21, 2026

Copy link
Copy Markdown
Contributor

Changes

  • Introduced FillStyle type and added fillStyle to PlaitCommonGeometry
  • Passed fillStyle from element props to rough.js renderer
  • Removed hardcoded fillStyle: 'solid' from all shape engines
  • Enabled full support for rough.js fill styles: solid, hachure, zigzag, cross-hatch, dots, dashed, zigzag-line

This allows shapes to render using any rough.js supported fill pattern instead of defaulting to solid.

@vercel

vercel Bot commented Feb 21, 2026

Copy link
Copy Markdown

@Kripu77 is attempting to deploy a commit to the tethys Team on Vercel.

A member of the Team first needs to authorize it.

@Kripu77

Kripu77 commented Feb 24, 2026

Copy link
Copy Markdown
Contributor Author

@pubuzhixing8 could you review this please?

@pubuzhixing8

Copy link
Copy Markdown
Collaborator

@pubuzhixing8 could you review this please?

I would review it soon.

Comment thread packages/draw/src/utils/fillstyle.spec.ts Outdated
Comment thread packages/draw/src/utils/fillstyle.spec.ts Outdated
@pubuzhixing8

Copy link
Copy Markdown
Collaborator

@Kripu77 Could you add some functional examples for this feature, such as the mark of below image:
Screenshot 2026-03-06 at 10 15 20

…lict

# Conflicts:
#	packages/draw/src/engines/flowchart/delay.ts
#	packages/draw/src/engines/flowchart/predefined-process.ts
#	packages/draw/src/engines/uml/activity-class.ts
#	packages/draw/src/engines/uml/container.ts
#	packages/draw/src/engines/uml/deletion.ts
@pubuzhixing8

Copy link
Copy Markdown
Collaborator

Hi @nightt5879, I improved this pr and added the feature entry on example board, it's now ready for review.
Screenshot 2026-06-26 at 18 36 51

@nightt5879 nightt5879 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding fillStyle support and the demo entry. I tested the PR locally:

  • npm run build passed
  • npm run build:demo passed, with existing Angular/Sass/CommonJS warnings
  • npx ng test draw --watch=false --progress=false --browsers=ChromeHeadlessCI passed, 30 SUCCESS
  • git diff --check origin/develop...HEAD passed

I found a couple of behavior regressions that should be fixed before merge. The main issue is preserving the old default solid fill behavior anywhere callers do not explicitly pass fillStyle. Also, GeometryStyleOptions in packages/draw/src/utils/geometry.ts should include fillStyle, otherwise public helpers like createGeometryElement(..., { fillStyle: 'hachure' }) are still rejected by TypeScript even though PlaitCommonGeometry now supports the property.

Comment thread packages/draw/src/engines/table/table.ts Outdated
Comment thread packages/draw/src/generators/geometry-shape.generator.ts
Comment thread src/app/components/setting-panel/setting-panel.component.ts Outdated
Comment thread packages/draw/src/interfaces/geometry.ts Outdated
@pubuzhixing8

Copy link
Copy Markdown
Collaborator

@nightt5879 Updated based on your feedback, and remove the special mock data about fillStyle, please see that again.

@nightt5879 nightt5879 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I re-reviewed the latest HEAD and found two items worth confirming: one possible missing fillStyle propagation path for UML class/interface rendering, and one small unused-import nit.

@nightt5879 nightt5879 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reposting the review notes in English. I found two items worth confirming before approval: one possible missing fillStyle propagation path for UML class/interface rendering, and one small unused-import nit.

Comment thread packages/draw/src/engines/table/table.ts Outdated
Comment thread packages/draw/src/interfaces/index.ts Outdated
@pubuzhixing8 pubuzhixing8 marked this pull request as draft June 29, 2026 15:11
@pubuzhixing8

Copy link
Copy Markdown
Collaborator

I am still working on it, I found some problems on table-backed scenarios.

@pubuzhixing8 pubuzhixing8 marked this pull request as ready for review July 3, 2026 15:24
@pubuzhixing8

pubuzhixing8 commented Jul 3, 2026

Copy link
Copy Markdown
Collaborator

Updated the implementation based on the latest direction: this PR will not support fillStyle for tables or table-based elements for now, including UML class/interface and swimlane. Table cell fills are forced to use solid to keep the scope smaller and avoid expanding the current interaction/rendering complexity. fillStyle is currently only enabled for regular closed geometry elements. We can revisit table/cell-level fill styles later with a dedicated interaction and data model design. @nightt5879 Please help me review again!

@nightt5879 nightt5879 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did another full review on the latest head.

The previous implementation concerns look addressed: the default solid behavior is preserved for drawGeometry / drawShape direct calls and table cell rendering, the setting panel is now scoped to supported non-table-backed closed geometry, FillStyle is narrowed to the explicit supported values, and the new tests cover the relevant rendering options.

Given the latest scope clarification, I’m okay with this PR only supporting fillStyle for regular closed geometry for now, while keeping table / swimlane / UML class-interface shapes on solid fills. Table-backed fill styles can be handled later with a dedicated model and interaction design.

No further blocking concerns from my side.

@pubuzhixing8 pubuzhixing8 merged commit 55cab18 into worktile:develop Jul 4, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants