index.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ohm</title>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font-family: "Varela Round", Helvetica, Arial, Sans-Serif;
      }

      html {
        display: flex;
      }

      body {
        background-color: #f2f2f2;
        display: flex;
        min-height: 100vh;
      }

      h1 {
        font-size: 1.5em;
      }

      /* Link inside h1 (ohm logo/title) */
      h1 > a {
        /* Make link have no special style, normal color and no underline: */
        color: inherit;
        text-decoration: none;
      }

      .sidebar {
        height: 100vh;
        min-height: 600px;
        min-width: 90px;
        background-color: #ececec;
        color: #4a4a4a;
        display: flex;
        flex-direction: column;
        position: fixed;
      }

      .sidebar_content {
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .toolheader {
        flex: 0 1 auto;
        margin: auto;
        margin-top: 1em;
      }

      .toolbox {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 1em;
      }

      .tool {
        flex: 1 1 auto;
        min-width: 36;
        height: 36;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .tool > div {
        padding: 1em;
      }

      .active_tool {
        color: blue;
      }

      /* The tool svg icons, or text divs when offline: */
      .tool_icon {
        min-width: 28;
        height: 28;
        text-align: center;
        transition: all 0.25s linear;
      }

      .tool_icon:hover {
        cursor: pointer;
        transform: scale(1.3);
      }

      /* SVG styling:

         Should only be done in CSS for temporary styling while editing,
         so, coloring red for delete and blue for temp is okay,
         but setting stroke-width etc. should be done on the SVG nodes from
         javascript, and not in CSS. This is to ensure that the SVG looks
         identical once you hit save.
      */
      .to_delete {
        stroke: rgb(200, 0, 0);
        opacity: 0.5;
      }

      circle.fill.to_delete {
        stroke: rgb(200, 0, 0);
        fill: rgb(200, 0, 0);
        opacity: 0.5;
      }

      .to_edit {
        stroke: blue;
      }

      text.to_edit {
        fill: blue;
      }

      circle.fill.to_edit {
        fill: blue;
      }

      .to_place {
        stroke: green;
      }

      circle.fill.to_place {
        fill: green;
      }

      #drawing > text {
        cursor: default;
      }

      #drawing {
        background-color: #ffffff;
        border: 2px;
        border-color: #4a4a4a;
        margin: 1em;
        margin-left: calc(1em + 90px);
      }

      .grid_line.major {
        stroke: rgb(200, 200, 200);
        stroke-width: 0.4;
      }

      .grid_line.minor {
        stroke: rgb(200, 200, 200);
        stroke-width: 0.2;
      }
    </style>
    <script>
      // Global state:
      let active_tool = "wire";
      const GRID_SIZE = 60;
      let grid_size = GRID_SIZE;
      let translation = null;
      let mouse = null;

      function init_ohm() {
        document.onkeydown = key_down;

        const p = document.getElementById("drawing");
        p.onmousedown = drawing_mouse_down;
        p.onmouseup = drawing_mouse_up;
        p.onmousemove = drawing_mouse_move;
        refresh_grid_lines();
        activate_tool(active_tool);
      }

      function activate_tool(new_state) {
        remove_elements(".to_place");
        unselect_elements();
        active_tool = new_state;
        const toolbox = document.getElementById("toolbox");
        for (const tool of toolbox.children) {
          if (tool.id === active_tool) {
            tool.classList.add("active_tool");
          } else {
            tool.classList.remove("active_tool");
          }
        }
      }

      // Grid functions:

      function round_to_grid(pos) {
        return Math.round(pos / grid_size) * grid_size;
      }

      function get_grid_flavor(xy) {
        if (Math.round(xy) % GRID_SIZE === 0) {
          return "major";
        }
        return "minor";
      }

      function init_grid() {
        const drawing = document.getElementById("drawing");
        const svg_width = Number(drawing.getAttribute("width"));
        const svg_height = Number(drawing.getAttribute("height"));
        for (let x = grid_size; x < svg_width; x += grid_size) {
          create_grid_line(x, 0, x, svg_height, get_grid_flavor(x));
        }
        for (let y = grid_size; y < svg_height; y += grid_size) {
          create_grid_line(0, y, svg_width, y, get_grid_flavor(y));
        }
      }

      function num_to_string(num) {
        // Converts a number to string with max 2 decimal places
        // Useful for having nice numbers in svg (file).
        let str = num.toFixed(2);
        while (str.endsWith("0")) {
          str = str.slice(0, -1);
        }
        if (str.endsWith(".")) {
          str = str.slice(0, -1);
        }
        return str;
      }

      function create_grid_line(x1, y1, x2, y2, flavor) {
        const drawing = document.getElementById("drawing");
        const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
        line.setAttribute("x1", num_to_string(x1));
        line.setAttribute("y1", num_to_string(y1));
        line.setAttribute("x2", num_to_string(x2));
        line.setAttribute("y2", num_to_string(y2));
        line.classList.add("grid_line");
        line.classList.add(flavor);

        drawing.prepend(line);
      }

      function refresh_grid_lines() {
        remove_elements(".grid_line");
        init_grid();
      }

      function resize(key) {
        const drawing = document.getElementById("drawing");
        let svg_width = Number(drawing.getAttribute("width"));
        let svg_height = Number(drawing.getAttribute("height"));
        if (key === "+") {
          svg_width += GRID_SIZE;
          svg_height += GRID_SIZE;
        } else if (key === "-") {
          if (svg_width > GRID_SIZE) {
            svg_width -= GRID_SIZE;
            svg_height -= GRID_SIZE;
          }
        } else if (key === "ArrowUp") {
          if (svg_height > GRID_SIZE) {
            svg_height -= GRID_SIZE;
          }
        } else if (key === "ArrowDown") {
          svg_height += GRID_SIZE;
        } else if (key === "ArrowLeft") {
          if (svg_width > GRID_SIZE) {
            svg_width -= GRID_SIZE;
          }
        } else if (key === "ArrowRight") {
          svg_width += GRID_SIZE;
        } else {
          alert("Error: bad resize - " + key);
        }
        drawing.setAttribute("width", "" + svg_width);
        drawing.setAttribute("height", "" + svg_height);

        refresh_grid_lines();
      }

      function subdivide_grid(subdivisions) {
        const drawing = document.getElementById("drawing");
        grid_size = GRID_SIZE / subdivisions;
        refresh_grid_lines();
      }

      // General functions for manipulating the svg drawing:
      // (Selecting, adding, removing)

      function default_parent(parent = null) {
        if (parent) return parent;
        return document.getElementById("drawing");
      }

      function get_elements(query_selector, parent = null) {
        parent = default_parent(parent);
        return parent.querySelectorAll(query_selector);
      }

      function no_elements(query_selector, parent = null) {
        return get_elements(query_selector, parent).length === 0;
      }

      function remove_elements(query_selector, parent = null) {
        const elements = get_elements(query_selector, parent);
        elements.forEach((e) => {
          e.remove();
        });
      }

      function create_element(element) {
        element.classList.add("to_place");
        element.classList.remove("to_edit");
        const drawing = document.getElementById("drawing");

        if (element.tagName === "circle") {
          // Circles and dots are appended at the end:
          drawing.appendChild(element);
        } else {
          // Others are inserted before the circles / dots:
          const firstCircle = drawing.getElementsByTagName("circle")[0];
          drawing.insertBefore(element, firstCircle);
        }
      }

      function remove_class(class_name, parent = null) {
        const elements = get_elements("." + class_name, parent);
        for (const element of elements) {
          element.classList.remove(class_name);
        }
      }

      function place_elements() {
        remove_class("to_place");
      }

      // Copy and delete tools select elements inside svg using classes (coloring them)
      // This function removes those classes, for example when switching tool
      function unselect_elements() {
        remove_class("to_edit");
        remove_class("to_delete");
      }

      function hovered_elements(event, tag = null) {
        // Returns a list of 0-1 elements that mouse is currently hovering over
        // Can be expanded to add elements below the top element later
        const elements = [];
        const element = event.target;
        if (element) {
          if (tag) {
            if (element.tagName === tag) {
              // Only add if it's correct tag (For example add only <text>)
              elements.push(element);
            }
          } else if (
            element.tagName === "circle" ||
            element.tagName === "polyline" ||
            element.tagName === "polygon" ||
            element.tagName === "text"
          ) {
            elements.push(element);
          } // Skip other tags; "line" is used for grid lines
        }

        return elements;
      }

      function set_class_for_hovered(event, class_name, tag = null) {
        const hovered = hovered_elements(event, tag);
        const drawing = document.getElementById("drawing");

        for (const element of drawing.children) {
          if (hovered.includes(element)) {
            element.classList.add(class_name);
          } else {
            element.classList.remove(class_name);
          }
        }
      }

      // Mouse events:

      function update_mouse(event) {
        mouse = {
          target: null,
          offsetX: event.offsetX,
          offsetY: event.offsetY,
          preventDefault: () => {},
        };
      }

      function fake_mouse_move() {
        if (mouse != null) {
          drawing_mouse_move(mouse);
        }
      }

      function drawingGetXY(event) {
        if (event.target === null || event.target.id === "drawing") {
          // Either a fake event, or an event on the <svg id="drawing"> element
          // In both cases, offsetX and offsetY should be correct:
          return { x: event.offsetX, y: event.offsetY };
        }

        // Some events happen on the lines, circles and polygons inside the svg
        // This causes problems, especially in Firefox
        // since event offsets are relative to the element
        // Thus, we use absolute numbers to calculate the offsets relative to
        // drawing

        let svg = document.getElementById("drawing").getBoundingClientRect();
        let x = event.x - svg.x;
        let y = event.y - svg.y;

        return { x: x, y: y };
      }

      function drawing_mouse_down(event) {
        event.preventDefault();
        update_mouse(event);
        let pos = drawingGetXY(event);
        let x = "" + round_to_grid(pos.x);
        let y = "" + round_to_grid(pos.y);
        if (active_tool === "dot") {
          remove_dot(x, y); // (If it exists)
          place_elements();

          // Create temporary element immediately, don't wait for mouse movement:
          fake_mouse_move();
        } else if (active_tool === "wire") {
          drawing_wire_mouse_down(x, y);
        } else if (active_tool === "delete") {
          drawing_delete_mouse_down(event);
        } else if (active_tool === "move") {
          drawing_move_mouse_down(event);
        } else if (active_tool === "copy") {
          drawing_copy_mouse_down(event);
        } else if (active_tool === "move") {
          drawing_move_mouse_down(event);
        } else if (active_tool === "text") {
          drawing_text_mouse_down(event);
        }
      }

      function drawing_mouse_up(event) {
        event.preventDefault();
        update_mouse(event);
        let pos = drawingGetXY(event);
        let x = "" + round_to_grid(pos.x);
        let y = "" + round_to_grid(pos.y);
        if (active_tool === "circle") {
          place_elements();

          // Create temporary circle immediately, don't wait for mouse movement:
          fake_mouse_move();
        }
      }

      function drawing_mouse_move(event) {
        event.preventDefault();
        update_mouse(event);
        const mouse_pressed = event.buttons > 0;
        let pos = drawingGetXY(event);
        let x = "" + round_to_grid(pos.x);
        let y = "" + round_to_grid(pos.y);
        if (active_tool === "wire") {
          drawing_wire_hover(x, y);
        } else if (active_tool === "delete") {
          drawing_delete_hover(event);
        } else if (active_tool === "move") {
          drawing_move_hover(event);
        } else if (active_tool === "copy") {
          drawing_copy_hover(event);
        } else if (active_tool === "text") {
          drawing_text_hover(event);
        } else if (active_tool === "dot") {
          drawing_dot_hover(x, y);
        } else if (active_tool === "circle" && !mouse_pressed) {
          drawing_circle_hover(x, y);
        } else if (active_tool === "circle" && mouse_pressed) {
          drawing_circle_drag(x, y);
        }
      }

      // Keyboard events:

      function text_add(key) {
        const elements = get_elements(".to_place");
        for (const element of elements) {
          if (element.innerHTML === "SAMPLE TEXT") {
            // TODO, get rid of this hack:
            element.innerHTML = "";
          }
          element.innerHTML += key;
        }
      }
      function text_backspace() {
        const elements = get_elements(".to_place");
        for (const element of elements) {
          if (element.innerHTML === "SAMPLE TEXT") {
            // TODO, get rid of this hack:
            element.innerHTML = "";
          } else {
            const length = element.innerHTML.length;
            if (length > 0) {
              element.innerHTML = element.innerHTML.slice(0, length - 1);
            }
          }
        }
      }

      function text_key_down(event) {
        const key = event.key;
        switch (key) {
          case "Shift":
          case "Control":
          case "Meta":
          case "Alt":
            break; // Do nothing
          case "Escape":
          case "Enter":
            place_elements();
            break;
          case "Backspace":
            text_backspace();
            break;
          default:
            text_add(key);
            break;
        }
      }

      function key_down(event) {
        if (active_tool === "text" && get_elements(".to_place").length > 0) {
          text_key_down(event);
          return;
        }
        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
          return;
        }
        const key = event.key;
        switch (key) {
          case "ArrowUp":
          case "ArrowDown":
          case "ArrowLeft":
          case "ArrowRight":
          case "+":
          case "-":
            resize(key);
            break;
          case "1":
          case "2":
          case "3":
          case "4":
            subdivide_grid(key);
            break;
          case "Escape":
            remove_elements(".to_place");
            unselect_elements();
            break;
          case "s":
            save();
            break;
          case "w":
          case "p":
            activate_tool("wire");
            break;
          case "c":
            activate_tool("circle");
            break;
          case "d":
            activate_tool("dot");
            break;
          case "e":
            activate_tool("delete");
            break;
          case "m":
            activate_tool("move");
            break;
        }
        fake_mouse_move();
      }

      // Functionality related to the left toolbar:

      function toolbar(icon_name) {
        remove_elements(".to_place");
        if (icon_name === "save") {
          save();
        } else if (icon_name == "load") {
          load();
        } else {
          activate_tool(icon_name);
        }
      }

      function save() {
        remove_elements(".to_place");
        const copy = document.getElementById("drawing").cloneNode(true);
        remove_elements(".grid_line", copy);
        for (const element of copy.children) {
          element.removeAttribute("id");
          element.removeAttribute("class");
        }
        copy.removeAttribute("class");
        const svg_text = copy.outerHTML;
        download("schematic.svg", svg_text);
      }

      function load_svg(content) {
        const drawing = document.getElementById("drawing");
        drawing.outerHTML = content;
        init_ohm();
      }

      // https://stackoverflow.com/questions/16215771/
      function open_file_dialog(on_complete) {
        const input = document.createElement("input");
        input.type = "file";
        input.onchange = (e) => {
          const file = e.target.files[0];
          const reader = new FileReader();
          reader.readAsText(file, "UTF-8");
          reader.onload = (readerEvent) => {
            const content = readerEvent.target.result;
            on_complete(content);
          };
        };
        input.click();
      }

      function load() {
        open_file_dialog(load_svg);
      }

      // Save to file (using browser download):
      // From: https://gist.github.com/liabru/11263260#gistcomment-2894088
      function download(filename, text) {
        const element = document.createElement("a");
        element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
        element.setAttribute("download", filename);

        element.style.display = "none";
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);
      }

      // Dot tool functions:

      function create_dot(x, y) {
        const drawing = document.getElementById("drawing");
        const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        dot.classList.add("fill");
        dot.setAttribute("cx", x);
        dot.setAttribute("cy", y);
        dot.setAttribute("r", "10");
        dot.setAttribute("stroke-width", "3");
        create_element(dot);
      }

      function update_dot(x, y) {
        const elements_to_place = get_elements(".to_place");
        console.assert(elements_to_place.length == 1, elements_to_place);
        const dot = elements_to_place[0];
        dot.setAttribute("cx", x);
        dot.setAttribute("cy", y);
      }

      function drawing_dot_hover(x, y) {
        if (no_elements(".to_place")) {
          create_dot(x, y);
        } else {
          update_dot(x, y);
        }
      }

      // Circle & pin tool functions:

      function find_dot(x, y) {
        const drawing = document.getElementById("drawing");

        for (const element of drawing.getElementsByTagName("circle")) {
          const cx = element.getAttribute("cx");
          const cy = element.getAttribute("cy");
          const r = element.getAttribute("r");
          const classes = element.classList;
          if (!classes.contains("to_place") && cx === x && cy === y && r === "10") {
            return element;
          }
        }
        return null;
      }

      function dot_exists(x, y) {
        return find_dot(x, y) != null;
      }

      function remove_dot(x, y) {
        if (dot_exists(x, y)) {
          find_dot(x, y).remove();
        }
      }

      function set_circle_small(circle) {
        circle.setAttribute("r", "10");
        circle.setAttribute("stroke-width", "3");
        circle.setAttribute("fill", "white");
        circle.setAttribute("stroke", "black");
      }

      function set_circle_radius(circle, radius) {
        circle.setAttribute("r", "" + radius);
        circle.setAttribute("stroke-width", "8");
        circle.setAttribute("fill", "none");
        circle.setAttribute("stroke", "black");
      }

      function create_circle(x, y) {
        const drawing = document.getElementById("drawing");
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", x);
        circle.setAttribute("cy", y);
        set_circle_small(circle);
        create_element(circle);
      }

      function move_circle(x, y) {
        const elements_to_place = get_elements(".to_place");
        console.assert(elements_to_place.length == 1, elements_to_place);
        const circle = elements_to_place[0];
        circle.setAttribute("cx", x);
        circle.setAttribute("cy", y);
      }

      function scale_circle(x, y) {
        const elements_to_place = get_elements(".to_place");
        console.assert(elements_to_place.length == 1, elements_to_place);
        const circle = elements_to_place[0];
        const cx = circle.getAttribute("cx");
        const cy = circle.getAttribute("cy");
        const distance_squared = Math.pow(x - cx, 2) + Math.pow(y - cy, 2);
        const distance = Math.sqrt(distance_squared);
        if (distance < grid_size) {
          set_circle_small(circle);
          return;
        }
        set_circle_radius(circle, distance);
      }

      function drawing_circle_hover(x, y) {
        if (no_elements(".to_place")) {
          create_circle(x, y);
        } else {
          move_circle(x, y);
        }
      }

      function drawing_circle_drag(x, y) {
        if (no_elements(".to_place")) {
          return; // Mouse down event should create element, do nothing
        }
        scale_circle(x, y);
      }

      // Delete tool functions:

      function drawing_delete_mouse_down(event) {
        remove_elements(".to_delete");
      }

      function drawing_delete_hover(event) {
        set_class_for_hovered(event, "to_delete");
      }

      // Copy/Move tool functions:

      function move_element(element, x, y) {
        // Move an SVG element to an x,y coordinate
        // Doesn't care about grid or previous position
        // Only used for text, see translate_element for other elements
        x = Number(x);
        y = Number(y);
        if (element.tagName === "text") {
          element.setAttribute("x", x);
          element.setAttribute("y", y);
        } else {
          alert("Cannot move this: " + element.tagName);
        }
      }

      function translate_element(element, x, y) {
        x = Number(x);
        y = Number(y);
        if (element.tagName === "circle") {
          const old_x = Number(element.getAttribute("cx"));
          const old_y = Number(element.getAttribute("cy"));
          element.setAttribute("cx", old_x + x);
          element.setAttribute("cy", old_y + y);
        } else if (element.tagName === "polygon" || element.tagName === "polyline") {
          const points = get_points(element);
          for (let i = 0; i < points.length; ++i) {
            points[i].x = Number(points[i].x) + x;
            points[i].y = Number(points[i].y) + y;
          }
          element.setAttribute("points", create_points_str(points));
        } else {
          alert("Cannot move this: " + element.tagName);
        }
      }

      function move_elements(event, elements_to_place) {
        for (const element of elements_to_place) {
          if (element.tagName === "text") {
            move_element(element, event.offsetX, event.offsetY);
          } else {
            const mouse_x = round_to_grid(event.offsetX);
            const mouse_y = round_to_grid(event.offsetY);

            const translate_x = mouse_x - translation.past.x;
            const translate_y = mouse_y - translation.past.y;

            translate_element(element, translate_x, translate_y);

            translation.past.x = mouse_x;
            translation.past.y = mouse_y;
          }
        }
      }

      function create_duplicates(event) {
        const elements = hovered_elements(event);
        for (const element of elements) {
          create_element(element.cloneNode(true));
        }
        const mouse_x = round_to_grid(event.offsetX);
        const mouse_y = round_to_grid(event.offsetY);
        translation = {};
        translation.past = {};
        translation.past.x = mouse_x;
        translation.past.y = mouse_y;
      }

      function drawing_copy_hover(event) {
        if (no_elements(".to_place")) {
          // No click yet - Make hovered elements green:
          set_class_for_hovered(event, "to_edit");
        } else {
          // Selected elements exist - translate them:
          move_elements(event, get_elements(".to_place"));
        }
      }

      function drawing_copy_mouse_down(event) {
        if (no_elements(".to_place")) {
          // First click - create copies:
          create_duplicates(event);
        } else {
          // Second click - Place copies:
          place_elements();
          translation = null;
          drawing_copy_hover(event);
        }
      }

      function drawing_move_hover(event) {
        if (no_elements(".to_place")) {
          // No click yet - Make hovered elements green:
          set_class_for_hovered(event, "to_edit");
        } else {
          // Selected elements exist - translate them:
          move_elements(event, get_elements(".to_place"));
        }
      }

      function drawing_move_mouse_down(event) {
        if (no_elements(".to_place")) {
          // First click - create copies:
          create_duplicates(event);
        } else {
          // Second click - Remove originals and place temporary copies:
          remove_elements(".to_edit");
          place_elements();
          translation = null;
          drawing_move_hover(event);
        }
      }

      // Text tool functions:

      function create_text(x, y) {
        const drawing = document.getElementById("drawing");
        const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text.setAttribute("x", x);
        text.setAttribute("y", y);
        text.setAttribute("text-anchor", "middle");
        text.innerHTML = "SAMPLE TEXT";
        create_element(text);
      }

      function drawing_text_mouse_down(event) {
        if (no_elements(".to_place")) {
          // First click
          const originals = get_elements("to_edit");
          if (originals.length == 0) {
            create_text(event.offsetX, event.offsetY);
          } else {
            for (const original of originals) {
              original.classList.add("to_place");
              original.classList.remove("to_edit");
            }
          }
        } else {
          place_elements();
        }
      }

      function drawing_text_hover(event) {
        if (no_elements(".to_place")) {
          // No click yet - Make hovered elements green:
          set_class_for_hovered(event, "to_edit", "text");
        } else {
          // Temporary elements exist - translate them:
          move_elements(event, get_elements(".to_place"));
        }
      }

      // Wire tool functions:

      function get_points(polyline) {
        const points = polyline.getAttribute("points").split(" ");
        const results = [];
        for (const point of points) {
          const coordinates = point.split(",");
          const x = coordinates[0];
          const y = coordinates[1];
          results.push({
            x: x,
            y: y,
          });
        }
        return results;
      }

      function create_points_str(points) {
        let string = "";
        for (const point of points) {
          string += "" + point.x + "," + point.y + " ";
        }
        return string.trim();
      }

      function drawing_wire_mouse_down(x, y) {
        if (get_elements(".to_place").length === 0) {
          wire_start(x, y);
        } else {
          const elements_to_place = get_elements(".to_place");
          console.assert(elements_to_place.length == 1, elements_to_place);
          const wire = get_elements(".to_place")[0];
          const points = get_points(wire);

          // Get the first point and last point we clicked:
          const first = points[0];
          const last = points[points.length - 2]; // - 2 because - 1 is the hovering point

          // End the wire if you connected with the first, or clicked the same point twice:
          if ((first.x === x && first.y === y) || (last.x === x && last.y === y)) {
            wire_end();
          } else {
            wire_continue(x, y);
          }
        }
      }

      function drawing_wire_hover(x, y) {
        if (get_elements(".to_place").length === 0) {
          return;
        }
        const wire = get_elements(".to_place")[0];
        const points = get_points(wire);
        points[points.length - 1] = {
          x: x,
          y: y,
        };
        wire.setAttribute("points", create_points_str(points));
        let replace_tag = null;
        if (points[0].x === x && points[0].y === y) {
          if (wire.tagName === "polyline") {
            replace_tag = "polygon";
          }
        } else {
          if (wire.tagName === "polygon") {
            replace_tag = "polyline";
          }
        }
        if (replace_tag) {
          const new_wire = create_wire(points, "", replace_tag);
          create_element(new_wire);
          wire.remove();
        }
      }

      function wire_start(x, y) {
        const point = {
          x: x,
          y: y,
        };
        const points = [point, point];
        const polyline = create_wire(points, "", "polyline");
        create_element(polyline);
      }

      function wire_continue(x, y) {
        const point = {
          x: x,
          y: y,
        };
        const wire = get_elements(".to_place")[0];
        const points = get_points(wire);
        points.push(point);
        wire.setAttribute("points", create_points_str(points));
      }

      function wire_end() {
        place_elements();
      }

      function create_wire(points, id, tag) {
        const line = document.createElementNS("http://www.w3.org/2000/svg", tag);
        line.setAttribute("points", create_points_str(points));
        line.setAttribute("id", id);
        line.setAttribute("stroke-width", "8");
        line.setAttribute("fill", "none");
        line.setAttribute("stroke", "black");
        return line;
      }
    </script>
  </head>
  <body onload="init_ohm();">
    <div class="sidebar">
      <div class="sidebar_content">
        <h1 class="toolheader"><a href="https://github.com/olehermanse/ohm/">ohm</a></h1>
        <div id="toolbox" class="toolbox">
          <div title="Add wire" class="tool" id="wire" onclick="toolbar('wire');">
            <div class="tool_icon" data-feather="edit-2">Wire</div>
          </div>
          <div title="Add dot" class="tool" id="dot" onclick="toolbar('dot');">
            <div class="tool_icon" data-feather="circle">Dot</div>
          </div>
          <div title="Add circle" class="tool" id="circle" onclick="toolbar('circle');">
            <div class="tool_icon" data-feather="circle">Circle</div>
          </div>
          <div title="Add text" class="tool" id="text" onclick="toolbar('text');">
            <div class="tool_icon" data-feather="type">Text</div>
          </div>
          <div title="Move" class="tool" id="move" onclick="toolbar('move');">
            <div class="tool_icon" data-feather="move">Move</div>
          </div>
          <div title="Copy" class="tool" id="copy" onclick="toolbar('copy');">
            <div class="tool_icon" data-feather="copy">Copy</div>
          </div>
          <div title="Delete object" class="tool" id="delete" onclick="toolbar('delete');">
            <div class="tool_icon" data-feather="x">Delete</div>
          </div>
          <div title="Save" class="tool" id="save" onclick="toolbar('save');">
            <div class="tool_icon" data-feather="save">Save</div>
          </div>
          <div title="Load" class="tool" id="load" onclick="toolbar('load');">
            <div class="tool_icon" data-feather="upload">Load</div>
          </div>
        </div>
      </div>
    </div>
    <svg id="drawing" width="720" height="720" xmlns="http://www.w3.org/2000/svg"></svg>
  </body>
  <script>
    feather.replace();

    function replace_dot() {
      const wrapper = document.getElementById("dot");
      for (const element of wrapper.children) {
        if (element.tagName === "svg") {
          element.setAttribute("fill", "currentColor");
          element.setAttribute("stroke", "none");
        }
      }
    }

    function replace_circle() {
      const wrapper = document.getElementById("circle");
      for (const element of wrapper.children) {
        if (element.tagName === "svg") {
          element.setAttribute("stroke", "currentColor");
        }
      }
    }

    replace_dot();
    replace_circle();
  </script>
</html>