How to use the jointjs.util function in jointjs

mounted() {
    this.shape = new joint.shapes.standard.Polyline();
    let bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(this.nodeWidth, bounds.height);
    this.shape.attr({
      body: {
        refPoints: '25 10 3 10 3 3 25 3',
      },
      label: {
        text: joint.util.breakText(this.node.definition.get('text'), {
          width: bounds.width,
        }),
        fill: 'black',
        yAlignment: 'left',
        xAlignment: 'left',
        refX: '5',
        refY: '5',
      },
    });


    this.shape.on('change:position', (element, position) => {
      this.node.diagram.bounds.x = position.x;
      this.node.diagram.bounds.y = position.y;
      // This is done so any flows pointing to this task are updated
      this.$emit(

mounted() {
    this.shape = new joint.shapes.processmaker.modeler.bpmn.pool();
    const bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(bounds.width, bounds.height);

    this.shape.attr('label/refX', labelWidth / 2);
    this.shape.attr('polyline/refX', labelWidth);
    this.shape.attr('label/text', joint.util.breakText(this.node.definition.get('name'), {
      width: bounds.width,
    }));

    this.shape.on('change:position', (element, position) => {
      this.node.diagram.bounds.x = position.x;
      this.node.diagram.bounds.y = position.y;
      // This is done so any flows pointing to this task are updated
      this.$emit(
        'move',
        {
          x: bounds.x,
          y: bounds.y,
        },
        element,
      );
    });

updateShape() {
      const bounds = this.node.diagram.bounds;
      this.shape.position(bounds.x, bounds.y);
      this.shape.resize(bounds.width, bounds.height);
      this.shape.attr({
        label: {
          text: joint.util.breakText(this.node.definition.get('name'), {
            width: bounds.width,
          }),
          fill: 'black',
        },
      });
      // Alert anyone that we have moved
    },
    handleClick() {

links.map((link: any) => {
      link.transition("attrs/line/stroke", color, {
        delay: 0,
        duration: transitionDuration,
        timingFunction: joint.util.timing.linear,
        valueFunction: joint.util.interpolate.hexColor
      });
    });
  }

import joint from 'jointjs';

import DefaultShape from '../../../../core/graph/DefaultShape';
import NodeTemplate from '../../../../core/graph/NodeTemplate';
import * as config from '../../config';

const NAME = 'Union';
const NODE_TYPE = 'spark.union';
const MODEL = DefaultShape.extend({
  defaults: joint.util.deepSupplement({
    type: NODE_TYPE,
    attrs: {
      text : { text: NAME },
      rect : {
        fill: config.RDD_NODES_FILL
      }
    },
    dfGui: {
      description: NAME,
    },
    ports: {
      items: [
        {
          id: 'in1',
          group: 'in'
        },

wholeState.getIn(['opened', wholeState.get('copied_from'), 'history', 'present', 'cells']).forEach(cell => {
    if(copiedCells.has(cell.get('id'))){
      let newId = jointjs.util.uuid();
      idTranslation[cell.get('id')] = newId;
      pastingCells.push(cell.update('position', position => position.set('x', position.get('x') + 20).set('y',  position.get('y') + 20)).set('id', newId));
    }
  });

},
  {
    name: 'schema',
    description: 'A pyspark.sql.types.DataType or a datatype string or a list of column names, default is None. The data type string format equals to pyspark.sql.types.DataType.simpleString, except that top level struct type can omit the struct<> and atomic types use typeName() as their format, e.g. use byte instead of tinyint for pyspark.sql.types.ByteType. We can also use int as a short name for IntegerType.',
    required: false,
    template: 'schema=None',
    selectionStart: '7',
    selectionEnd: 'all'
  },
];

///////////////////////////////////////////////////////////
const FULL_NODE_TYPE = 'spark.' + NODE_TYPE;
const ports = [...generatePorts('in', NO_INPUT_NODES), ...generatePorts('out', NO_OUTPUT_NODES)];
const MODEL = DefaultShape.extend({
  defaults: joint.util.deepSupplement({
    type: FULL_NODE_TYPE,
    size:{
      width: WIDTH
    },
    attrs: {
      text : { text: NAME },
      rect : {
        width: WIDTH,
        fill: config.DF_NODES_FILL
      }
    },
    dfGui: {
      description: NAME,
    },
    ports: {
      items: ports

import joint from 'jointjs';

import DefaultShape from '../../../../core/graph/DefaultShape';
import NodeTemplate from '../../../../core/graph/NodeTemplate';
import * as config from '../../config';

const NAME = 'Count';
const NODE_TYPE = 'spark.count';
const MODEL = DefaultShape.extend({
  defaults: joint.util.deepSupplement({
    type: NODE_TYPE,
    attrs: {
      text : { text: NAME },
      rect : {
        fill: config.RDD_NODES_FILL
      }
    },
    dfGui: {
      description: NAME,
    },
    ports: {
      items: [
        {
          id: 'in',
          group: 'in'
        }

r: 4,
        magnet: true
      }
    }
  }
};

const NAME = 'DefaultShape';
const NODE_TYPE = 'dfGui.defaultShape';
const WIDTH = parseInt(cssVariables.nodeDefaultWidth);
const HEIGHT = parseInt(cssVariables.nodeDefaultHeight);
const MODEL = joint.shapes.basic.Generic.extend({
  markup: '',
  portMarkup: '