Ete4 create option of rotation for polygon

ete4/smartview/faces.py

@@ -271,11 +271,12 @@ def draw(self, nodes, size, collapsed, zoom=(1, 1), ax_ay=(0, 0), r=1):
 class PolygonFace(Face):
     """A polygon."""
 
-    def __init__(self, rmax=None, shape=3, style='',
-                 position='top', column=0, anchor=None):
+    def __init__(self, rmax=None, shape=3, rotation=0, 
+                style='', position='top', column=0, anchor=None):
         super().__init__(position, column, anchor)
 
         self.shape = shape  # name of the shape or number of edges
+        self.rotation = rotation  # rotation in degrees
         self.rmax = rmax  # maximum "radius" in pixels
         self.style = style
 
@@ -295,7 +296,7 @@ def draw(self, nodes, size, collapsed, zoom=(1, 1), ax_ay=(0, 0), r=1):
 
         # Return the graphic and its size.
         center = (cr / zx, cr / (r * zy))  # in tree coordinates
-        polygon = gr.draw_polygon(center, cr, self.shape, self.style)
+        polygon = gr.draw_polygon(center, cr, self.shape, self.rotation, self.style)
 
         return [polygon], Size(2*cr/zx, 2*cr/(r*zy))
         # NOTE: For small r (in circular mode), that size is just approximate.

ete4/smartview/graphics.py

@@ -65,8 +65,8 @@ def draw_arc(p1, p2, style=''):
 def draw_circle(center, radius=1, style=''):
     return ['circle', center, radius, style]
 
-def draw_polygon(center, radius, shape=3, style=''):
-    return ['polygon', center, radius, shape, style]
+def draw_polygon(center, radius, shape=3, rotation=0, style=''):
+    return ['polygon', center, radius, shape, rotation, style]
 
 def draw_box(box, style=''):
     return ['box', box, style]

ete4/smartview/static/js/draw.js

@@ -289,8 +289,8 @@ function translate(item, shift) {
         return ["circle", [x + shift, y], radius, style];
     }
     else if (item[0] === "polygon") {
-        const [ , [x, y], radius, shape, style] = item;
-        return ["polygon", [x + shift, y], radius, shape, style];
+        const [ , [x, y], radius, shape, rotation, style] = item;
+        return ["polygon", [x + shift, y], radius, shape, rotation, style];
     }
     else if (item[0] === "box") {
         const [ , box, style] = item;
@@ -433,6 +433,7 @@ function legend2html(legend) {
     }
     else {  // variable continuous: use value range and color range
         const [vmin, vmax] = vrange.map(format_number);  // values
+
         return header +
             `${vmax}
              <span style="display: block;
@@ -568,10 +569,10 @@ function create_item(item, tl, zoom, wmax) {
         return create_circle(center, radius, tl, zx, zy, add_ns_prefix(style));
     }
     else if (item[0] === "polygon") {
-        const [ , center, radius, shape, style] = item;
-
+        const [ , center, radius, shape, rotation, style] = item;
+        
         return create_polygon(center, radius, shape, tl, zx, zy,
-                              add_ns_prefix(style), true);
+             rotation, add_ns_prefix(style), true);
     }
     else if (item[0] === "box") {
         const [ , box, style] = item;
@@ -796,11 +797,12 @@ function create_dot(point, dy_max, tl, zx, zy, styles) {
     // Radius of the dot in pixels.
     const r_max = zy * dy_max * (view.shape === "circular" ? point[0] : 1);
     const r = Math.min(r_max, pop_style(styles, "radius") || view.node.dot.radius);
+    const rotation = pop_style(styles, "rotation") || 0;
 
     if (shape === "circle")
         return create_circle(point, r, tl, zx, zy, styles);
     else
-        return create_polygon(point, r, shape, tl, zx, zy, styles);
+        return create_polygon(point, r, shape, tl, zx, zy, rotation, styles);
 }
 
 
@@ -956,7 +958,8 @@ function create_circle(center, radius, tl, zx, zy, style="") {
 
 
 // Create a polygon.
-function create_polygon(center, r, shape, tl, zx, zy, style="", resize=false) {
+function create_polygon(center, r, shape, tl, zx, zy, rotation=0, style="", resize=false) {
+
     const n = typeof shape === "number" ? shape :
           {"triangle": 3,
            "square":   4,
@@ -997,12 +1000,16 @@ function create_polygon(center, r, shape, tl, zx, zy, style="", resize=false) {
         add_rotation(element, angle, c.x, c.y);
     }
 
+    // Apply custom rotation
+    if (rotation !== 0) {
+        add_rotation(element, rotation, c.x, c.y);
+    }
+
     add_style(element, style);
 
     return element;
 }
 
-
 function create_text(box, anchor, text, fs_max, rotation,
                      tl, zx, zy, style="") {
     const [x, y, fs, text_anchor] = view.shape === "rectangular" ?