How to use the konva.Group function in konva

export default (winW: number, winH: number) => {
    const replayAreaValues = {
        x: 0.15,
        y: 0.51,
        w: 0.5,
    };
    if (!globals.lobby.settings.get('showKeldonUI')) {
        replayAreaValues.x = 0.01;
        replayAreaValues.y = 0.49;
        replayAreaValues.w = 0.4;
    }

    globals.elements.replayArea = new Konva.Group({
        x: replayAreaValues.x * winW,
        y: replayAreaValues.y * winH,
        width: replayAreaValues.w * winW,
        height: 0.27 * winH,
    });

    // The thin black rectangle that the replay slider slides on
    const replayBarValues = {
        x: globals.lobby.settings.get('showKeldonUI') ? 0.01 : 0,
        y: 0.0425,
        w: globals.lobby.settings.get('showKeldonUI') ? 0.481 : replayAreaValues.w,
        h: 0.01,
    };
    globals.elements.replayBar = new Konva.Rect({
        x: replayBarValues.x * winW,
        y: replayBarValues.y * winH,

drawJobBox(node, hovered = false) {
    const group = new Konva.Group({
      x: node.x_offset,
      y: node.y_offset,
      id: `jobBox${node.job.id}`
    });

    const statusIcon = new Konva.Path({
      x: 10,
      y: 10,
      scaleX: 0.9,
      scaleY: 0.9,
      data: this.svgStatuses[node.job.status].data,
      fill: this.svgStatuses[node.job.status].fill
    });
    // END STATUS ICON

    const jobText = this.fittingString(this.layerJobBoxes.getContext(), node.job.name, this.pgraph.boxWidth - 120);

const drawClueArea = () => {
    // Put the clue area directly below the play stacks, with a little bit of spacing
    clueAreaValues = {
        x: playAreaValues.x,
        y: playAreaValues.y + playAreaValues.h! + 0.005,
        w: playAreaValues.w,
        h: 0.23,
    };
    if (globals.variant.showSuitNames) {
        clueAreaValues.y += 0.03;
    }
    // In BGA mode, we can afford to put a bit more spacing to make it look less packed together
    if (!globals.lobby.settings.get('showKeldonUI')) {
        clueAreaValues.y += 0.02;
    }
    globals.elements.clueArea = new Konva.Group({
        x: clueAreaValues.x * winW,
        y: clueAreaValues.y * winH,
        width: clueAreaValues.w! * winW,
    });

    // Player buttons
    const playerButtonW = 0.08;
    const playerButtonSpacing = 0.0075;
    const numPlayers = globals.playerNames.length;

    // This is the normal button group, which does not include us
    globals.elements.clueTargetButtonGroup = new ButtonGroup({});
    {
        const totalPlayerButtons = numPlayers - 1;
        let totalPlayerWidth = playerButtonW * totalPlayerButtons;
        totalPlayerWidth += playerButtonSpacing * (totalPlayerButtons - 1);

const drawClueAreaDisabled = () => {
    // We fade the clue area and draw a rectangle on top of it when there are no clues available
    globals.elements.clueAreaDisabled = new Konva.Group({
        x: clueAreaValues.x * winW,
        y: clueAreaValues.y * winH,
        width: clueAreaValues.w! * winW,
    });

    // A transparent rectangle to stop clicks
    const rect = new Konva.Rect({
        width: clueAreaValues.w! * winW,
        height: clueAreaValues.h! * winH,
        listening: true, // It must listen or it won't stop clicks
    });
    globals.elements.clueAreaDisabled.add(rect);

    const spacing = {
        x: 0.075,
        y: 0.03,

const drawHypotheticalArea = () => {
    // The "Hypothetical" circle that shows whether or not we are currently in a hypothetical
    globals.elements.hypoCircle = new Konva.Group({
        x: clueAreaValues.x * winW,
        y: clueAreaValues.y * winH,
        visible: false,
    });
    globals.layers.get('UI')!.add(globals.elements.hypoCircle);

    const circle = new Konva.Ellipse({
        x: (clueAreaValues.w! * 0.5) * winW,
        y: 0.105 * winH,
        radiusX: clueAreaValues.w! * 0.4 * winW,
        radiusY: 0.05 * winH,
        fill: 'black',
        opacity: 0.5,
        stroke: 'black',
        strokeWidth: 4,
    });

InCHlib.prototype._draw_vertical_path = function (path_id, x1, y1, x2, y2, left_distance, right_distance) {
    const self = this;
    const path_group = new Konva.Group({});
    const path = self.objects_ref.node.clone({
      points: [
        x1,
        left_distance,
        x1,
        y1,
        x2,
        y2,
        x2,
        right_distance,
      ],
      id: `col${path_id}`,
    });
    const path_rect = self.objects_ref.node_rect.clone({
      x: x2 - 1,
      y: y1 - 1,

makeGroup(draggable: boolean): Konva.Group {
        return new Konva.Group({
            x: 120,
            y: 40,
            draggable: draggable
        });
    }

x: (currentPlayerAreaValues.w * 0.75) + currentPlayerAreaValues.spacing,
        w: (currentPlayerAreaValues.w * 0.25) - currentPlayerAreaValues.spacing,
        h: currentPlayerAreaValues.h,
        spacing: 0.01,
    };
    const rect2 = new Konva.Rect({
        x: arrowValues.x * winW,
        width: arrowValues.w * winW,
        height: currentPlayerAreaValues.h * winH,
        cornerRadius: 0.01 * winW,
        fill: 'black',
        opacity: 0.2,
    });
    globals.elements.currentPlayerArea.add(rect2);

    globals.elements.currentPlayerArrow = new Konva.Group({
        x: (arrowValues.x + (arrowValues.w / 2)) * winW,
        y: (currentPlayerAreaValues.h / 2) * winH,
        offset: {
            x: (arrowValues.w / 2) * winW,
            y: (currentPlayerAreaValues.h / 2) * winH,
        },
    });
    globals.elements.currentPlayerArea.add(globals.elements.currentPlayerArrow);

    const arrowBorder = new Konva.Arrow({
        points: [
            arrowValues.spacing * winW,
            (arrowValues.h / 2) * winH,
            (arrowValues.w - arrowValues.spacing) * winW,
            (arrowValues.h / 2) * winH,
        ],

const createBoundingBox = (
  {
    x,
    y,
    width = BOUNDING_BOX_DEFAULTS.width,
    height = BOUNDING_BOX_DEFAULTS.height,
    text,
    id,
    color = colors(id)
  },
  onDragMove,
  onDragEnd,
  onDragging
) => {
  const group = new Konva.Group({ x, y, draggable: true, id, width, height })

  const { stroke, strokeWidth, opacity } = BOUNDING_BOX_DEFAULTS

  const rect = new Konva.Rect({
    x: 0,
    y: 0,
    width,
    height,
    stroke,
    strokeWidth,
    fill: color,
    opacity
  })
  group.add(rect)

  const topLeft = createAnchor({ x: 0, y: 0, name: ANCHOR_NAMES.topLeft })