Copy

Default copy

To use the filter, we use this:

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.

Here is complete generated example. In this example:

1. We generate array with length of 3.
2. We map this array and generate angles as multiples of 120 - 0, 120, 240 degress.
3. We use transform operation and rotate Wrapper instances by the specified amount.
4. We add Text element as a child of the wrapper.

new Wrapper()
  .set({
    width: "600px",
    height: "300px",
    justifyContent: "center",
    alignItems: "center",
    display: "flex",
    position: "relative",
    arrayMargin: {sides: ["left", "top"], value: "10rem"},
  })
  .add(
    Array.from({ length: 3 }).map((_, i) => {
      const angle = i * 120;
      return new Wrapper()
        .set({
          width: "30px",
          height: "30px",
          position: "absolute",
          transform: {
            op: {
              name: "transform",
              transform: {
                static: true,
                keep: true,
                values: [
                  `rotate(${angle}deg) translate(100px) rotate(${-angle}deg)`
                ]
              }
            }
          }
        })
        .add([
         new Text("Hello").set({
            size: "S1",
            color: "green",
            font: "Arial"
          })
        ]);
    })
  )
.render("#mount");