Source: Plot.js

  1. import { unseededRandomHex } from "./Random.js";
  2. import { hexToDec } from "./utils.js";
  3. import { decToHex } from "./utils.js";
  4. import { Line } from "./Line.js";
  5. import { Circle } from "./Circle.js";
  6. import { Path } from "./Path.js";
  7. import { SVGBuilder } from "./SVGBuilder.js";
  8. import { Point } from "./Point.js";
  10. let plotContext = null;
  12. /**
  13.  * @class
  14.  * Plot is an object that is able to create, display and download SVG documents.
  15.  */
  16. export class Plot {
  17.   /**
  18.    * @param {object} [options] - An object containing configuration for Plot.
  19.    * @param {object} [options.size] - An object with width and height properties to be used as dimensions of the Plot.
  20.    * @param {number} [options.size.width=100] - The width of the Plot.
  21.    * @param {number} [options.size.height=100] - The height of the Plot.
  22.    * @param {string} [options.title = "Untitled"] - The title of the Plot.
  23.    * @param {string} [options.units = "mm"] - The units of measurement to be used (i.e. "mm" or "in").
  24.    * @param {string} [options.backgroundColor = "transparent"] - The background colour of the plot, as a hex value or HTML color name.
  25.    * @param {number} [options.seed] - The seed to be used for the Plot. Defaults to an 8 digit hexadecimal integer.
  26.    * @param {string} [options.stroke = "black"] - The foreground colour of the plot, as a hex value or HTML color name.
  27.    * @param {number} [options.strokeWidth = 1] - The line width of the Plot. Defaults to 1 unit. (1mm)
  28.    * @param {number} [options.minimumLineLength = 0.1] - Lines shorter than this length are not drawn.
  29.    */
  30.   constructor({
  31.     units = "mm",
  32.     backgroundColor = "transparent",
  33.     title = "Untitled",
  34.     seed = unseededRandomHex(8),
  35.     size = {
  36.       width: 100,
  37.       height: 100,
  38.     },
  39.     stroke = "black",
  40.     strokeWidth = 1,
  41.     minimumLineLength = 0.1,
  42.   } = {}) {
  43.     this.title = title;
  44.     this.size = size;
  45.     this.strokeWidth = strokeWidth;
  46.     this.units = units;
  47.     this.stroke = stroke;
  48.     this.backgroundColor = backgroundColor;
  49.     this.minimumLineLength = minimumLineLength;
  50.     plotContext = this;
  51.     this.lines = [];
  52.     this.paths = [];
  53.     this.circles = [];
  54.     this.points = [];
  56.     this.seedHistory = [];
  58.     this.svgBuilder = new SVGBuilder();
  60.     this.svgBuilder
  61.       .setWidth(`${this.size.width}${this.units}`)
  62.       .setHeight(`${this.size.height}${this.units}`)
  63.       .setViewBox(`0 0 ${this.size.width} ${this.size.height}`)
  64.       .setBackgroundColor(this.backgroundColor);
  66.     this.generate = () => {};
  68.     this.seed = seed;
  70.     if (typeof seed === "number") {
  71.       this.seed = {
  72.         hex: decToHex(seed, 8),
  73.         decimal: seed,
  74.       };
  75.     }
  77.     this.handleKeydown = this.handleKeydown.bind(this);
  78.     document.addEventListener("keydown", this.handleKeydown);
  79.   }
  81.   static getContext() {
  82.     return plotContext;
  83.   }
  85.   /**
  86.    *
  87.    * @returns {string} - The file name to be used for the Plot's SVG file,
  88.    * as a string in the format `Title_ffffffff_210x297mm.svg`
  89.    */
  90.   filename() {
  91.     return `${this.title}_${this.seed.hex}_${this.size.width}x${this.size.height}${this.units}.svg`;
  92.   }
  94.   /**
  95.    * @summary Adds shapes to the plot.
  96.    * @param {Line|Circle|Path|Point|Array} shape - An object or array of objects to be added to the plot.
  97.    * @example
  98.    * import { Plot, Line, Circle } from "@jakebeamish/penplotting";
  100. const plot = new Plot({
  101.     backgroundColor: "#ffffff"
  102. });
  104. plot.generate = () => {
  105.     const line = Line.fromArray([0, 0, 100, 100]);
  106.     const circlesArray = [
  107.         new Circle(10, 10, 10),
  108.         new Circle(40, 40, 15),
  109.         new Circle(80, 80, 20)
  110.     ];
  111.     plot.add([line, circlesArray]);
  112. }
  114. plot.draw();
  115.    */
  116.   add(shape) {
  117.     const shapes = Array.isArray(shape) ? shape.flat(Infinity) : [shape];
  118.     shapes.forEach((item) => this.addSingleShape(item));
  119.   }
  121.   /**
  122.    * Adds a single shape to the appropriate array. Used by {@link Plot#add}.
  123.    * @private
  124.    * @param {Line|Path|Circle|Point} shape
  125.    */
  126.   addSingleShape(shape) {
  127.     if (shape instanceof Line) {
  128.       this.lines.push(shape);
  129.     } else if (shape instanceof Path) {
  130.       this.paths.push(shape);
  131.     } else if (shape instanceof Circle) {
  132.       this.circles.push(shape);
  133.     } else if (shape instanceof Point) {
  134.       this.points.push(shape);
  135.     } else {
  136.       throw new TypeError(
  137.         "Unsupported shape type. Shape must be a Line, Path, Point or Circle.",
  138.       );
  139.     }
  140.   }
  142.   /**
  143.    * Generates the SVG and UI and appends them to the document body.
  144.    * Must be called after defining a Plot.generate() function.
  145.    */
  146.   draw() {
  147.     let startTime = Date.now();
  148.     this.generate();
  150.     this.deduplicateLines();
  151.     this.removeOverlappingLines();
  152.     this.removeShortLines(this.minimumLineLength);
  154.     this.addLinesToSVG();
  156.     this.addPathsToSVG();
  158.     this.addCirclesToSVG();
  160.     this.addPointsToSVG();
  162.     this.svg = this.svgBuilder.build();
  164.     const timeTaken = +(
  165.       Math.round((Date.now() - startTime) / 1000 + "e+2") + "e-2"
  166.     );
  168.     this.createUI(timeTaken);
  169.     this.appendSVG();
  170.     if (!this.seedHistory.includes(this.seed.hex)) {
  171.       this.seedHistory.unshift(this.seed.hex);
  172.     }
  173.   }
  175.   handleKeydown(e) {
  176.     const focusedElement = document.activeElement;
  178.     // Check if the focused element is an input, textarea, or select
  179.     if (
  180.       focusedElement.tagName === "INPUT" ||
  181.       focusedElement.tagName === "TEXTAREA" ||
  182.       focusedElement.tagName === "SELECT" ||
  183.       focusedElement.isContentEditable
  184.     ) {
  185.       // If an input is focused, do nothing
  186.       return;
  187.     }
  189.     if (e.key === "d") {
  190.       this.downloadSVG();
  191.     } else if (e.key === "r") {
  192.       this.randomiseSeed();
  193.     }
  194.   }
  196.   /**
  197.    * Empty out any existing HTML UI and SVG document elements on the page, in order to regenerate a Plot.
  198.    */
  199.   clear() {
  200.     this.lines = [];
  201.     this.paths = [];
  202.     this.circles = [];
  203. 		this.points = [];
  205.     document.body.innerHTML = "";
  207.     this.svgBuilder.clear();
  208.   }
  210.   /**
  211.    * Download the {@link Plot} as an SVG file.
  212.    */
  213.   downloadSVG() {
  214.     const serializer = new XMLSerializer();
  215.     const source = serializer.serializeToString(this.svgBuilder.build());
  217.     const svgBlob = new Blob([source], { type: "image/svg+xml;charset=utf-8" });
  218.     const url = URL.createObjectURL(svgBlob);
  220.     const a = document.createElement("a");
  221.     a.href = url;
  222.     a.download = this.filename();
  223.     document.body.appendChild(a);
  224.     a.click();
  226.     document.body.removeChild(a);
  227.     URL.revokeObjectURL(url);
  228.   }
  230.   randomiseSeed() {
  231.     this.seed = unseededRandomHex(8);
  232.     this.clear();
  233.     this.draw();
  234.   }
  236.   setSeed(input) {
  237.     this.seed = {
  238.       hex: input,
  239.       decimal: hexToDec(input),
  240.     };
  241.     this.clear();
  242.     this.draw();
  243.   }
  245.   /**
  246.    * Removes duplicated [Lines]{@link Line} from this Plot's lines array.
  247.    */
  248.   deduplicateLines() {
  249.     const uniqueLines = [];
  251.     for (const line of this.lines) {
  252.       let isDuplicate = false;
  253.       for (const uniqueLine of uniqueLines) {
  254.         if (line.isDuplicate(uniqueLine)) {
  255.           isDuplicate = true;
  256.           break;
  257.         }
  258.       }
  259.       if (!isDuplicate) {
  260.         uniqueLines.push(line);
  261.       }
  262.     }
  264.     this.lines = uniqueLines;
  265.   }
  267.   /**
  268.    * Removes overlapping [Lines]{@link Line} from this Plot's lines array.
  269.    */
  270.   removeOverlappingLines() {
  271.     const uniqueLines = [];
  273.     let sortedLines = this.lines.toSorted(
  274.       (j, k) => k.a.distance(k.b) - j.a.distance(j.b),
  275.     );
  276.     for (const line of sortedLines) {
  277.       let isOverlapped = false;
  278.       for (const uniqueLine of uniqueLines) {
  279.         if (line.isContainedBy(uniqueLine)) {
  280.           isOverlapped = true;
  281.           break;
  282.         }
  283.       }
  284.       if (!isOverlapped) {
  285.         uniqueLines.push(line);
  286.       }
  287.     }
  289.     this.lines = uniqueLines;
  290.   }
  292.   /**
  293.    * Removes [Lines]{@link Line} in this Plot's lines array that are shorter than a specified minimum length.
  294.    * @param {number} minimumLength
  295.    */
  296.   removeShortLines(minimumLength) {
  297.     const validLines = [];
  299.     for (const line of this.lines) {
  300.       if (line.length() > minimumLength) {
  301.         validLines.push(line);
  302.       }
  303.     }
  305.     this.lines = validLines;
  306.   }
  308.   /**
  309.    * Adds the [Lines]{@link Line} in this Plot's lines array to it's SVG element.
  310.    */
  311.   addLinesToSVG() {
  312.     for (const line of this.lines) {
  313.       this.svgBuilder.addShape(line.toSVGElement());
  314.     }
  315.   }
  317.   /**
  318.    * Adds the [Paths]{@link Path} in this Plot's paths array to it's SVG element.
  319.    */
  320.   addPathsToSVG() {
  321.     for (const path of this.paths) {
  322.       this.svgBuilder.addShape(path.toSVGElement());
  323.     }
  324.   }
  325.   /**
  326.    * Adds the [Circles]{@link Circle} in this Plot's circles array to it's SVG element.
  327.    */
  328.   addCirclesToSVG() {
  329.     for (const circle of this.circles) {
  330.       this.svgBuilder.addShape(circle.toSVGElement());
  331.     }
  332.   }
  334.   addPointsToSVG() {
  335.     for (const point of this.points) {
  336.       this.svgBuilder.addShape(point.toSVGElement());
  337.     }
  338.   }
  340.   /**
  341.    * Appends this plot's SVG element to the document body.
  342.    */
  343.   appendSVG() {
  344.     document.body.appendChild(this.svg);
  345.   }
  347.   updateDocumentTitle() {
  348.     document.title = `${this.title} ${this.seed.hex}`;
  349.   }
  351.   createElement(tag, parent, textContent = "", attributes = {}) {
  352.     const element = document.createElement(tag);
  353.     if (textContent) element.textContent = textContent;
  354.     Object.keys(attributes).forEach((key) =>
  355.       element.setAttribute(key, attributes[key]),
  356.     );
  357.     parent.appendChild(element);
  358.     return element;
  359.   }
  361.   createSeedInput(parent) {
  362.     const seedInput = this.createElement("input", parent, "", {
  363.       value: this.seed.hex,
  364.     });
  365.     seedInput.addEventListener("change", () => this.setSeed(seedInput.value));
  366.     seedInput.addEventListener("focus", () => seedInput.select());
  367.   }
  369.   createHistoryForm(parent) {
  370.     const historyForm = this.createElement("form", parent);
  371.     const historyLabel = this.createElement("label", historyForm, "History: ", {
  372.       for: "history",
  373.     });
  374.     const historySelect = this.createElement("select", historyLabel, "", {
  375.       name: "history",
  376.       id: "history",
  377.     });
  379.     this.createElement("option", historySelect, "--------", { value: "" });
  381.     this.seedHistory.forEach((seed) => {
  382.       const option = this.createElement("option", historySelect, seed, {
  383.         value: seed,
  384.       });
  385.       option.addEventListener("click", () => this.setSeed(seed));
  386.     });
  387.   }
  389.   createNavigation(parent) {
  390.     const nav = this.createElement("nav", parent);
  391.     const ul = this.createElement("ul", nav);
  393.     this.createNavItem(ul, "⬇️", () => this.downloadSVG());
  394.     this.createNavItem(ul, "🔄", () => this.randomiseSeed());
  395.   }
  397.   createNavItem(parent, text, clickHandler) {
  398.     const listItem = this.createElement("li", parent);
  399.     const button = this.createElement("a", listItem, text);
  400.     button.addEventListener("click", clickHandler);
  401.   }
  403. 	getNumOfShapes() {
  404. 		return this.lines.length + this.paths.length + this.circles.length + this.points.length;
  405. 	}
  407.   addPlotInfo(parent, timeTaken) {
  408.     const plotInfo = this.createElement("div", parent);
  409.     const timeText = timeTaken < 0.05 ? "<0.05s" : `~${timeTaken}s`;
  410.     this.createElement(
  411.       "p",
  412.       plotInfo,
  413.       `Generated ${this.getNumOfShapes()} shapes in ${timeText}`,
  414.     );
  415.   }
  417.   /**
  418.    * Creates HTML UI and adds it to the document body.
  419.    * @param {number} timeTaken
  420.    */
  421.   createUI(timeTaken) {
  422.     this.updateDocumentTitle();
  424.     // Create a HTML header element and append to body.
  425.     const header = this.createElement("header", document.body);
  427.     // Create a h1 title and append to header.
  428.     this.createElement("h1", header, this.title);
  430.     this.createSeedInput(header);
  432.     this.createHistoryForm(header);
  434.     this.createNavigation(header);
  436.     this.addPlotInfo(header, timeTaken);
  437.   }
  438. }