Update with index.html entry point for easier viewing

.gitignore

@@ -0,0 +1 @@
+node_modules/

3d_graph/canvas/background.js

@@ -0,0 +1,14 @@
+let img;
+
+export function drawBackground(context) {
+  img = new Image();
+  img.onload = function() {
+    context.drawImage(img, 0, -140, 800, 800);
+  };
+
+  img.src = './background.jpg';
+}
+
+export function refreshBackground(context) {
+  context.drawImage(img, 0, -140, 800, 800);
+}

3d_graph/canvas/buttons.js

@@ -0,0 +1,108 @@
+export const addPointButton = {
+  rect: {
+    x: 820,
+    y: 60,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 855,
+    y: 80,
+    text: 'Add Point',
+    alt: 'Adding...',
+  },
+  clicked: false
+};
+
+export const addPathButton = {
+  rect: {
+    x: 820,
+    y: 20,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 855,
+    y: 40,
+    text: 'Add Path',
+    alt: 'Adding...',
+  },
+  clicked: false
+};
+
+export const resetButton = {
+  rect: {
+    x: 820,
+    y: 100,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 870,
+    y: 120,
+    text: 'Reset',
+  },
+  clicked: false,
+};
+
+export const exportButton = {
+  rect: {
+    x: 820,
+    y: 300,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 870,
+    y: 320,
+    text: 'Export',
+  },
+  clicked: false,
+};
+
+export const importButton = {
+  rect: {
+    x: 820,
+    y: 350,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 870,
+    y: 370,
+    text: 'Import',
+  },
+  clicked: false,
+};
+
+export const setStartButton = {
+  rect: {
+    x: 820,
+    y: 210,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 870,
+    y: 230,
+    text: 'Set Start',
+    alt: 'Choose Start'
+  },
+  clicked: false
+};
+
+export const setEndButton = {
+  rect: {
+    x: 820,
+    y: 250,
+    width: 140,
+    height: 30
+  },
+  title: {
+    x: 870,
+    y: 270,
+    text: 'Set End',
+    alt: 'Choose End'
+  },
+  clicked: false,
+};

3d_graph/canvas/drawButton.js

@@ -0,0 +1,24 @@
+export function drawButton(context, button) {
+  context.save();
+  context.beginPath();
+  context.fillStyle = '#dddddd';
+  context.strokeStyle = '#cdcdcd';
+  context.rect(
+    button.rect.x,
+    button.rect.y,
+    button.rect.width,
+    button.rect.height
+  );
+  context.fill();
+  context.lineWidth = 2;
+  context.strokeStyle = '#cdcdcd';
+  context.stroke();
+  context.closePath();
+
+  context.fillStyle = "#333";
+  context.font = '18px serif';
+
+  const title = !button.clicked ? button.title.text : button.title.alt;
+  context.fillText(title, button.title.x, button.title.y);
+  context.restore();
+}

3d_graph/canvas/drawMenu.js

@@ -0,0 +1,5 @@
+import { drawButton } from './drawButton.js';
+
+export function drawMenu(buttons, context) {
+  buttons.forEach(drawButton.bind(null, context));
+}

3d_graph/canvas/drawPoints.js

@@ -0,0 +1,20 @@
+export function drawPoint(context, point) {
+  context.beginPath();
+  context.strokeStyle = (point.start || point.end) ? 'yellow' : point.highlight ? 'black' : 'red';
+  context.fillStyle = 'white';
+  context.arc(point.x, point.y, 5, 0, Math.PI * 2, true); // Outer circle
+  context.fill();
+  context.stroke();
+}
+
+export function drawPoints(context, points) {
+  context.save();
+
+  context.fillStyle = "blue"
+  context.strokeStyle = "red";
+  context.lineWidth = 3;
+
+  points.forEach(drawPoint.bind(null, context));
+
+  context.restore();
+}

3d_graph/canvas/drawSegments.js

@@ -0,0 +1,32 @@
+export function drawSegments(mousePos, segments, context) {
+  if (!segments.length) {
+    return;
+  }
+
+  console.log(`Drawing ${segments.length} segments`);
+
+  const {x, y} = mousePos;
+  context.save();
+  context.lineWidth = 5;
+  context.lineCap = "round";
+  context.strokeStyle = "pink";
+
+  segments.forEach((segment) => {
+    context.beginPath();
+    context.moveTo(segment.start.x, segment.start.y);
+
+    segment.intermediates.forEach((intermediate) => {
+      context.lineTo(intermediate.x, intermediate.y);
+    });
+
+    const end = segment.end || {
+      x,
+      y
+    };
+
+    context.lineTo(end.x, end.y);
+    context.stroke();
+  });
+
+  context.restore();
+}

3d_graph/canvas/handlers/onAddSegmentHandler.js

@@ -0,0 +1,70 @@
+import { isInside } from '../isInside.js';
+
+let selectedPoint;
+
+function getPointUnderCursor(points, mousePos) {
+  return points.find((point) => {
+    const rect = {
+      x: point.x - 2.5,
+      y: point.y - 2.5,
+      width: 8,
+      height: 8
+    };
+
+    return isInside(mousePos, rect);
+  });
+}
+
+function highlightFirstPointOfSegment(mousePos, points) {
+  const pointUnderCursor = getPointUnderCursor(points, mousePos);
+
+  if (!pointUnderCursor) {
+    return null;
+  }
+
+  selectedPoint = true;
+
+  return {
+    start: pointUnderCursor,
+    intermediates: [],
+    end: null
+  };
+}
+
+function attemptToJoinToOpenSegment(mousePos, points) {
+  const pointUnderCursor = getPointUnderCursor(points, mousePos);
+
+  if (!pointUnderCursor) {
+    return null;
+  }
+
+  return pointUnderCursor;
+}
+
+export function onAddSegmentHandler(mousePos, segments, points) {
+  if (!selectedPoint) {
+    const segment = highlightFirstPointOfSegment(mousePos, points);
+
+    if (segment) {
+      console.log(`Added segment`);
+      segments.push(segment);
+    }
+
+    return  segments;
+  }
+
+  const point = attemptToJoinToOpenSegment(mousePos, points);
+
+  if (point) {
+    console.log(`Added segment end`);
+    segments[segments.length - 1].end = point;
+    selectedPoint = false;
+  } else {
+    console.log(`Added segment middle`);
+    segments[segments.length - 1].intermediates.push({
+      ...mousePos
+    });
+  }
+
+  return segments;
+}

3d_graph/canvas/handlers/onClickHandler.js

@@ -0,0 +1,36 @@
+
+import { drawPoints } from '../drawPoints.js';
+import { isInside } from '../isInside.js';
+
+function alreadyAtPoint(points, mousePos) {
+  return points.find((point, index) => {
+    const rect = {
+      x: point.x - 2.5,
+      y: point.y - 2.5,
+      width: 8,
+      height: 8
+    };
+
+    return isInside(mousePos, rect);
+  });
+}
+
+export function onAddPointHandler(mousePos, points, context) {
+  if (alreadyAtPoint(points, mousePos)) {
+    return points;
+  }
+
+  const {x, y} = mousePos;
+
+  console.log(`Add point Click at X: ${x} Y: ${y}`, 10, 20);
+
+  points.push({
+    x,
+    y,
+    highlight: false,
+  });
+
+  drawPoints(context, points);
+
+  return points;
+}

3d_graph/canvas/handlers/onSetEndHandler.js

@@ -0,0 +1,40 @@
+
+import { drawPoints } from '../drawPoints.js';
+import { isInside } from '../isInside.js';
+
+function alreadyAtPoint(points, mousePos) {
+  return points.find((point, index) => {
+    const rect = {
+      x: point.x - 2.5,
+      y: point.y - 2.5,
+      width: 8,
+      height: 8
+    };
+
+    return isInside(mousePos, rect);
+  });
+}
+
+export function onSetEndHandler(mousePos, points, context) {
+  const hit = alreadyAtPoint(points, mousePos);
+
+  if (!hit) {
+    return points
+  }
+
+  const {x, y} = mousePos;
+
+  console.log(`End selected at X: ${x} Y: ${y}`, 10, 20);
+
+  points = points.map((point, index) => {
+    point.end = false;
+
+    return point;
+  });
+
+  hit.end = true;
+
+  drawPoints(context, points);
+
+  return points;
+}