How to use the diagram-js/lib/util/SvgTransformUtil.translate function in diagram-js

const defaultFillColor = 'transparent';
    const defaultStrokeColor = 'black';
    const bottomBandHeight = heightOfBottomBands(element);

    let loopType = element.businessObject.loopType;
    let hasLoopMarker = [
      'Standard',
      'MultiInstanceSequential',
      'MultiInstanceParallel'
    ].indexOf(loopType) >= 0;
    let isCollapsed = element.collapsed;
    let offset = (isCollapsed && hasLoopMarker) ? 10 : 0;

    // draw sub choreography marker
    if (isCollapsed) {
      translate(
        drawRect(parentGfx, 14, 14, {
          fill: defaultFillColor,
          stroke: defaultStrokeColor
        }),
        element.width / 2 - 7.5 + offset,
        element.height - bottomBandHeight - 20
      );
      var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
        xScaleFactor: 1.5,
        yScaleFactor: 1.5,
        containerWidth: element.width,
        containerHeight: element.height,
        position: {
          mx: (element.width / 2 - 7.5 + offset) / element.width,
          my: (element.height - bottomBandHeight - 20) / element.height
        }

function renderExpandedStageLabel(p, element, align) {
    var name = getName(element);
    var textbox = renderLabel(p, name, { box: element, align: align, padding: 5 });

    // reset the position of the text box
    translate(textbox, STAGE_EDGE_OFFSET, 0);

    return textbox;
  }

'SubProcessMarker': function(parentGfx, element) {
      var markerRect = drawRect(parentGfx, 14, 14, 0, {
        strokeWidth: 1,
        fill: getFillColor(element, defaultFillColor),
        stroke: getStrokeColor(element, defaultStrokeColor)
      });

      // Process marker is placed in the middle of the box
      // therefore fixed values can be used here
      translate(markerRect, element.width / 2 - 7.5, element.height - 20);

      var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
        xScaleFactor: 1.5,
        yScaleFactor: 1.5,
        containerWidth: element.width,
        containerHeight: element.height,
        position: {
          mx: (element.width / 2 - 7.5) / element.width,
          my: (element.height - 20) / element.height
        }
      });

      drawMarker('sub-process', parentGfx, markerPath, {
        fill: getFillColor(element, defaultFillColor),
        stroke: getStrokeColor(element, defaultStrokeColor)
      });

// The pointer-events attribute is needed to allow clicks on the polygon
    // which otherwise would be prevented by the parent node ('djs-visual').
    var polygon = drawPolygon(p, polygonPoints, {
      fill: 'white',
      stroke: 'black',
      strokeWidth: 2,
      fillOpacity: 0.95,
      'pointer-events': 'all'
    });

    // make sure the textbox is visually on top of the polygon
    textBox.parentNode.insertBefore(polygon, textBox);

    // reset the position of the text box
    translate(textBox, 25, -height + 5);

    return textBox;
  }

}
      });

      let path = self.path = svgCreate('path');

      svgAttr(path, {
        d: textPathData,
        strokeWidth: 2,
        stroke: getStrokeColor(element)
      });

      svgAppend(gfx, path);

      svgAppend(defaultLayer, gfx);

      translate(gfx, element.x, element.y);
    }

    if (is(element, TEXTANNOTATION) ||
      element.labelTarget) {
      canvas.addMarker(element, MARKER_HIDDEN);
    } else if (
      element.type.includes(ACTOR) ||
      element.type.includes(WORKOBJECT) ||
      element.type.includes(ACTIVITY) ||
      element.type.includes(GROUP)) {
      canvas.addMarker(element, MARKER_LABEL_HIDDEN);
    }
  });

'StageMarker': function(p, element) {
      var markerRect = drawRect(p, 14, 14, 0, {
        strokeWidth: 1,
        stroke: 'black'
      });

      translate(markerRect, element.width / 2 - 7, element.height - 17);

      var path = isCollapsed(element) ? 'MARKER_STAGE_COLLAPSED' : 'MARKER_STAGE_EXPANDED';

      var stagePath = pathMap.getScaledPath(path, {
        xScaleFactor: 1.5,
        yScaleFactor: 1.5,
        containerWidth: element.width,
        containerHeight: element.height,
        position: {
          mx: (element.width / 2 - 7) / element.width,
          my: (element.height - 17) / element.height
        }
      });

      drawPath(p, stagePath);
    },

}
      });

      var path = self.path = svgCreate('path');

      svgAttr(path, {
        d: textPathData,
        strokeWidth: 2,
        stroke: getStrokeColor(element)
      });

      svgAppend(gfx, path);

      svgAppend(defaultLayer, gfx);

      translate(gfx, element.x, element.y);
    }

    if (is(element, 'bpmn:TextAnnotation') ||
        element.labelTarget) {
      canvas.addMarker(element, MARKER_HIDDEN);
    } else if (is(element, 'bpmn:Task') ||
               is(element, 'bpmn:CallActivity') ||
               is(element, 'bpmn:SubProcess') ||
               is(element, 'bpmn:Participant')) {
      canvas.addMarker(element, MARKER_LABEL_HIDDEN);
    }
  });

}
      });

      var path = self.path = svgCreate('path');

      svgAttr(path, {
        d: textPathData,
        strokeWidth: 2,
        stroke: getStrokeColor(element)
      });

      svgAppend(gfx, path);

      svgAppend(defaultLayer, gfx);

      translate(gfx, element.x, element.y);
    }

    if (is(element, TEXTANNOTATION) ||
      element.labelTarget) {
      canvas.addMarker(element, MARKER_HIDDEN);
    } else if (
      element.type.includes(ACTOR) ||
      element.type.includes(WORKOBJECT) ||
      element.type.includes(ACTIVITY) ||
      element.type.includes(GROUP)) {
      canvas.addMarker(element, MARKER_LABEL_HIDDEN);
    }
  });

'PlanningTableMarker': function(p, element, position) {
      var planningTableRect = drawRect(p, 30, 24, 0, {
        strokeWidth: 1.5,
        stroke: 'black'
      });

      translate(planningTableRect, element.width / 2 - 15, -17);

      var isCollapsed = isPlanningTableCollapsed(element);

      var marker = isCollapsed ? 'MARKER_PLANNING_TABLE_COLLAPSED' : 'MARKER_PLANNING_TABLE_EXPANDED';

      var stagePath = pathMap.getScaledPath(marker, {
        xScaleFactor: 1.5,
        yScaleFactor: 1.5,
        containerWidth: element.width,
        containerHeight: element.height,
        position: {
          mx: (element.width / 2 - 15) / element.width,
          my: (-17) / element.height
        }
      });