Copy

Default copy

To use the copy operation, we use these nodes:

let nodes = [
  {
    op: "copy"
  }
];

let elements = [
  {
    type: "copy",
  }
];

This generates defaults Wrapper with rotated Text elements. You use static: true property and keep: true property to transform element without animation.

new Wrapper()
.set({
  width: "300px",
  height: "300px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  position: "absolute",
  id: "#first",
  scale: 0.3,
  
})
.add(
  Array.from({ length: 7 }).map((_, i) => {

    const bbox = {width: "300px", height: "300px"};

      const elHeight = bbox.height;

      const cx = 150;
      const cy = 150;

      const R = 150;

      const n = 7;

      // Evenly spaced angles, starting at top (-90°)
      const angle = (i / n) * Math.PI * 2 - Math.PI/2;
      const dist = R + parseFloat(elHeight)/2;

      const x = cx + dist * Math.cos(angle);
      const y = cy + dist * Math.sin(angle);

      let rot = angle * 180 / Math.PI + 90;
      rot = (rot % 360 + 360) % 360;
      rot = (rot % 360 + 360) % 360;

      return  new Text("Hello").set({
              size: "S1",
              color: "green",
              font: "Arial",
               left: `${x}px`,
                top: `${y}px`,
                transform: {
          op: {
            name: "transform",
            transform: {
              static: true,
              keep: true,
              values: [
                "tx:-50%",
                "ty:-50%",
                `rotate(${rot}deg)`
              ]
            }
          }
        }
    })

   
  })
).render("#mount"); 

Animating items

You can also add animation using the animation key. You can then customize the animation in the generated code.

let nodes = [
  {
    op: "copy",
    animation: true
  }
];