Skip to content

Plot.image rotate option #1084

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.

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

Closed
wants to merge 1 commit into from
Closed

Plot.image rotate option #1084

wants to merge 1 commit into from

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Oct 11, 2022

Demo: https://observablehq.com/@observablehq/plot-image-rotate-1084

closes #1083

todo:

  • unit test
  • dx, dy— & anticipate what will happen if dx and dy become variable (as in variable styles #909)

Comment on lines +111 to +123
.attr(
"transform-origin",
R || this.rotate
? X && Y
? (i) => `${X[i]}px ${Y[i]}px`
: X
? (i) => `${X[i]}px ${cy}px`
: Y
? (i) => `${cx}px ${Y[i]}px`
: `${cx}px ${cy}px`
: null
)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

unfortunate complexity… am I missing a better way?

Copy link
Member

Choose a reason for hiding this comment

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

Can you set use transform-origin="center" instead?

Copy link
Member

@mbostock mbostock Oct 11, 2022

Choose a reason for hiding this comment

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

I tried it and it doesn’t work. ☹️ So I guess this is the only option… unless you wrap the image in a G element or something, but I bet that’s worse.

@llimllib
Copy link

It looks great to me, thanks for the quick response! Though I have to say I don't understand the transform-origin bit at all

@Fil Fil marked this pull request as draft October 24, 2022 17:19
Copy link
Member

@mbostock mbostock left a comment

Choose a reason for hiding this comment

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

I think we want to combine the x, y, and transform-origin attributes into a single transform attribute, similar to what we do for dot and vector. Also this could use the template helper I created for #1189.

@mbostock
Copy link
Member

mbostock commented Apr 1, 2023

This looks useful.

@Fil Fil self-assigned this Apr 4, 2023
@Fil Fil mentioned this pull request Apr 5, 2023
@Fil
Copy link
Contributor Author

Fil commented Apr 5, 2023

superseded by #1426

@Fil Fil closed this Apr 5, 2023
@Fil Fil deleted the fil/image-rotate branch April 6, 2023 08:52
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.

image should have a rotate option just like dot
3 participants