Overlap detection inside the Composer app.

composer-overlap-example.js

// This snippet is an example on how the detecting overlaping annotations
// was implemented inside the Substance Composer app.

function annotate(type) {
  // Check for existing annotation
  var sel = this.surface.selection();

  if (!sel) return;

  if (_.include(["em", "str"], type)) {
    var types = ["em", "str"];
  } else {
    var types = ["idea", "blur", "doubt"];
  }

  var a = this.surface.getAnnotations(sel, types)[0];

  // Overlap
  if (a) {
    var start = sel[0];
    var end = start + sel[1];
    var aStart = a.pos[0];
    var aEnd = aStart + a.pos[1];

    if (start <= aStart && end >= aEnd) {
      // Full overlap
      if (a.type === type) {
        this.surface.deleteAnnotation(a.id);  
      } else {
        console.log('turning ', a.type, 'into ', type);
        this.surface.updateAnnotation({
          id: a.id,
          type: type
        });
      }
    } else {
      if (start <= aStart) {
        // Partial overlap left-hand side
        this.surface.updateAnnotation({
          id: a.id,
          pos: [end, a.pos[1] - (end - a.pos[0])],
        });
      } else if (start < aEnd && end >= aEnd) {
        // Partial overlap right-hand side
        this.surface.updateAnnotation({
          id: a.id,
          pos: [a.pos[0], start - aStart]
        });
      } else {
        // In the middle -> delete it
        this.surface.deleteAnnotation(a.id);
      }

      // If types differ create the new annotation
      if (a.type !== type) {
        console.log('inserting new annotation..');
        this.insertAnnotation(type, sel);
      }
    }
  } else {
    // Insert new annotation
    this.insertAnnotation(type, sel);
  }

  // this.removeToggles();
  this.renderToggles(sel);
}