Rotate inside group without shifting

[JuliDi]

I would like to rotate the circle with the "+" inside by 45 degrees, but if I add the rotate command, it will also move. What am I doing wrong here? (A solution that can be factored out into a function to make it a reusable symbol would be greatly appreciated)

without rotate:

with rotate:

#import "@preview/cetz:0.1.2": canvas, draw, tree

#canvas(length: 1cm, {
  import draw: *
  line((0,0), (rel: (2, 0)))

  group({
    rotate(45deg)
    circle((rel:(0,0)), radius: 0.3, anchor: "left", name: "circle")
    line("circle.left", "circle.right")
    line("circle.top", "circle.bottom")
  }
  )
})

[johannes-wolf]

It is because the origin of the rotation is at (0,0) so you would have to translate everything first (you can use set-origin(()) and then use (0,0) as your circle position). BUT: It is way more easy not using rotation at all, but other anchors:

#import "@preview/cetz:0.1.2": canvas, draw, tree

#canvas(length: 1cm, {
  import draw: *
  line((0,0), (rel: (2, 0)))

  group({
    circle((), radius: 0.3, anchor: "left", name: "circle")
    line("circle.top-left", "circle.bottom-right")
    line("circle.top-right", "circle.bottom-left")
  })
})

[JuliDi]

One more issue that I ran into: When I use "line-right" anchor as the circle coordinate, the arrow tip will be inside the circle:

#import "@preview/cetz:0.1.2": canvas, draw, tree

#canvas(length: 1cm, {
  import draw: *

  line((0,0), (rel: (2, 0)), mark: (end: ">"), name: "line")

  group({
    circle("line.right", radius: 0.3, anchor: "left", name: "circle")
    line("circle.top-left", "circle.bottom-right")
    line("circle.top-right", "circle.bottom-left")
  })
})

However if I use relative coordinates, e.g. circle((rel: (0,0)), radius: 0.3, anchor: "left", name: "circle"), it works as expected.

This is especially bad if you want to place content above the line, then my only workaround is to place the content with relative coordinates and set update: false and then use relative coordinates again for the circle.

so this will again look bad:

  line((0,0), (rel: (2, 0)), mark: (end: ">"), name: "line")
  content("line", [$r_B (t)$], anchor: "bottom", padding: 0.2)
  
  group({
    circle("line.right", radius: 0.3, anchor: "left", name: "circle")
    line("circle.top-left", "circle.bottom-right")
    line("circle.top-right", "circle.bottom-left")
  })

and this, somewhat awkward coordinate definitions work:

  line((0,0), (rel: (2, 0)), mark: (end: ">"), name: "line")
  content((rel: (0,0), to: "line", update: false), [$r_B (t)$], anchor: "bottom", padding: 0.2)
  
  group({
    circle((rel: (0,0)), radius: 0.3, anchor: "left", name: "circle")
    line("circle.top-left", "circle.bottom-right")
    line("circle.top-right", "circle.bottom-left")
  })

[johannes-wolf]

Thank you, this has to to with the line getting shortened to have the arrow tip pointing directly to the coordinate. The anchor getting moved to is a bug! I will add a ticket.

[JuliDi]

Oh, I see. Thanks for taking care of it!

[johannes-wolf]

Ok. Sorry I had overseen you are using line.right, which is the wrong anchor to get a lines ending!
Use "line.end" and it works!

[JuliDi]

Using "line.end" it works as expected, thank you!