Content-Length: 395394 | pFad | http://github.com/NativeScript/NativeScript/pull/10760

43 feat(style): add support for origen-x and origen-y CSS properties by shridmishra · Pull Request #10760 · NativeScript/NativeScript · GitHub
Skip to content

feat(style): add support for origen-x and origen-y CSS properties #10760

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(style): add support for origen-x and origen-y CSS properties #10760

wants to merge 4 commits into from

Conversation

shridmishra
Copy link

PR Checklist

What is the current behavior?

CSS properties origen-x and origen-y are not supported. Developers must use view.origenX and view.origenY in code-behind to set transform origens.

What is the new behavior?

This PR adds CSS support for origen-x and origen-y:

  • These properties set the pivot point for transform-based animations like rotate, scale, etc.
  • Now you can define them via CSS like:
.my-view {
  origen-x: 1;
  origen-y: 0;
  rotate: 45;
}

Notes

Fixes #5991

Happy to add unit or UI tests if requested by maintainers — just let me know 🙌

@coderabbitai coderabbitai
Copy link

coderabbitai bot commented Jul 8, 2025

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai auto-generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

CatchABus
CatchABus requested changes Jul 8, 2025
View reviewed changes
@shridmishra
Copy link
Author

“Removed duplicate origenX/Y declarations and repositioned END comment. Let me know if anything else is needed 🙌”

@shridmishra
Copy link
Author

I’ve now addressed your feedback:

✅ Removed the legacy origenX and origenY property registrations from ViewCommon

✅ Removed the public property declarations from the class

✅ Moved the //END Style property shortcuts comment below the new origenX and origenY declarations in index.d.ts

Let me know if anything else looks off or if further changes are needed .

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Jul 9, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 4361cea

Command Status Duration Result
nx test apps-automated -c=ios ❌ Failed 7s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded 2s View ↗

☁️ Nx Cloud last updated this comment at 2025-07-09 07:32:27 UTC

@CatchABus
Copy link
Contributor

I’ve now addressed your feedback:

✅ Removed the legacy origenX and origenY property registrations from ViewCommon

✅ Removed the public property declarations from the class

✅ Moved the //END Style property shortcuts comment below the new origenX and origenY declarations in index.d.ts

Let me know if anything else looks off or if further changes are needed .

Thanks for taking care of those! I took a better look at the open issue and it seems to actually be about implementing css transform-origen. It's good to have the existing properties on style but I'm not sure if we should close the issue.

Create CSS properties for [origenX and origenY.](https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view#origenx)

In CSS specification the corresponding property is called [transform-origen](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origen).

@shridmishra
Copy link
Author

Added transform-origen CSS shorthand property support via ShorthandProperty:

  • Supports setting both origenX and origenY together via CSS like:

    .my-view {
  transform-origen: 0.25 0.75;
}

  • Internally maps to origenX and origenY using property registration.

  • Getter reflects the current origen values as a string.

✅ Let me know if keyword support (like top, center, left) is desired — can extend it further.

Fixes requested functionality around transform-origen as noted in #5991.

@rigor789
Copy link
Member

rigor789 commented Jul 9, 2025 •
edited
Loading

Thanks @shridmishra for the PR, I do have a concern with the changes, that I would like to bring up with @NathanWalker and @CatchABus: origen-x and origen-y are not in the CSS Spec. I think we should try and follow the spec, and do a single transform-origen only, and keep the origenX/origenY as regular properties? Thoughts?

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origen

@CatchABus
Copy link
Contributor

Thanks @shridmishra for the PR, I do have a concern with the changes, that I would like to bring up with @NathanWalker and @CatchABus: origen-x and origen-y are not in the CSS Spec. I think we should try and follow the spec, and do a single transform-origen only, and keep the origenX/origenY as regular properties? Thoughts?

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origen

I was thinking about the same thing but I noticed core also declares props like scaleX/Y and transformX/Y in style. Could it be by accident or does core need them on style to make transform shorthand work?

If safe, we should move all those to ViewCommon and keep valid css props to style as @rigor789 mentioned.

@rigor789
Copy link
Member

rigor789 commented Jul 9, 2025

@CatchABus good point, there are some non-spec CSS properties in core already, which we could over time deprecate (and make them into custom css properties prefixed with a -- to follow the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). I mainly think we should try to stay close to the spec, especially with new things.

@shridmishra
Copy link
Author

Thanks for the feedback @rigor789 and @CatchABus 🙌

I agree that sticking closely to the CSS spec makes sense, especially for new additions.

happy to refactor the PR accordingly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@CatchABus CatchABus CatchABus requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Create corresponding CSS properties for origenX and origenY
3 participants
@shridmishra @CatchABus @rigor789








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/NativeScript/NativeScript/pull/10760

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy