chore: split public and src

public/components/fill-box.js

@@ -0,0 +1,74 @@
+{
+  const style = /* css */ `
+    fill-box:not([disabled]) {
+      cursor: pointer;
+    }
+
+    fill-box > svg {
+      vertical-align: middle;
+      pointer-events: none;
+    }
+
+    fill-box > svg > rect {
+      stroke: #666666;
+      stroke-width: 2;
+    }
+  `;
+
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("type", "text/css");
+  styleElement.innerHTML = style;
+  document.head.appendChild(styleElement);
+}
+
+{
+  const template = document.createElement("template");
+  template.innerHTML = /* html */ `
+    <svg>
+      <rect x="0" y="0" width="100%" height="100%">
+    </svg>
+  `;
+
+  class FillBox extends HTMLElement {
+    constructor() {
+      super();
+
+      this.appendChild(template.content.cloneNode(true));
+      this.querySelector("rect")?.setAttribute("fill", this.fill);
+      this.querySelector("svg")?.setAttribute("width", this.size);
+      this.querySelector("svg")?.setAttribute("height", this.size);
+    }
+
+    static showTip() {
+      tip(this.tip);
+    }
+
+    connectedCallback() {
+      this.addEventListener("mousemove", this.constructor.showTip);
+    }
+
+    disconnectedCallback() {
+      this.removeEventListener("mousemove", this.constructor.showTip);
+    }
+
+    get fill() {
+      return this.getAttribute("fill") || "#333";
+    }
+
+    set fill(newFill) {
+      this.setAttribute("fill", newFill);
+      this.querySelector("rect")?.setAttribute("fill", newFill);
+    }
+
+    get size() {
+      return this.getAttribute("size") || "1em";
+    }
+
+    get tip() {
+      return this.dataset.tip || "Fill style. Click to change";
+    }
+  }
+
+  // cannot use Shadow DOM here as need an access to svg hatches
+  customElements.define("fill-box", FillBox);
+}

public/components/slider-input.js

@@ -0,0 +1,78 @@
+{
+  const style = /* css */ `
+    slider-input {
+      display: flex;
+      align-items: center;
+      gap: .4em;
+    }
+  `;
+
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("type", "text/css");
+  styleElement.innerHTML = style;
+  document.head.appendChild(styleElement);
+}
+
+{
+  const template = document.createElement("template");
+  template.innerHTML = /* html */ `
+    <input type="range" />
+    <input type="number" />
+  `;
+
+  class SliderInput extends HTMLElement {
+    constructor() {
+      super();
+      this.appendChild(template.content.cloneNode(true));
+
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+
+      range.value = number.value = this.value || this.getAttribute("value") || 50;
+      range.min = number.min = this.getAttribute("min") || 0;
+      range.max = number.max = this.getAttribute("max") || 100;
+      range.step = number.step = this.getAttribute("step") || 1;
+
+      range.addEventListener("input", this.handleEvent.bind(this));
+      number.addEventListener("input", this.handleEvent.bind(this));
+      range.addEventListener("change", this.handleEvent.bind(this));
+      number.addEventListener("change", this.handleEvent.bind(this));
+    }
+
+    handleEvent(e) {
+      const value = e.target.value;
+      const isNaN = Number.isNaN(Number(value));
+      if (isNaN || value === "") return e.stopPropagation();
+
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+      this.value = range.value = number.value = value;
+
+      this.dispatchEvent(
+        new CustomEvent(e.type, {
+          detail: {value},
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    set value(value) {
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+      range.value = number.value = value;
+    }
+
+    get value() {
+      const number = this.querySelector("input[type=number]");
+      return number.value;
+    }
+
+    get valueAsNumber() {
+      const number = this.querySelector("input[type=number]");
+      return number.valueAsNumber;
+    }
+  }
+
+  customElements.define("slider-input", SliderInput);
+}