Added a Simple Graph

Author: jonobr1

package.json

@@ -43,8 +43,8 @@
   "dependencies": {
     "@tweenjs/tween.js": "^18.6.4",
     "gsap": "^3.11.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "two.js": "^0.8.10"
   }
 }

public/index.html

@@ -5,7 +5,7 @@
     <title>Wiremarks</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Mono&display=swap" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="./main.css" />
     <link rel="icon" href="./images/label.png" />
   </head>

public/main.css

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from 'react';
+import { Component as Wiremark } from './wiremark.js';
+
+export default function Editor(props) {
+
+  const domElement = useRef();
+
+  const [text, setText] =  useState('');
+  const [width, setWidth] = useState(window.innerWidth);
+  const [height, setHeight] = useState(window.innerHeight);
+  const [isOpen, setIsOpen] = useState(false);
+
+  function update(e) {
+    const value = e.target.value;
+    setText(value);
+  }
+
+  function open() {
+    setIsOpen(true);
+    requestAnimationFrame(select);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function select() {
+    const selector = 'div.panel textarea';
+    const textarea = domElement.current.querySelector(selector);
+    textarea.focus();
+  }
+
+  return (
+    <div ref={ domElement } className={ ['editor', isOpen ? 'writing' : ''].join(' ') }>
+      <div className="stage">
+        <Wiremark instructions={ text } width={ width } height={ height } />
+      </div>
+      <div className="ui">
+        <div className="open button" onClick={ open }>
+          Open Instructions
+        </div>
+        <div className="panel">
+          <div className="close button" onClick={ close }>✖️</div>
+          <textarea onChange={ update } />
+        </div>
+      </div>
+    </div>
+  );
+
+}

src/editor.js

@@ -1 +1,11 @@
-import { Wiremarks } from './wiremarks.js';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Editor from './editor.js';
+
+const domElement = document.createElement('div');
+const root = createRoot(domElement);
+
+domElement.id = 'react';
+document.body.appendChild(domElement);
+
+root.render(<Editor />);

src/index.js

@@ -1,4 +1,100 @@
 * {
   margin: 0;
   padding: 0;
+}
+
+@font-size: 17px;
+@line-height: 20px;
+
+div#react {
+  div.editor {
+
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    font-family: 'Inter', sans-serif;
+    font-size: @font-size;
+    font-weight: 400;
+    line-height: @line-height;
+
+    div.stage {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    div.ui {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      box-sizing: border-box;
+      padding: @line-height;
+
+      .open.button,
+      .panel {
+        pointer-events: all;
+      }
+
+      .open.button {
+        margin: @line-height;
+      }
+      .panel {
+
+        position: absolute;
+        display: none;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.3);
+        box-sizing: border-box;
+        padding: @line-height;
+
+        textarea {
+          font-family: 'Space Mono', monospace;
+          font-size: @font-size;
+          font-weight: 400;
+          line-height: @line-height;
+          background: transparent;
+          border: none;
+          outline: none;
+          width: 100%;
+          height: 100%;
+          margin: @line-height;
+
+        }
+        .close {
+          position: absolute;
+          display: block;
+          top: @line-height;
+          right: @line-height;
+          font-size: 200%;
+          line-height: 100%;
+        }
+      }
+    }
+    .button {
+      cursor: pointer;
+    }
+
+    &.writing {
+      div.ui {
+        .open.button {
+          display: none;
+        }
+        .panel {
+          display: block;
+        }
+      }
+    }
+  }
 }

src/main.less

@@ -0,0 +1,23 @@
+function debounce(func, timeout) {
+
+  var timer;
+
+  return function() {
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    var scope = this;
+    var args = arguments;
+
+    timer = setTimeout(function() {
+      timer = null;
+      func.apply(scope, args);
+    }, timeout);
+
+  };
+
+}
+
+export { debounce };