How to use the paper.Group function in paper

public paperjsDisplayAnimation() {
    // evacVelocities are the ---------> vectors attached to each ball
    // evacLabels are (e1 x,y) displayed on top of each ball
    // Old elements must be removed on various occassions, so we cannot return to early.

    if (this.evacVelocities == undefined) {
      this.evacVelocities = new Group();
      this.evacBalls = new Group();
      this.evacLabels = new Group();
    } else {
      this.evacVelocities.removeChildren();
      this.evacBalls.removeChildren();
      this.evacLabels.removeChildren();
    }

    if (this.visContainsAnimation == 0) { return; }

    for (var i = 0; i < this.numberOfEvacuees; i++) {
      this.evacVelocities.addChild(new Path.Line({ from: new Point(this.evacueesData[0][i][0], -this.evacueesData[0][i][1]), to: new Point(this.evacueesData[0][i][2], -this.evacueesData[0][i][3]), strokeColor: this.colors['fg'], strokeCap: 'round', dashArray: [2, 10], strokeWidth: this.velocitiesSize }));
    }

    for (var i = 0; i < this.numberOfEvacuees; i++) {
      this.evacBalls.addChild(new Path.Circle({ center: new Point(this.evacueesData[0][i][0], -this.evacueesData[0][i][1]), radius: this.ballsSize, fillColor: this.colors['doseN'] }));
    }
  }

function newVectorLayerItem(vl: VectorLayer): paper.Item {
  const item = new paper.Group();
  if (!vl) {
    return item;
  }

  const fromPathLayerFn = (layer: PathLayer) => {
    const { fillColor, fillAlpha, strokeColor, strokeAlpha } = layer;
    const { trimPathStart, trimPathEnd, trimPathOffset } = layer;
    // TODO: make sure this works with compound paths as well (Android behavior is different)
    const pathLength = layer.pathData ? layer.pathData.getPathLength() : 0;
    const dashArray = pathLength
      ? LayerUtil.toStrokeDashArray(trimPathStart, trimPathEnd, trimPathOffset, pathLength)
      : undefined;
    const dashOffset = pathLength
      ? LayerUtil.toStrokeDashOffset(trimPathStart, trimPathEnd, trimPathOffset, pathLength)
      : undefined;
    // TODO: import a compound path instead

t.forEach((char, index) => {
      if (char.type === 'space' || char.type === 'newline') {
        caretPos.x += settings.spaceWidth;

        // Allow line wrap on space
        if (caretPos.x > settings.wrapWidth || char.type === 'newline') {
          // Before wrapping, reverse the order of the chars.
          lines[cLine].reverseChildren();

          caretPos.x = 0;
          caretPos.y += settings.lineHeight;

          cLine++;
          lines.push(new Group());
        }
      } else {
        const data = {
          d: char.d,
          char: char.type,
          name: `letter-${char.type} - ${index}-${cLine}`,
          type: 'stroke',
        };

        // Create the compound path as a group to retain subpath data.
        const c = new Group();
        lines[cLine].insertChild(0, c);

        // Use CompoundPath as a simple parser to get the subpaths, then add
        // them to our group and set the details in the subpath.
        const tmpCompound = new CompoundPath(char.d);

function renderAlignmentMarks(position, radius, features) {
    // let renderer = getFeatureRenderer(typeString, setString);
    // let params = renderer.targetParams;
    // let prim = getPrimitive2D(renderer.targetPrimitiveType, renderer.targetPrimitiveSet);
    // let primParams = {};
    // for (let key in params) {
    //     primParams[key] = getDefaultValueForType(typeString, setString, params[key]);
    // }
    // primParams["position"] = position;
    // primParams["color"] = Colors.getDefaultFeatureColor(typeString, setString, Registry.currentLayer);
    // let rendered = prim(primParams);
    let alignmentmarkergroup = new paper.Group();

    for(let i in features){

        let feature = features[i];
        if(feature == null){
            continue;
        }
        if(calculateDistance(position, feature.getBounds().center)

public paperjsDisplayImage() {
    if (this.staticGeoms == undefined) {
      this.staticGeoms = new Group();
    } else {
      this.staticGeoms.removeChildren();
    }

    for (var key in this.rooms) {
      this.staticGeoms.addChild(new Path.Rectangle({ point: new Point(this.rooms[key]["x0"], -this.rooms[key]["y0"]), size: new Size(this.rooms[key]["width"], -this.rooms[key]["depth"]), strokeColor: this.colors['stroke'], strokeWidth: 0.2, fillColor: this.colors[this.rooms[key]["type_sec"]] }));
    }

    for (var i = 0; i < this.obstacles.length; i++) {
      this.staticGeoms.addChild(new Path.Rectangle({ point: new Point(this.obstacles[i]["x0"], -this.obstacles[i]["y0"]), size: new Size(this.obstacles[i]["width"], -this.obstacles[i]["depth"]), strokeColor: this.colors['obsts'], strokeWidth: this.wallsSize }));
    }

    if (this.labelsSize != 0) {
      for (var key in this.rooms) {
        this.staticGeoms.addChild(new PointText({ point: new Point(this.rooms[key]["x0"] + 10, -this.rooms[key]["y0"] - 30), fillColor: this.colors["fg"], content: this.rooms[key]["name"], fontFamily: 'Play', fontSize: this.labelsSize }));
      }

function newSplitCurveItem(info: SplitCurveInfo, cssScaling: number) {
  const group = new paper.Group();
  group.guide = true;

  const { splitPoint, segment1, segment2 } = info;
  const point1 = new paper.Point(segment1.point);
  const handleIn1 = new paper.Point(segment1.handleIn);
  const handleOut1 = new paper.Point(segment1.handleOut);
  const point2 = new paper.Point(segment2.point);
  const handleIn2 = new paper.Point(segment2.handleIn);
  const handleOut2 = new paper.Point(segment2.handleOut);
  const highlightedCurve = new paper.Path([
    new paper.Segment(point1, handleIn1, handleOut1),
    new paper.Segment(point2, handleIn2, handleOut2),
  ]);
  highlightedCurve.guide = true;
  highlightedCurve.strokeColor = '#3466A9';
  highlightedCurve.strokeScaling = false;

function newSnapGuideItem(info: SnapGuideInfo, cssScaling: number) {
  const group = new paper.Group({ guide: true });

  const newLineFn = (from: paper.Point, to: paper.Point) => {
    const line = new paper.Path.Line(from, to);
    line.guide = true;
    line.strokeScaling = false;
    line.strokeWidth = 1 / paper.view.zoom;
    line.strokeColor = 'red';
    return line;
  };

  info.guides.forEach(({ from, to }) => {
    group.addChild(newLineFn(new paper.Point(from), new paper.Point(to)));
  });

  const addToAngleFn = (point: paper.Point, angle: number) => {
    point = point.clone();

createInstance(type, props, internalInstanceHandle) {
    const { children, ...instanceProps } = props
    let instance

    switch (type) {
      case TYPES.TOOL:
        instance = new Tool(instanceProps)
        instance._applyProps = applyToolProps
        break
      case TYPES.LAYER:
        instance = new Layer(instanceProps)
        instance._applyProps = applyLayerProps
        break
      case TYPES.GROUP:
        instance = new Group(instanceProps)
        instance._applyProps = applyGroupProps
        break
      case TYPES.PATH:
        instance = new Path(instanceProps)
        instance._applyProps = applyPathProps
        break
      case TYPES.CIRCLE:
        instance = new Path.Circle(instanceProps)
        instance._applyProps = applyCircleProps
        break
      case TYPES.ELLIPSE:
        instance = new Path.Ellipse(instanceProps)
        instance._applyProps = applyEllipseProps
        break
      case TYPES.RECTANGLE:
        instance = new Path.Rectangle(instanceProps)

function newEditPathItem(path: paper.Path, info: EditPathInfo, cssScaling: number) {
  const group = new paper.Group();
  const scaleFactor = getRasterScaleFactor(cssScaling);

  const matrix = path.globalMatrix.prepended(
    new paper.Matrix(1 / cssScaling, 0, 0, 1 / cssScaling, 0, 0),
  );
  const addRasterFn = (raster: paper.Raster) => {
    raster.scale(scaleFactor, scaleFactor);
    group.addChild(raster);
    return raster;
  };
  const addLineFn = (from: paper.Point, to: paper.Point) => {
    const line = new paper.Path.Line(from, to);
    line.guide = true;
    line.strokeColor = '#aaaaaa';
    line.strokeWidth = 1 / paper.view.zoom;
    line.strokeScaling = false;