Skip to content

Support n-ary relation (trigger-less) links #39

Open
@myedibleenso

Description

@myedibleenso

This may be related to #1.

Current Behavior

If a Link lacks a trigger, it is binarized:

  • /**
    * Draws this Link as a Relation annotation (no trigger/directionality
    * implied)
    * @private
    */
    _drawAsRelation() {
    let d = "";
    const leftHandle = this.leftHandle;
    const rightHandle = this.rightHandle;
    // Start/end points
    const pStart = {
    x: leftHandle.x,
    y: this.top
    ? leftHandle.y - this.config.linkHandlePadding
    : leftHandle.y + this.config.linkHandlePadding
    };
    const pEnd = {
    x: rightHandle.x,
    y: this.top
    ? rightHandle.y - this.config.linkHandlePadding
    : rightHandle.y + this.config.linkHandlePadding
    };
    const sameRow = leftHandle.row.idx === rightHandle.row.idx;
    // Width/position of the Link's label
    // (Always on the first row for multi-line Links)
    const textLength = this.linkLabel.length();
    const textY = this.getLineY(leftHandle.row);
    // Centre on the segment of the Link line on the first row, making sure
    // it doesn't overshoot the right row boundary
    let textCentre = sameRow
    ? (pStart.x + pEnd.x) / 2
    : (pStart.x + leftHandle.row.rw) / 2;
    if (textCentre + textLength / 2 > leftHandle.row.rw) {
    textCentre = leftHandle.row.rw - textLength / 2;
    }
    // Start preparing path string
    d += "M" + [pStart.x, pStart.y];
    // Left handle/label
    // Draw up to the level of the Link line, then position the left arg label
    const firstY = this.getLineY(leftHandle.row);
    let curveLeftX = pStart.x + this.config.linkCurveWidth;
    curveLeftX = Math.min(curveLeftX, leftHandle.row.rw);
    const curveLeftY = this.top
    ? firstY + this.config.linkCurveWidth
    : firstY - this.config.linkCurveWidth;
    d += "L" + [pStart.x, curveLeftY]
    + "Q" + [pStart.x, firstY, curveLeftX, firstY];
    const leftLabel = this.argLabels[this.handles.indexOf(leftHandle)];
    let leftLabelCentre = pStart.x;
    if (leftLabelCentre + leftLabel.length() / 2 > leftHandle.row.rw) {
    leftLabelCentre = leftHandle.row.rw - leftLabel.length() / 2;
    }
    if (leftLabelCentre - leftLabel.length() / 2 < 0) {
    leftLabelCentre = leftLabel.length() / 2;
    }
    leftLabel.move(leftLabelCentre, (pStart.y + firstY) / 2);
    // Right handle/label
    // Handling depends on whether or not the right handle is on the same
    // row as the left handle
    let finalY = firstY;
    if (!sameRow) {
    // Draw in Link line across the end of the first row, and all
    // intervening rows
    d += "L" + [leftHandle.row.rw, firstY];
    for (let i = leftHandle.row.idx + 1; i < rightHandle.row.idx; i++) {
    const thisRow = this.main.rowManager.rows[i];
    const lineY = this.getLineY(thisRow);
    d += "M" + [0, lineY]
    + "L" + [thisRow.rw, lineY];
    }
    finalY = this.getLineY(rightHandle.row);
    d += "M" + [0, finalY];
    }
    // Draw down from the main Link line on last row
    const curveRightX = pEnd.x - this.config.linkCurveWidth;
    const curveRightY = this.top
    ? finalY + this.config.linkCurveWidth
    : finalY - this.config.linkCurveWidth;
    d += "L" + [curveRightX, finalY]
    + "Q" + [pEnd.x, finalY, pEnd.x, curveRightY]
    + "L" + [pEnd.x, pEnd.y];
    const rightLabel = this.argLabels[this.handles.indexOf(rightHandle)];
    let rightLabelCentre = pEnd.x;
    if (rightLabelCentre + rightLabel.length() / 2 > rightHandle.row.rw) {
    rightLabelCentre = rightHandle.row.rw - rightLabel.length() / 2;
    }
    if (rightLabelCentre - rightLabel.length() / 2 < 0) {
    rightLabelCentre = rightLabel.length() / 2;
    }
    rightLabel.move(rightLabelCentre, (pEnd.y + finalY) / 2);
    // Arrowheads
    d += this._arrowhead(pStart)
    + this._arrowhead(pEnd);
    // Main label
    this.linkLabel.move(textCentre, textY);
    // Perform draw
    if (this.lastPathString !== d) {
    this.path.plot(d);
    this.lastPathString = d;
    }
    }

Expected behavior

n-ary trigger-less Links should be supported. We can mimic the approach followed to draw events (a Link with a trigger):

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions