pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


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

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

1a5f61ff87ac6f0.css" /> 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

Open
shridmishra wants to merge 4 commits intoNativeScript:mainfrom
shridmishra:feature/css-origen
Open

feat(style): add support for origen-x and origen-y CSS properties#10760
shridmishra wants to merge 4 commits intoNativeScript:mainfrom
shridmishra:feature/css-origen

Conversation

@shridmishra
Copy link
Copy Markdown

@shridmishra shridmishra commented Jul 8, 2025

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
Copy link
Copy Markdown

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
Comment thread packages/core/ui/core/view/view-common.ts
@shridmishra
Copy link
Copy Markdown
Author

shridmishra commented Jul 9, 2025

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

@shridmishra
Copy link
Copy Markdown
Author

shridmishra commented Jul 9, 2025

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
Copy link
Copy Markdown

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
Copy Markdown
Contributor

CatchABus commented Jul 9, 2025

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
Copy Markdown
Author

shridmishra commented Jul 9, 2025

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
Copy Markdown
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
Copy Markdown
Contributor

CatchABus commented Jul 9, 2025

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
Copy Markdown
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
Copy Markdown
Author

shridmishra commented Jul 11, 2025

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

♥ community PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Create corresponding CSS properties for origenX and origenY

4 participants

@shridmishra @CatchABus @rigor789 @NathanWalker
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.




Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy