How to use the jointjs.shapes.standard function in jointjs

configureResize() {
      this.shape.listenTo(this.paper, 'element:pointerup', cellView => {
        if (cellView.model.component && cellView.model.component === this) {
          /* Resize limits must be re-calculated if the the pool or lane is moved */
          this.calculateElementLimits();
        }
      });

      const pointBottomRight = new shapes.standard.EmbeddedImage();
      const pointBottomLeft = new shapes.standard.EmbeddedImage();
      const pointTopRight = new shapes.standard.EmbeddedImage();
      const pointTopLeft = new shapes.standard.EmbeddedImage();

      this.anchorPoints = [
        pointBottomRight,
        pointBottomLeft,
        pointTopRight,
        pointTopLeft,
      ];

      const { x, y, width, height } = this.shape.getBBox();

      this.anchorPoints.forEach(point => {
        point.set('isDrag', true);
        point.set('previousPosition', point.position());

configureResize() {
      this.shape.listenTo(this.paper, 'element:pointerup', cellView => {
        if (cellView.model.component && cellView.model.component === this) {
          /* Resize limits must be re-calculated if the the pool or lane is moved */
          this.calculateElementLimits();
        }
      });

      const pointBottomRight = new shapes.standard.EmbeddedImage();
      const pointBottomLeft = new shapes.standard.EmbeddedImage();
      const pointTopRight = new shapes.standard.EmbeddedImage();
      const pointTopLeft = new shapes.standard.EmbeddedImage();

      this.anchorPoints = [
        pointBottomRight,
        pointBottomLeft,
        pointTopRight,
        pointTopLeft,
      ];

      const { x, y, width, height } = this.shape.getBBox();

      this.anchorPoints.forEach(point => {
        point.set('isDrag', true);
        point.set('previousPosition', point.position());
      });

mounted() {
    this.shape = new shapes.standard.Link();
    this.shape.connector('rounded', { radius: 5 });
    this.createLabel();

    const conditionExpression = this.node.definition.conditionExpression;
    if (conditionExpression) {
      this.label = conditionExpression.body;
    }

    this.shape.addTo(this.graph);
    this.shape.component = this;
  },
};

import { dia, shapes } from 'jointjs';

const iconSize = 18;

export default dia.Element.define('processmaker.components.nodes.gateway.Shape', {
  markup: [
    ...shapes.standard.Polygon.prototype.markup,
    { tagName: 'image', selector: 'image' },
  ],
  attrs: {
    body: {
      strokeWidth: 2,
      stroke: '#000000',
      refPointsKeepOffset: '40,0, 80,40, 40,80, 0,40',
      fill: '#FFFFFF',
    },
    label: {
      textVerticalAnchor: 'top',
      textAnchor: 'middle',
      refX: '50%',
      refY: '50',
      fontSize: 14,
      fill: '#333333',

import { shapes, util } from 'jointjs';
import { markersMarkup, markersAttrs } from '@/mixins/hasMarkers';

export default shapes.standard.Circle.extend({

  markup: [{
    tagName: 'circle',
    selector: 'body',
  },{
    tagName: 'circle',
    selector: 'body2',
  }, {
    tagName: 'text',
    selector: 'label',
  }, {
    tagName: 'image',
    selector: 'image',
  },
  markersMarkup('topLeft'),
  markersMarkup('topCenter'),

this.crownConfig.forEach(({ id, title, icon, clickHandler }) => {
        const button = new shapes.standard.EmbeddedImage();
        this.buttons.push(button);

        button.set('onClick', clickHandler);
        button.set('elementMove', false);
        button.attr({
          root: {
            display: 'none',
            'data-test': id,
            'data-title': title || '',
          },
          body: {
            fill: 'none',
            stroke: 'none',
            opacity: 0.8,
            cursor: 'pointer',
          },

import { shapes, util } from 'jointjs';
import { markersMarkup, markersAttrs } from '@/mixins/hasMarkers';

export default shapes.standard.Circle.extend({

  markup: [{
    tagName: 'circle',
    selector: 'body',
  }, {
    tagName: 'text',
    selector: 'label',
  }, {
    tagName: 'image',
    selector: 'image',
  },
  markersMarkup('topLeft'),
  markersMarkup('topCenter'),
  markersMarkup('topRight'),
  markersMarkup('bottomLeft'),
  markersMarkup('bottomCenter'),

import { shapes, util } from 'jointjs';

export default shapes.standard.Circle.extend({

  markup: [{
    tagName: 'circle',
    selector: 'body',
  },{
    tagName: 'circle',
    selector: 'body2',
  }, {
    tagName: 'text',
    selector: 'label',
  }, {
    tagName: 'image',
    selector: 'image',
  }],

  defaults: util.deepSupplement({

mounted() {
    this.shape = new shapes.standard.Link({ router: { name: 'normal' } });
    this.shape.attr({
      line: {
        stroke: 'black',
        strokeWidth: '4',
        strokeLinecap: 'round',
        strokeDasharray: '1, 8',
        strokeDashoffset: '5',
        targetMarker: {
          'type': 'image',
          'xlink:href': associationHead,
          'width': 20,
          'height': 20,
          'y': -10,
        },
        sourceMarker: {
          'type': 'image',

cy: 18,
        r: 15,
        strokeWidth: 0.85,
        stroke: '#212529',
        fill: '#FFF',
      },
      image: {
        refX: 5,
        refY: 5,
        ref: 'circle',
        width: 26,
        height: 26,
      },
    },

  }, shapes.standard.Circle.prototype.defaults),
});