​

Map has structure:

{"from": (x,y), "to": (x,y), "mapped":, "false"}

​

[1,2]

*/

let sourceData = ["FirstName", "LastName", "City", "State", "Zip", "Phone", "Email"];

let targetData = ["PersonID", "FamilyName", "GivenName", "MiddleName", "Street", "City", "StateCode", "Age", "MobileNumber", "E-Mail"];

let mappings = [];

// animate these mapping pairs

let pairs = [[0,2],[1,1],[2,5],[3,7],[4,null],[5,8]];

let autoMapping = false;

let currentIndex = 0;

let mappingInterval;

// streight horizontal to the right

let scx = -1000; // source curve constraint x

let scy = 400; // default source curve constraint x

// streight horizontal from the left

let tcx = 1000; // target curve constraint x

let tcy = -50;

​

function setup() {

  createCanvas(500, 500);

  textSize(12);

  let startY = 60;

  let gap = 40;

​

  // Initialize mappings (left to right, top to bottom)

  for (let i = 0; i < sourceData.length; i++) {

    mappings.push({ from: createVector(50, startY + i * gap), 

                   to: createVector(450, startY + i * gap), 

                   mapped: false });

  }

​

  // Create buttons

  let startButton = createButton('Start Auto Mapping');

  startButton.position(20, 460);

  startButton.mousePressed(toggleAutoMapping);

​

  let nextButton = createButton('Next Match');

  nextButton.position(180, 460);

  nextButton.mousePressed(nextMatch);

​

  let resetButton = createButton('Reset Automap');

  resetButton.position(340, 460);

  resetButton.mousePressed(resetMapping);

}

​

function draw() {

  background(245);

  drawDataElements();

  drawMappings();

}

​

function drawDataElements() {

  // Draw source data elements

  for (let i = 0; i < sourceData.length; i++) {

    fill('lightgreen');

    stroke('gray')

    strokeWeight(1);

    rect(10, 35 + i * 40, 100, 20, 5);

    fill('black');

    textAlign(RIGHT);

    textSize(12);

    noStroke();

    text(sourceData[i], 100, 50 + i * 40);

  }

​

  // Draw target data elements

  for (let i = 0; i < targetData.length; i++) {

    fill('lightblue');

    strokeWeight(1);

    stroke('gray')

    rect(390, 35 + i * 40, 100, 20, 5);

    fill('black');

    textAlign(LEFT);

    textSize(12);

    noStroke();

    text(targetData[i], 400, 50 + i * 40);

  }

}

​

function drawMappings() {

  for (let i = 0; i < currentIndex; i++) {

    if (mappings[i].mapped) {

      strokeWeight(.5);

      stroke('silver');

      line(mappings[i].from.x + 60, mappings[i].from.y-16, 

           mappings[i+2].to.x - 60, mappings[i+2].to.y-16);

      noFill();

      stroke('blue');

      strokeWeight(2);

      y1 = mappings[i].to.y-16;

      y2 = mappings[i+2].from.y-16;

      ydiff =  y2 - y1; 

      customCurve(scx, y1+ydiff, 

                  mappings[i].from.x + 60, y1, 

                  mappings[i+2].to.x - 60, y2, 

                  tcx, y2-ydiff, 1) 

    }

  }

​

  // Check for completion

  if (currentIndex >= mappings.length) {

    textSize(24);

    fill('green');

    text("Done with Match", 10, 450);

    // print(mappings);

    // noLoop();

  }

}

​

// this has the delay

function toggleAutoMapping() {

  autoMapping = !autoMapping;

  this.html(autoMapping ? 'Stop Auto Mapping' : 'Start Auto Mapping');

​

  // interval to wait in milliseconds

  // call nextMatch() every second

  if (autoMapping) {

    mappingInterval = setInterval(() => {

      nextMatch();

    }, 1000);

  } else {

    clearInterval(mappingInterval);

  }

}

​

function nextMatch() {

  if (currentIndex < mappings.length) {

    mappings[currentIndex].mapped = true;

    currentIndex++;

  }

}

​

function resetMapping() {

  currentIndex = 0;

  mappings.forEach(mapping => mapping.mapped = false);

  clearInterval(mappingInterval);

  autoMapping = false;

  select('button').html('Start Auto Mapping');

}

​

// Draw a curve with only the percent drawin

function customCurve(c1x, c1y, x1, y1, x2, y2, c2x, c2y, percent) {

  beginShape();

  for (let t = -0.01; t <= percent + 0.01; t += 0.01) {

    let v0 = createVector(c1x, c1y);

    let v1 = createVector(x1, y1);

    let v2 = createVector(x2, y2);

    let v3 = createVector(c2x, c2y);

    let x = curvePoint(v0.x, v1.x, v2.x, v3.x, t);

    let y = curvePoint(v0.y, v1.y, v2.y, v3.y, t);

    curveVertex(x, y);

  }

  endShape();

}

​

​

​