How to use the jointjs.util.breakText function in jointjs

To help you get started, we’ve selected a few jointjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ProcessMaker / modeler / src / components / nodes / task / task.vue View on Github external
'node.definition.name'(name) {
      const { width } = this.node.diagram.bounds;
      this.shape.attr('label/text', util.breakText(name, { width }));

      /* Update shape height if label text overflows */
      const labelHeight = this.shapeView.selectors.label.getBBox().height;
      const { height } = this.shape.size();

      if (labelHeight + labelPadding + topAndBottomMarkersSpace !== height) {
        const newHeight = Math.max(labelHeight + labelPadding + topAndBottomMarkersSpace, taskHeight);
        this.node.diagram.bounds.height = newHeight;
        this.shape.resize(width, newHeight);
        this.recalcMarkersAlignment();
      }
    },
  },
github ProcessMaker / modeler / src / components / nodes / subProcess / subProcess.vue View on Github external
'node.definition.name'(name) {
      const { width } = this.node.diagram.bounds;
      this.shape.attr('label/text', util.breakText(name, { width }));

      /* Update shape height if label text overflows */
      const labelHeight = this.shapeView.selectors.label.getBBox().height;
      const { height } = this.shape.size();

      if (labelHeight + labelPadding + topAndBottomMarkersSpace !== height) {
        const newHeight = Math.max(labelHeight + labelPadding + topAndBottomMarkersSpace, taskHeight);
        this.node.diagram.bounds.height = newHeight;
        this.shape.resize(width, newHeight);
        this.recalcMarkersAlignment();
      }
    },
    'node.definition.calledElement'(calledElement) {
github ProcessMaker / modeler / src / components / nodes / task / task.vue View on Github external
mounted() {
    this.shape = new TaskShape();
    let bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(bounds.width, bounds.height);
    this.shape.attr({
      body: {
        rx: 8,
        ry: 8,
      },
      label: {
        text: util.breakText(this.node.definition.get('name'), { width: bounds.width }),
        fill: 'black',
      },
    });

    this.shape.addTo(this.graph);
    this.shape.component = this;
  },
};
github ProcessMaker / modeler / src / components / nodes / subProcess / subProcess.vue View on Github external
mounted() {
    this.shape = new TaskShape();
    let bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(bounds.width, bounds.height);
    this.shape.attr({
      body: {
        rx: 8,
        ry: 8,
        strokeWidth: 4,
      },
      label: {
        text: util.breakText(this.node.definition.get('name'), { width: bounds.width }),
        fill: 'black',
      },
    });

    this.shape.addTo(this.graph);
    this.shape.component = this;
  },
};
github ProcessMaker / modeler / src / components / nodes / pool / poolUtils.js View on Github external
function createPool(node, graph) {
  const pool = new PoolShape();
  const bounds = node.diagram.bounds;
  pool.position(bounds.x, bounds.y);
  pool.resize(bounds.width, bounds.height);
  pool.attr('label/text', util.breakText(node.definition.get('name'), {
    width: bounds.width,
  }));
  pool.attr('body', {
    fill: poolColor,
    originalFill: poolColor,
  });
  pool.addTo(graph);
  return pool;
}
github ProcessMaker / modeler / src / components / nodes / textAnnotation / textAnnotation.vue View on Github external
updateNodeText(text) {
      const { height } = this.shape.findView(this.paperManager.paper).getBBox();
      const refPoints = `25 ${height} 3 ${height} 3 3 25 3`;
      const bounds = this.node.diagram.bounds;

      this.shape.position(bounds.x, bounds.y);
      this.shape.attr({
        body: { refPoints },
        label: {
          text: util.breakText(text, {
            width: maxTextAnnotationWidth,
          }),
          fill: 'black',
          textAnchor: 'left',
        },
      });

      this.paperManager.awaitScheduledUpdates()
        .then(() => {
          this.shape.resize(this.nodeWidth, this.calculateNewHeight(height, text, bounds.height));
          this.setShapeHighlight();
        });
    },
  },
github ProcessMaker / modeler / src / components / nodes / poolLane / poolLane.vue View on Github external
mounted() {
    this.shape = new shapes.standard.Rectangle();
    this.shape.set('type', 'PoolLane');
    const bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(bounds.width, bounds.height);

    this.shape.set('elementMove', false);
    this.shape.attr('body/cursor', 'default');
    this.shape.attr('body', {
      fill: poolColor,
      originalFill: poolColor,
    });
    this.shape.attr('label', {
      text: util.breakText(this.node.definition.get('name'), { width: bounds.height }),
      fill: 'black',
      transform: 'rotate(-90)',
      refX: labelWidth / 2,
    });

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

    if (!this.planeElements.includes(this.node.diagram)) {
      this.planeElements.push(this.node.diagram);
    }
  },
  beforeDestroy() {