wip

demo/.gowebbuild.json

@@ -0,0 +1,27 @@
+{
+  "Watch": {
+    "Path": "./src"
+  },
+  "Serve": {
+    "Path": "./dist"
+  },
+  "Copy": [
+    {
+      "Src": "./index.html",
+      "Dest": "./dist"
+    }
+  ],
+  "ESBuild": {
+    "EntryPoints": [
+      "./src/demo.js"
+    ],
+    "Outdir":    "./dist",
+    "Sourcemap": 1,
+    "Format":    3,
+    "Splitting": true,
+    "Platform":  0,
+    "Bundle":    true,
+    "Write":     true,
+    "LogLevel":  3
+  }
+}

demo/dist/demo.js

@@ -0,0 +1,992 @@
+// ../node_modules/@lit/reactive-element/css-tag.js
+var t = window.ShadowRoot && (window.ShadyCSS === void 0 || window.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var e = Symbol();
+var n = /* @__PURE__ */ new Map();
+var s = class {
+  constructor(t3, n5) {
+    if (this._$cssResult$ = true, n5 !== e)
+      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t3;
+  }
+  get styleSheet() {
+    let e4 = n.get(this.cssText);
+    return t && e4 === void 0 && (n.set(this.cssText, e4 = new CSSStyleSheet()), e4.replaceSync(this.cssText)), e4;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var o = (t3) => new s(typeof t3 == "string" ? t3 : t3 + "", e);
+var r = (t3, ...n5) => {
+  const o5 = t3.length === 1 ? t3[0] : n5.reduce((e4, n6, s5) => e4 + ((t4) => {
+    if (t4._$cssResult$ === true)
+      return t4.cssText;
+    if (typeof t4 == "number")
+      return t4;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t4 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(n6) + t3[s5 + 1], t3[0]);
+  return new s(o5, e);
+};
+var i = (e4, n5) => {
+  t ? e4.adoptedStyleSheets = n5.map((t3) => t3 instanceof CSSStyleSheet ? t3 : t3.styleSheet) : n5.forEach((t3) => {
+    const n6 = document.createElement("style"), s5 = window.litNonce;
+    s5 !== void 0 && n6.setAttribute("nonce", s5), n6.textContent = t3.cssText, e4.appendChild(n6);
+  });
+};
+var S = t ? (t3) => t3 : (t3) => t3 instanceof CSSStyleSheet ? ((t4) => {
+  let e4 = "";
+  for (const n5 of t4.cssRules)
+    e4 += n5.cssText;
+  return o(e4);
+})(t3) : t3;
+
+// ../node_modules/@lit/reactive-element/reactive-element.js
+var s2;
+var e2 = window.trustedTypes;
+var r2 = e2 ? e2.emptyScript : "";
+var h = window.reactiveElementPolyfillSupport;
+var o2 = { toAttribute(t3, i3) {
+  switch (i3) {
+    case Boolean:
+      t3 = t3 ? r2 : null;
+      break;
+    case Object:
+    case Array:
+      t3 = t3 == null ? t3 : JSON.stringify(t3);
+  }
+  return t3;
+}, fromAttribute(t3, i3) {
+  let s5 = t3;
+  switch (i3) {
+    case Boolean:
+      s5 = t3 !== null;
+      break;
+    case Number:
+      s5 = t3 === null ? null : Number(t3);
+      break;
+    case Object:
+    case Array:
+      try {
+        s5 = JSON.parse(t3);
+      } catch (t4) {
+        s5 = null;
+      }
+  }
+  return s5;
+} };
+var n2 = (t3, i3) => i3 !== t3 && (i3 == i3 || t3 == t3);
+var l = { attribute: true, type: String, converter: o2, reflect: false, hasChanged: n2 };
+var a = class extends HTMLElement {
+  constructor() {
+    super(), this._$Et = /* @__PURE__ */ new Map(), this.isUpdatePending = false, this.hasUpdated = false, this._$Ei = null, this.o();
+  }
+  static addInitializer(t3) {
+    var i3;
+    (i3 = this.l) !== null && i3 !== void 0 || (this.l = []), this.l.push(t3);
+  }
+  static get observedAttributes() {
+    this.finalize();
+    const t3 = [];
+    return this.elementProperties.forEach((i3, s5) => {
+      const e4 = this._$Eh(s5, i3);
+      e4 !== void 0 && (this._$Eu.set(e4, s5), t3.push(e4));
+    }), t3;
+  }
+  static createProperty(t3, i3 = l) {
+    if (i3.state && (i3.attribute = false), this.finalize(), this.elementProperties.set(t3, i3), !i3.noAccessor && !this.prototype.hasOwnProperty(t3)) {
+      const s5 = typeof t3 == "symbol" ? Symbol() : "__" + t3, e4 = this.getPropertyDescriptor(t3, s5, i3);
+      e4 !== void 0 && Object.defineProperty(this.prototype, t3, e4);
+    }
+  }
+  static getPropertyDescriptor(t3, i3, s5) {
+    return { get() {
+      return this[i3];
+    }, set(e4) {
+      const r4 = this[t3];
+      this[i3] = e4, this.requestUpdate(t3, r4, s5);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t3) {
+    return this.elementProperties.get(t3) || l;
+  }
+  static finalize() {
+    if (this.hasOwnProperty("finalized"))
+      return false;
+    this.finalized = true;
+    const t3 = Object.getPrototypeOf(this);
+    if (t3.finalize(), this.elementProperties = new Map(t3.elementProperties), this._$Eu = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
+      const t4 = this.properties, i3 = [...Object.getOwnPropertyNames(t4), ...Object.getOwnPropertySymbols(t4)];
+      for (const s5 of i3)
+        this.createProperty(s5, t4[s5]);
+    }
+    return this.elementStyles = this.finalizeStyles(this.styles), true;
+  }
+  static finalizeStyles(i3) {
+    const s5 = [];
+    if (Array.isArray(i3)) {
+      const e4 = new Set(i3.flat(1 / 0).reverse());
+      for (const i4 of e4)
+        s5.unshift(S(i4));
+    } else
+      i3 !== void 0 && s5.push(S(i3));
+    return s5;
+  }
+  static _$Eh(t3, i3) {
+    const s5 = i3.attribute;
+    return s5 === false ? void 0 : typeof s5 == "string" ? s5 : typeof t3 == "string" ? t3.toLowerCase() : void 0;
+  }
+  o() {
+    var t3;
+    this._$Ep = new Promise((t4) => this.enableUpdating = t4), this._$AL = /* @__PURE__ */ new Map(), this._$Em(), this.requestUpdate(), (t3 = this.constructor.l) === null || t3 === void 0 || t3.forEach((t4) => t4(this));
+  }
+  addController(t3) {
+    var i3, s5;
+    ((i3 = this._$Eg) !== null && i3 !== void 0 ? i3 : this._$Eg = []).push(t3), this.renderRoot !== void 0 && this.isConnected && ((s5 = t3.hostConnected) === null || s5 === void 0 || s5.call(t3));
+  }
+  removeController(t3) {
+    var i3;
+    (i3 = this._$Eg) === null || i3 === void 0 || i3.splice(this._$Eg.indexOf(t3) >>> 0, 1);
+  }
+  _$Em() {
+    this.constructor.elementProperties.forEach((t3, i3) => {
+      this.hasOwnProperty(i3) && (this._$Et.set(i3, this[i3]), delete this[i3]);
+    });
+  }
+  createRenderRoot() {
+    var t3;
+    const s5 = (t3 = this.shadowRoot) !== null && t3 !== void 0 ? t3 : this.attachShadow(this.constructor.shadowRootOptions);
+    return i(s5, this.constructor.elementStyles), s5;
+  }
+  connectedCallback() {
+    var t3;
+    this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), (t3 = this._$Eg) === null || t3 === void 0 || t3.forEach((t4) => {
+      var i3;
+      return (i3 = t4.hostConnected) === null || i3 === void 0 ? void 0 : i3.call(t4);
+    });
+  }
+  enableUpdating(t3) {
+  }
+  disconnectedCallback() {
+    var t3;
+    (t3 = this._$Eg) === null || t3 === void 0 || t3.forEach((t4) => {
+      var i3;
+      return (i3 = t4.hostDisconnected) === null || i3 === void 0 ? void 0 : i3.call(t4);
+    });
+  }
+  attributeChangedCallback(t3, i3, s5) {
+    this._$AK(t3, s5);
+  }
+  _$ES(t3, i3, s5 = l) {
+    var e4, r4;
+    const h3 = this.constructor._$Eh(t3, s5);
+    if (h3 !== void 0 && s5.reflect === true) {
+      const n5 = ((r4 = (e4 = s5.converter) === null || e4 === void 0 ? void 0 : e4.toAttribute) !== null && r4 !== void 0 ? r4 : o2.toAttribute)(i3, s5.type);
+      this._$Ei = t3, n5 == null ? this.removeAttribute(h3) : this.setAttribute(h3, n5), this._$Ei = null;
+    }
+  }
+  _$AK(t3, i3) {
+    var s5, e4, r4;
+    const h3 = this.constructor, n5 = h3._$Eu.get(t3);
+    if (n5 !== void 0 && this._$Ei !== n5) {
+      const t4 = h3.getPropertyOptions(n5), l4 = t4.converter, a3 = (r4 = (e4 = (s5 = l4) === null || s5 === void 0 ? void 0 : s5.fromAttribute) !== null && e4 !== void 0 ? e4 : typeof l4 == "function" ? l4 : null) !== null && r4 !== void 0 ? r4 : o2.fromAttribute;
+      this._$Ei = n5, this[n5] = a3(i3, t4.type), this._$Ei = null;
+    }
+  }
+  requestUpdate(t3, i3, s5) {
+    let e4 = true;
+    t3 !== void 0 && (((s5 = s5 || this.constructor.getPropertyOptions(t3)).hasChanged || n2)(this[t3], i3) ? (this._$AL.has(t3) || this._$AL.set(t3, i3), s5.reflect === true && this._$Ei !== t3 && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t3, s5))) : e4 = false), !this.isUpdatePending && e4 && (this._$Ep = this._$E_());
+  }
+  async _$E_() {
+    this.isUpdatePending = true;
+    try {
+      await this._$Ep;
+    } catch (t4) {
+      Promise.reject(t4);
+    }
+    const t3 = this.scheduleUpdate();
+    return t3 != null && await t3, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var t3;
+    if (!this.isUpdatePending)
+      return;
+    this.hasUpdated, this._$Et && (this._$Et.forEach((t4, i4) => this[i4] = t4), this._$Et = void 0);
+    let i3 = false;
+    const s5 = this._$AL;
+    try {
+      i3 = this.shouldUpdate(s5), i3 ? (this.willUpdate(s5), (t3 = this._$Eg) === null || t3 === void 0 || t3.forEach((t4) => {
+        var i4;
+        return (i4 = t4.hostUpdate) === null || i4 === void 0 ? void 0 : i4.call(t4);
+      }), this.update(s5)) : this._$EU();
+    } catch (t4) {
+      throw i3 = false, this._$EU(), t4;
+    }
+    i3 && this._$AE(s5);
+  }
+  willUpdate(t3) {
+  }
+  _$AE(t3) {
+    var i3;
+    (i3 = this._$Eg) === null || i3 === void 0 || i3.forEach((t4) => {
+      var i4;
+      return (i4 = t4.hostUpdated) === null || i4 === void 0 ? void 0 : i4.call(t4);
+    }), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t3)), this.updated(t3);
+  }
+  _$EU() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$Ep;
+  }
+  shouldUpdate(t3) {
+    return true;
+  }
+  update(t3) {
+    this._$EC !== void 0 && (this._$EC.forEach((t4, i3) => this._$ES(i3, this[i3], t4)), this._$EC = void 0), this._$EU();
+  }
+  updated(t3) {
+  }
+  firstUpdated(t3) {
+  }
+};
+a.finalized = true, a.elementProperties = /* @__PURE__ */ new Map(), a.elementStyles = [], a.shadowRootOptions = { mode: "open" }, h == null || h({ ReactiveElement: a }), ((s2 = globalThis.reactiveElementVersions) !== null && s2 !== void 0 ? s2 : globalThis.reactiveElementVersions = []).push("1.3.1");
+
+// ../node_modules/lit-html/lit-html.js
+var t2;
+var i2 = globalThis.trustedTypes;
+var s3 = i2 ? i2.createPolicy("lit-html", { createHTML: (t3) => t3 }) : void 0;
+var e3 = `lit$${(Math.random() + "").slice(9)}$`;
+var o3 = "?" + e3;
+var n3 = `<${o3}>`;
+var l2 = document;
+var h2 = (t3 = "") => l2.createComment(t3);
+var r3 = (t3) => t3 === null || typeof t3 != "object" && typeof t3 != "function";
+var d = Array.isArray;
+var u = (t3) => {
+  var i3;
+  return d(t3) || typeof ((i3 = t3) === null || i3 === void 0 ? void 0 : i3[Symbol.iterator]) == "function";
+};
+var c = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var v = /-->/g;
+var a2 = />/g;
+var f = />|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g;
+var _ = /'/g;
+var m = /"/g;
+var g = /^(?:script|style|textarea|title)$/i;
+var p = (t3) => (i3, ...s5) => ({ _$litType$: t3, strings: i3, values: s5 });
+var $ = p(1);
+var y = p(2);
+var b = Symbol.for("lit-noChange");
+var w = Symbol.for("lit-nothing");
+var T = /* @__PURE__ */ new WeakMap();
+var x = (t3, i3, s5) => {
+  var e4, o5;
+  const n5 = (e4 = s5 == null ? void 0 : s5.renderBefore) !== null && e4 !== void 0 ? e4 : i3;
+  let l4 = n5._$litPart$;
+  if (l4 === void 0) {
+    const t4 = (o5 = s5 == null ? void 0 : s5.renderBefore) !== null && o5 !== void 0 ? o5 : null;
+    n5._$litPart$ = l4 = new N(i3.insertBefore(h2(), t4), t4, void 0, s5 != null ? s5 : {});
+  }
+  return l4._$AI(t3), l4;
+};
+var A = l2.createTreeWalker(l2, 129, null, false);
+var C = (t3, i3) => {
+  const o5 = t3.length - 1, l4 = [];
+  let h3, r4 = i3 === 2 ? "<svg>" : "", d2 = c;
+  for (let i4 = 0; i4 < o5; i4++) {
+    const s5 = t3[i4];
+    let o6, u3, p2 = -1, $2 = 0;
+    for (; $2 < s5.length && (d2.lastIndex = $2, u3 = d2.exec(s5), u3 !== null); )
+      $2 = d2.lastIndex, d2 === c ? u3[1] === "!--" ? d2 = v : u3[1] !== void 0 ? d2 = a2 : u3[2] !== void 0 ? (g.test(u3[2]) && (h3 = RegExp("</" + u3[2], "g")), d2 = f) : u3[3] !== void 0 && (d2 = f) : d2 === f ? u3[0] === ">" ? (d2 = h3 != null ? h3 : c, p2 = -1) : u3[1] === void 0 ? p2 = -2 : (p2 = d2.lastIndex - u3[2].length, o6 = u3[1], d2 = u3[3] === void 0 ? f : u3[3] === '"' ? m : _) : d2 === m || d2 === _ ? d2 = f : d2 === v || d2 === a2 ? d2 = c : (d2 = f, h3 = void 0);
+    const y2 = d2 === f && t3[i4 + 1].startsWith("/>") ? " " : "";
+    r4 += d2 === c ? s5 + n3 : p2 >= 0 ? (l4.push(o6), s5.slice(0, p2) + "$lit$" + s5.slice(p2) + e3 + y2) : s5 + e3 + (p2 === -2 ? (l4.push(void 0), i4) : y2);
+  }
+  const u2 = r4 + (t3[o5] || "<?>") + (i3 === 2 ? "</svg>" : "");
+  if (!Array.isArray(t3) || !t3.hasOwnProperty("raw"))
+    throw Error("invalid template strings array");
+  return [s3 !== void 0 ? s3.createHTML(u2) : u2, l4];
+};
+var E = class {
+  constructor({ strings: t3, _$litType$: s5 }, n5) {
+    let l4;
+    this.parts = [];
+    let r4 = 0, d2 = 0;
+    const u2 = t3.length - 1, c2 = this.parts, [v2, a3] = C(t3, s5);
+    if (this.el = E.createElement(v2, n5), A.currentNode = this.el.content, s5 === 2) {
+      const t4 = this.el.content, i3 = t4.firstChild;
+      i3.remove(), t4.append(...i3.childNodes);
+    }
+    for (; (l4 = A.nextNode()) !== null && c2.length < u2; ) {
+      if (l4.nodeType === 1) {
+        if (l4.hasAttributes()) {
+          const t4 = [];
+          for (const i3 of l4.getAttributeNames())
+            if (i3.endsWith("$lit$") || i3.startsWith(e3)) {
+              const s6 = a3[d2++];
+              if (t4.push(i3), s6 !== void 0) {
+                const t5 = l4.getAttribute(s6.toLowerCase() + "$lit$").split(e3), i4 = /([.?@])?(.*)/.exec(s6);
+                c2.push({ type: 1, index: r4, name: i4[2], strings: t5, ctor: i4[1] === "." ? M : i4[1] === "?" ? H : i4[1] === "@" ? I : S2 });
+              } else
+                c2.push({ type: 6, index: r4 });
+            }
+          for (const i3 of t4)
+            l4.removeAttribute(i3);
+        }
+        if (g.test(l4.tagName)) {
+          const t4 = l4.textContent.split(e3), s6 = t4.length - 1;
+          if (s6 > 0) {
+            l4.textContent = i2 ? i2.emptyScript : "";
+            for (let i3 = 0; i3 < s6; i3++)
+              l4.append(t4[i3], h2()), A.nextNode(), c2.push({ type: 2, index: ++r4 });
+            l4.append(t4[s6], h2());
+          }
+        }
+      } else if (l4.nodeType === 8)
+        if (l4.data === o3)
+          c2.push({ type: 2, index: r4 });
+        else {
+          let t4 = -1;
+          for (; (t4 = l4.data.indexOf(e3, t4 + 1)) !== -1; )
+            c2.push({ type: 7, index: r4 }), t4 += e3.length - 1;
+        }
+      r4++;
+    }
+  }
+  static createElement(t3, i3) {
+    const s5 = l2.createElement("template");
+    return s5.innerHTML = t3, s5;
+  }
+};
+function P(t3, i3, s5 = t3, e4) {
+  var o5, n5, l4, h3;
+  if (i3 === b)
+    return i3;
+  let d2 = e4 !== void 0 ? (o5 = s5._$Cl) === null || o5 === void 0 ? void 0 : o5[e4] : s5._$Cu;
+  const u2 = r3(i3) ? void 0 : i3._$litDirective$;
+  return (d2 == null ? void 0 : d2.constructor) !== u2 && ((n5 = d2 == null ? void 0 : d2._$AO) === null || n5 === void 0 || n5.call(d2, false), u2 === void 0 ? d2 = void 0 : (d2 = new u2(t3), d2._$AT(t3, s5, e4)), e4 !== void 0 ? ((l4 = (h3 = s5)._$Cl) !== null && l4 !== void 0 ? l4 : h3._$Cl = [])[e4] = d2 : s5._$Cu = d2), d2 !== void 0 && (i3 = P(t3, d2._$AS(t3, i3.values), d2, e4)), i3;
+}
+var V = class {
+  constructor(t3, i3) {
+    this.v = [], this._$AN = void 0, this._$AD = t3, this._$AM = i3;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  p(t3) {
+    var i3;
+    const { el: { content: s5 }, parts: e4 } = this._$AD, o5 = ((i3 = t3 == null ? void 0 : t3.creationScope) !== null && i3 !== void 0 ? i3 : l2).importNode(s5, true);
+    A.currentNode = o5;
+    let n5 = A.nextNode(), h3 = 0, r4 = 0, d2 = e4[0];
+    for (; d2 !== void 0; ) {
+      if (h3 === d2.index) {
+        let i4;
+        d2.type === 2 ? i4 = new N(n5, n5.nextSibling, this, t3) : d2.type === 1 ? i4 = new d2.ctor(n5, d2.name, d2.strings, this, t3) : d2.type === 6 && (i4 = new L(n5, this, t3)), this.v.push(i4), d2 = e4[++r4];
+      }
+      h3 !== (d2 == null ? void 0 : d2.index) && (n5 = A.nextNode(), h3++);
+    }
+    return o5;
+  }
+  m(t3) {
+    let i3 = 0;
+    for (const s5 of this.v)
+      s5 !== void 0 && (s5.strings !== void 0 ? (s5._$AI(t3, s5, i3), i3 += s5.strings.length - 2) : s5._$AI(t3[i3])), i3++;
+  }
+};
+var N = class {
+  constructor(t3, i3, s5, e4) {
+    var o5;
+    this.type = 2, this._$AH = w, this._$AN = void 0, this._$AA = t3, this._$AB = i3, this._$AM = s5, this.options = e4, this._$Cg = (o5 = e4 == null ? void 0 : e4.isConnected) === null || o5 === void 0 || o5;
+  }
+  get _$AU() {
+    var t3, i3;
+    return (i3 = (t3 = this._$AM) === null || t3 === void 0 ? void 0 : t3._$AU) !== null && i3 !== void 0 ? i3 : this._$Cg;
+  }
+  get parentNode() {
+    let t3 = this._$AA.parentNode;
+    const i3 = this._$AM;
+    return i3 !== void 0 && t3.nodeType === 11 && (t3 = i3.parentNode), t3;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t3, i3 = this) {
+    t3 = P(this, t3, i3), r3(t3) ? t3 === w || t3 == null || t3 === "" ? (this._$AH !== w && this._$AR(), this._$AH = w) : t3 !== this._$AH && t3 !== b && this.$(t3) : t3._$litType$ !== void 0 ? this.T(t3) : t3.nodeType !== void 0 ? this.k(t3) : u(t3) ? this.S(t3) : this.$(t3);
+  }
+  M(t3, i3 = this._$AB) {
+    return this._$AA.parentNode.insertBefore(t3, i3);
+  }
+  k(t3) {
+    this._$AH !== t3 && (this._$AR(), this._$AH = this.M(t3));
+  }
+  $(t3) {
+    this._$AH !== w && r3(this._$AH) ? this._$AA.nextSibling.data = t3 : this.k(l2.createTextNode(t3)), this._$AH = t3;
+  }
+  T(t3) {
+    var i3;
+    const { values: s5, _$litType$: e4 } = t3, o5 = typeof e4 == "number" ? this._$AC(t3) : (e4.el === void 0 && (e4.el = E.createElement(e4.h, this.options)), e4);
+    if (((i3 = this._$AH) === null || i3 === void 0 ? void 0 : i3._$AD) === o5)
+      this._$AH.m(s5);
+    else {
+      const t4 = new V(o5, this), i4 = t4.p(this.options);
+      t4.m(s5), this.k(i4), this._$AH = t4;
+    }
+  }
+  _$AC(t3) {
+    let i3 = T.get(t3.strings);
+    return i3 === void 0 && T.set(t3.strings, i3 = new E(t3)), i3;
+  }
+  S(t3) {
+    d(this._$AH) || (this._$AH = [], this._$AR());
+    const i3 = this._$AH;
+    let s5, e4 = 0;
+    for (const o5 of t3)
+      e4 === i3.length ? i3.push(s5 = new N(this.M(h2()), this.M(h2()), this, this.options)) : s5 = i3[e4], s5._$AI(o5), e4++;
+    e4 < i3.length && (this._$AR(s5 && s5._$AB.nextSibling, e4), i3.length = e4);
+  }
+  _$AR(t3 = this._$AA.nextSibling, i3) {
+    var s5;
+    for ((s5 = this._$AP) === null || s5 === void 0 || s5.call(this, false, true, i3); t3 && t3 !== this._$AB; ) {
+      const i4 = t3.nextSibling;
+      t3.remove(), t3 = i4;
+    }
+  }
+  setConnected(t3) {
+    var i3;
+    this._$AM === void 0 && (this._$Cg = t3, (i3 = this._$AP) === null || i3 === void 0 || i3.call(this, t3));
+  }
+};
+var S2 = class {
+  constructor(t3, i3, s5, e4, o5) {
+    this.type = 1, this._$AH = w, this._$AN = void 0, this.element = t3, this.name = i3, this._$AM = e4, this.options = o5, s5.length > 2 || s5[0] !== "" || s5[1] !== "" ? (this._$AH = Array(s5.length - 1).fill(new String()), this.strings = s5) : this._$AH = w;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t3, i3 = this, s5, e4) {
+    const o5 = this.strings;
+    let n5 = false;
+    if (o5 === void 0)
+      t3 = P(this, t3, i3, 0), n5 = !r3(t3) || t3 !== this._$AH && t3 !== b, n5 && (this._$AH = t3);
+    else {
+      const e5 = t3;
+      let l4, h3;
+      for (t3 = o5[0], l4 = 0; l4 < o5.length - 1; l4++)
+        h3 = P(this, e5[s5 + l4], i3, l4), h3 === b && (h3 = this._$AH[l4]), n5 || (n5 = !r3(h3) || h3 !== this._$AH[l4]), h3 === w ? t3 = w : t3 !== w && (t3 += (h3 != null ? h3 : "") + o5[l4 + 1]), this._$AH[l4] = h3;
+    }
+    n5 && !e4 && this.C(t3);
+  }
+  C(t3) {
+    t3 === w ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t3 != null ? t3 : "");
+  }
+};
+var M = class extends S2 {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  C(t3) {
+    this.element[this.name] = t3 === w ? void 0 : t3;
+  }
+};
+var k = i2 ? i2.emptyScript : "";
+var H = class extends S2 {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  C(t3) {
+    t3 && t3 !== w ? this.element.setAttribute(this.name, k) : this.element.removeAttribute(this.name);
+  }
+};
+var I = class extends S2 {
+  constructor(t3, i3, s5, e4, o5) {
+    super(t3, i3, s5, e4, o5), this.type = 5;
+  }
+  _$AI(t3, i3 = this) {
+    var s5;
+    if ((t3 = (s5 = P(this, t3, i3, 0)) !== null && s5 !== void 0 ? s5 : w) === b)
+      return;
+    const e4 = this._$AH, o5 = t3 === w && e4 !== w || t3.capture !== e4.capture || t3.once !== e4.once || t3.passive !== e4.passive, n5 = t3 !== w && (e4 === w || o5);
+    o5 && this.element.removeEventListener(this.name, this, e4), n5 && this.element.addEventListener(this.name, this, t3), this._$AH = t3;
+  }
+  handleEvent(t3) {
+    var i3, s5;
+    typeof this._$AH == "function" ? this._$AH.call((s5 = (i3 = this.options) === null || i3 === void 0 ? void 0 : i3.host) !== null && s5 !== void 0 ? s5 : this.element, t3) : this._$AH.handleEvent(t3);
+  }
+};
+var L = class {
+  constructor(t3, i3, s5) {
+    this.element = t3, this.type = 6, this._$AN = void 0, this._$AM = i3, this.options = s5;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t3) {
+    P(this, t3);
+  }
+};
+var z = window.litHtmlPolyfillSupport;
+z == null || z(E, N), ((t2 = globalThis.litHtmlVersions) !== null && t2 !== void 0 ? t2 : globalThis.litHtmlVersions = []).push("2.2.2");
+
+// ../node_modules/lit-element/lit-element.js
+var l3;
+var o4;
+var s4 = class extends a {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Dt = void 0;
+  }
+  createRenderRoot() {
+    var t3, e4;
+    const i3 = super.createRenderRoot();
+    return (t3 = (e4 = this.renderOptions).renderBefore) !== null && t3 !== void 0 || (e4.renderBefore = i3.firstChild), i3;
+  }
+  update(t3) {
+    const i3 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t3), this._$Dt = x(i3, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    var t3;
+    super.connectedCallback(), (t3 = this._$Dt) === null || t3 === void 0 || t3.setConnected(true);
+  }
+  disconnectedCallback() {
+    var t3;
+    super.disconnectedCallback(), (t3 = this._$Dt) === null || t3 === void 0 || t3.setConnected(false);
+  }
+  render() {
+    return b;
+  }
+};
+s4.finalized = true, s4._$litElement$ = true, (l3 = globalThis.litElementHydrateSupport) === null || l3 === void 0 || l3.call(globalThis, { LitElement: s4 });
+var n4 = globalThis.litElementPolyfillSupport;
+n4 == null || n4({ LitElement: s4 });
+((o4 = globalThis.litElementVersions) !== null && o4 !== void 0 ? o4 : globalThis.litElementVersions = []).push("3.2.0");
+
+// ../tp-lc-line.js
+var TpLcLine = class extends s4 {
+  static get styles() {
+    return [
+      r`
+        :host {
+          display: block;
+          padding: 0;
+          margin: 0;
+          height: 4px;
+          background: blue;
+          position: absolute;
+          line-height: 1px;
+          border-radius: 10px;
+          z-index: 99;
+        }
+      `
+    ];
+  }
+  static get properties() {
+    return {
+      thickness: { type: Number }
+    };
+  }
+  constructor() {
+    super();
+    this.thickness = 4;
+  }
+  coords(x1, y1, x2, y2) {
+    const length = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+    const cx = (x1 + x2) / 2 - length / 2;
+    const cy = (y1 + y2) / 2 - this.thickness / 2;
+    const angle = Math.atan2(y1 - y2, x1 - x2) * (180 / Math.PI);
+    this.style.left = `${cx}px`;
+    this.style.top = `${cy}px`;
+    this.style.width = `${length}px`;
+    this.style.transform = `rotate(${angle}deg)`;
+  }
+};
+window.customElements.define("tp-lc-line", TpLcLine);
+
+// ../tp-logic-canvas.js
+var TpLogicCanvas = class extends s4 {
+  static get styles() {
+    return [
+      r`
+        :host {
+          display: block;
+          position: relative;
+          overflow: auto;
+        }
+
+        :host([isDragging]) {
+          user-select: none;
+        }
+
+        .block {
+          background-color: violet;
+        }
+
+        .block2 {
+          background-color: orange;
+        }
+      `
+    ];
+  }
+  render() {
+    const {} = this;
+    return $`
+      <tp-lc-line></tp-lc-line>
+      <slot></slot>
+    `;
+  }
+  static get properties() {
+    return {
+      blocks: { type: Array },
+      isDragging: { type: Boolean, reflect: true },
+      connections: { type: Array }
+    };
+  }
+  constructor() {
+    super();
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onMove = this.onMove.bind(this);
+  }
+  firstUpdated() {
+    this.addEventListener("start-drag", this.onDragStart);
+    this.addEventListener("mousemove", this.onMove);
+  }
+  shouldUpdate(changes) {
+    if (changes.has("connections")) {
+    }
+    return true;
+  }
+  onDragStart(e4) {
+    this.isDragging = true;
+    window.addEventListener("mouseup", () => {
+      this.isDragging = false;
+    }, { once: true });
+    this.startCoords = this.getOffset(e4.detail.target);
+  }
+  onMove(e4) {
+    if (!this.isDragging)
+      return;
+    this.shadowRoot.querySelector("tp-lc-line").coords(this.startCoords.left, this.startCoords.top, e4.pageX, e4.pageY);
+  }
+  getOffset(el) {
+    var rect = el.getBoundingClientRect();
+    return {
+      left: rect.left - 5 - el.offsetWidth / 2 + window.pageXOffset,
+      top: rect.top - 5 - el.offsetHeight / 2 + window.pageYOffset
+    };
+  }
+};
+window.customElements.define("tp-logic-canvas", TpLogicCanvas);
+
+// ../tp-lc-in.js
+var TpLcIn = class extends s4 {
+  static get styles() {
+    return [
+      r`
+        :host {
+          display: flex;
+          align-items: center;
+        }
+
+        .circle {
+          border-radius: 50px;
+          border: 3px solid green;
+          width: 10px;
+          height: 10px;
+          cursor: pointer;
+        }
+
+        .circle:hover {
+          background: green;
+        }
+
+        label {
+          margin-left: 5px;
+        }
+      `
+    ];
+  }
+  render() {
+    const { name } = this;
+    return $`
+      <div class="circle"></div>
+      <label>${name}</label>
+    `;
+  }
+  static get properties() {
+    return {
+      name: { type: String }
+    };
+  }
+};
+window.customElements.define("tp-lc-in", TpLcIn);
+
+// ../tp-lc-out.js
+var TpLcOut = class extends s4 {
+  static get styles() {
+    return [
+      r`
+        :host {
+          display: flex;
+          align-items: center;
+        }
+
+        .circle {
+          border-radius: 50px;
+          border: 3px solid green;
+          width: 10px;
+          height: 10px;
+          cursor: pointer;
+        }
+
+        .circle:hover,
+        :host([isDragging]) .circle {
+          background: green;
+        }
+
+        label {
+          margin-right: 5px;
+        }
+      `
+    ];
+  }
+  render() {
+    const { name } = this;
+    return $`
+      <label>${name}</label>
+      <div class="circle" @mousedown=${this.startDrag}></div>
+    `;
+  }
+  static get properties() {
+    return {
+      name: { type: String },
+      isDragging: { type: Boolean, reflect: true }
+    };
+  }
+  startDrag(e4) {
+    this.isDragging = true;
+    window.addEventListener("mouseup", () => {
+      this.isDragging = false;
+    }, { once: true });
+    this.dispatchEvent(new CustomEvent("start-drag", { detail: e4, bubbles: true, composed: true }));
+  }
+};
+window.customElements.define("tp-lc-out", TpLcOut);
+
+// ../tp-lc-block.js
+var TpLcBlock = class extends s4 {
+  static get blockStyles() {
+    return [
+      r`
+        :host {
+          display: block;
+          position: absolute;
+          padding: 10px;
+        }
+
+        .wrap {
+          display: flex;
+        }
+
+        .inputs, .outputs {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+        }
+
+        .inputs {
+          margin-right: 20px;
+        }
+
+        .outputs {
+          margin-left: 20px;
+        }
+
+        tp-lc-in + tp-lc-in,
+        tp-lc-out + tp-lc-out {
+          margin-top: 10px;
+        }
+      `
+    ];
+  }
+  render() {
+    const {} = this;
+    const inputs = this.inputs || [];
+    const outputs = this.outputs || [];
+    return $`
+      <div class="wrap">
+        ${inputs.length > 0 ? $`
+          <div class="inputs">
+            ${inputs.map((input) => $`
+              <tp-lc-in .name=${input.name}></tp-lc-in>
+              `)}
+          </div>
+          ` : null}
+
+          <div class="inner">
+            ${this.renderContent()}
+          </div>
+
+          <div class="outputs">
+            ${outputs.length > 0 ? $`
+              ${outputs.map((input) => $`
+              <tp-lc-out .name=${input.name}></tp-lc-out>
+            `)}
+          </div>
+        ` : null}
+      </div>
+    `;
+  }
+  static get properties() {
+    return {
+      left: { type: Number },
+      top: { type: Number },
+      inputs: { type: Array },
+      output: { type: Array }
+    };
+  }
+  constructor() {
+    super();
+    this.inputs = [];
+    this.outputs = [];
+  }
+  shouldUpdate(changes) {
+    super.shouldUpdate(changes);
+    if (changes.has("left") || changes.has("top")) {
+      this.style.left = `${this.left || 0}px`;
+      this.style.top = `${this.top || 0}px`;
+    }
+    return true;
+  }
+};
+window.customElements.define("tp-lc-block", TpLcBlock);
+
+// src/simple-block.js
+var SimpleBlock = class extends TpLcBlock {
+  static get styles() {
+    return [
+      ...TpLcBlock.blockStyles,
+      r`
+        :host {
+          display: block;
+          background: #11406b;
+          border-radius: 4px;
+        }
+      `
+    ];
+  }
+  renderContent() {
+    const { title } = this;
+    return $`
+      ${title}<br>
+      ${title}<br>
+      ${title}<br>
+      ${title}<br>
+      ${title}<br>
+    `;
+  }
+  static get properties() {
+    return {
+      title: { type: String }
+    };
+  }
+};
+window.customElements.define("simple-block", SimpleBlock);
+
+// src/demo.js
+var DemoApp = class extends s4 {
+  static get styles() {
+    return [
+      r`
+        :host {
+          display: block;
+          padding: 20px;
+        }
+
+        tp-logic-canvas {
+          width: 1200px;
+          height: 800px;
+          background: #040a13;
+        }
+      `
+    ];
+  }
+  render() {
+    const { blocks, connections } = this;
+    return $`
+      <tp-logic-canvas .connections=${connections}>
+        ${blocks.map((block) => this.renderBlock(block))}
+      </tp-logic-canvas>
+    `;
+  }
+  renderBlock(block) {
+    switch (block.type) {
+      case "simple-block":
+        return $`
+          <simple-block .title=${block.id} .left=${block.left} .top=${block.top} .inputs=${block.inputs} .outputs=${block.outputs}></simple-block>
+        `;
+    }
+  }
+  static get properties() {
+    return {
+      blocks: { type: Array },
+      connections: { type: Array }
+    };
+  }
+  constructor() {
+    super();
+    this.blocks = [
+      {
+        id: "block1",
+        type: "simple-block",
+        left: 200,
+        top: 200,
+        inputs: [
+          { name: "inputA" },
+          { name: "inputB" }
+        ]
+      },
+      {
+        id: "block2",
+        type: "simple-block",
+        left: 40,
+        top: 40,
+        outputs: [
+          { name: "outputA" }
+        ]
+      }
+    ];
+    this.connections = [
+      { srcBlock: "block2", srcOutput: "outputA", destBlock: "block1", destInput: "inputB" }
+    ];
+  }
+};
+window.customElements.define("demo-app", DemoApp);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vbm9kZV9tb2R1bGVzL0BsaXQvcmVhY3RpdmUtZWxlbWVudC9zcmMvY3NzLXRhZy50cyIsICIuLi8uLi9ub2RlX21vZHVsZXMvQGxpdC9yZWFjdGl2ZS1lbGVtZW50L3NyYy9yZWFjdGl2ZS1lbGVtZW50LnRzIiwgIi4uLy4uL25vZGVfbW9kdWxlcy9saXQtaHRtbC9zcmMvbGl0LWh0bWwudHMiLCAiLi4vLi4vbm9kZV9tb2R1bGVzL2xpdC1lbGVtZW50L3NyYy9saXQtZWxlbWVudC50cyIsICIuLi8uLi90cC1sYy1saW5lLmpzIiwgIi4uLy4uL3RwLWxvZ2ljLWNhbnZhcy5qcyIsICIuLi8uLi90cC1sYy1pbi5qcyIsICIuLi8uLi90cC1sYy1vdXQuanMiLCAiLi4vLi4vdHAtbGMtYmxvY2suanMiLCAiLi4vc3JjL3NpbXBsZS1ibG9jay5qcyIsICIuLi9zcmMvZGVtby5qcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IDIwMTkgR29vZ2xlIExMQ1xuICogU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IEJTRC0zLUNsYXVzZVxuICovXG5cbi8qKlxuICogV2hldGhlciB0aGUgY3VycmVudCBicm93c2VyIHN1cHBvcnRzIGBhZG9wdGVkU3R5bGVTaGVldHNgLlxuICovXG5leHBvcnQgY29uc3Qgc3VwcG9ydHNBZG9wdGluZ1N0eWxlU2hlZXRzID1cbiAgd2luZG93LlNoYWRvd1Jvb3QgJiZcbiAgKHdpbmRvdy5TaGFkeUNTUyA9PT0gdW5kZWZpbmVkIHx8IHdpbmRvdy5TaGFkeUNTUy5uYXRpdmVTaGFkb3cpICYmXG4gICdhZG9wdGVkU3R5bGVTaGVldHMnIGluIERvY3VtZW50LnByb3RvdHlwZSAmJlxuICAncmVwbGFjZScgaW4gQ1NTU3R5bGVTaGVldC5wcm90b3R5cGU7XG5cbi8qKlxuICogQSBDU1NSZXN1bHQgb3IgbmF0aXZlIENTU1N0eWxlU2hlZXQuXG4gKlxuICogSW4gYnJvd3NlcnMgdGhhdCBzdXBwb3J0IGNvbnN0cnVjdGlibGUgQ1NTIHN0eWxlIHNoZWV0cywgQ1NTU3R5bGVTaGVldFxuICogb2JqZWN0IGNhbiBiZSB1c2VkIGZvciBzdHlsaW5nIGFsb25nIHNpZGUgQ1NTUmVzdWx0IGZyb20gdGhlIGBjc3NgXG4gKiB0ZW1wbGF0ZSB0YWcuXG4gKi9cbmV4cG9ydCB0eXBlIENTU1Jlc3VsdE9yTmF0aXZlID0gQ1NTUmVzdWx0IHwgQ1NTU3R5bGVTaGVldDtcblxuZXhwb3J0IHR5cGUgQ1NTUmVzdWx0QXJyYXkgPSBBcnJheTxDU1NSZXN1bHRPck5hdGl2ZSB8IENTU1Jlc3VsdEFycmF5PjtcblxuLyoqXG4gKiBBIHNpbmdsZSBDU1NSZXN1bHQsIENTU1N0eWxlU2hlZXQsIG9yIGFuIGFycmF5IG9yIG5lc3RlZCBhcnJheXMgb2YgdGhvc2UuXG4gKi9cbmV4cG9ydCB0eXBlIENTU1Jlc3VsdEdyb3VwID0gQ1NTUmVzdWx0T3JOYXRpdmUgfCBDU1NSZXN1bHRBcnJheTtcblxuY29uc3QgY29uc3RydWN0aW9uVG9rZW4gPSBTeW1ib2woKTtcblxuY29uc3Qgc3R5bGVTaGVldENhY2hlID0gbmV3IE1hcDxzdHJpbmcsIENTU1N0eWxlU2hlZXQ+KCk7XG5cbi8qKlxuICogQSBjb250YWluZXIgZm9yIGEgc3RyaW5nIG9mIENTUyB0ZXh0LCB0aGF0IG1heSBiZSB1c2VkIHRvIGNyZWF0ZSBhIENTU1N0eWxlU2hlZXQuXG4gKlxuICogQ1NTUmVzdWx0IGlzIHRoZSByZXR1cm4gdmFsdWUgb2YgYGNzc2AtdGFnZ2VkIHRlbXBsYXRlIGxpdGVyYWxzIGFuZFxuICogYHVuc2FmZUNTUygpYC4gSW4gb3JkZXIgdG8gZW5zdXJlIHRoYXQgQ1NTUmVzdWx0cyBhcmUgb25seSBjcmVhdGVkIHZpYSB0aGVcbiAqIGBjc3NgIHRhZyBhbmQgYHVuc2FmZUNTUygpYCwgQ1NTUmVzdWx0IGNhbm5vdCBiZSBjb25zdHJ1Y3RlZCBkaXJlY3RseS5cbiAqL1xuZXhwb3J0IGNsYXNzIENTU1Jlc3VsdCB7XG4gIC8vIFRoaXMgcHJvcGVydHkgbmVlZHMgdG8gcmVtYWluIHVubWluaWZpZWQuXG4gIFsnXyRjc3NSZXN1bHQkJ10gPSB0cnVlO1xuICByZWFkb25seSBjc3NUZXh0OiBzdHJpbmc7XG5cbiAgcHJpdmF0ZSBjb25zdHJ1Y3Rvcihjc3NUZXh0OiBzdHJpbmcsIHNhZmVUb2tlbjogc3ltYm9sKSB7XG4gICAgaWYgKHNhZmVUb2tlbiAhPT0gY29uc3RydWN0aW9uVG9rZW4pIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihcbiAgICAgICAgJ0NTU1Jlc3VsdCBpcyBub3QgY29uc3RydWN0YWJsZS4gVXNlIGB1bnNhZmVDU1NgIG9yIGBjc3NgIGluc3RlYWQuJ1xuICAgICAgKTtcbiAgICB9XG4gICAgdGhpcy5jc3NUZXh0ID0gY3NzVGV4dDtcbiAgfVxuXG4gIC8vIE5vdGUsIHRoaXMgaXMgYSBnZXR0ZXIgc28gdGhhdCBpdCdzIGxhenkuIEluIHByYWN0aWNlLCB0aGlzIG1lYW5zXG4gIC8vIHN0eWxlc2hlZXRzIGFyZSBub3QgY3JlYXRlZCB1bnRpbCB0aGUgZmlyc3QgZWxlbWVudCBpbnN0YW5jZSBpcyBtYWRlLlxuICBnZXQgc3R5bGVTaGVldCgpOiBDU1NTdHlsZVNoZWV0IHwgdW5kZWZpbmVkIHtcbiAgICAvLyBOb3RlLCBpZiBgc3VwcG9ydHNBZG9wdGluZ1N0eWxlU2hlZXRzYCBpcyB0cnVlIHRoZW4gd2UgYXNzdW1lXG4gICAgLy8gQ1NTU3R5bGVTaGVldCBpcyBjb25zdHJ1Y3RhYmxlLlxuICAgIGxldCBzdHlsZVNoZWV0ID0gc3R5bGVTaGVldENhY2hlLmdldCh0aGlzLmNzc1RleHQpO1xuICAgIGlmIChzdXBwb3J0c0Fkb3B0aW5nU3R5bGVTaGVldHMgJiYgc3R5bGVTaGVldCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBzdHlsZVNoZWV0Q2FjaGUuc2V0KHRoaXMuY3NzVGV4dCwgKHN0eWxlU2hlZXQgPSBuZXcgQ1NTU3R5bGVTaGVldCgpKSk7XG4gICAgICBzdHlsZVNoZWV0LnJlcGxhY2VTeW5jKHRoaXMuY3NzVGV4dCk7XG4gICAgfVxuICAgIHJldHVybiBzdHlsZVNoZWV0O1xuICB9XG5cbiAgdG9TdHJpbmcoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5jc3NUZXh0O1xuICB9XG59XG5cbnR5cGUgQ29uc3RydWN0YWJsZUNTU1Jlc3VsdCA9IENTU1Jlc3VsdCAmIHtcbiAgbmV3IChjc3NUZXh0OiBzdHJpbmcsIHNhZmVUb2tlbjogc3ltYm9sKTogQ1NTUmVzdWx0O1xufTtcblxuY29uc3QgdGV4dEZyb21DU1NSZXN1bHQgPSAodmFsdWU6IENTU1Jlc3VsdEdyb3VwIHwgbnVtYmVyKSA9PiB7XG4gIC8vIFRoaXMgcHJvcGVydHkgbmVlZHMgdG8gcmVtYWluIHVubWluaWZpZWQuXG4gIGlmICgodmFsdWUgYXMgQ1NTUmVzdWx0KVsnXyRjc3NSZXN1bHQkJ10gPT09IHRydWUpIHtcbiAgICByZXR1cm4gKHZhbHVlIGFzIENTU1Jlc3VsdCkuY3NzVGV4dDtcbiAgfSBlbHNlIGlmICh0eXBlb2YgdmFsdWUgPT09ICdudW1iZXInKSB7XG4gICAgcmV0dXJuIHZhbHVlO1xuICB9IGVsc2Uge1xuICAgIHRocm93IG5ldyBFcnJvcihcbiAgICAgIGBWYWx1ZSBwYXNzZWQgdG8gJ2NzcycgZnVuY3Rpb24gbXVzdCBiZSBhICdjc3MnIGZ1bmN0aW9uIHJlc3VsdDogYCArXG4gICAgICAgIGAke3ZhbHVlfS4gVXNlICd1bnNhZmVDU1MnIHRvIHBhc3Mgbm9uLWxpdGVyYWwgdmFsdWVzLCBidXQgdGFrZSBjYXJlIGAgK1xuICAgICAgICBgdG8gZW5zdXJlIHBhZ2Ugc2VjdXJpdHkuYFxuICAgICk7XG4gIH1cbn07XG5cbi8qKlxuICogV3JhcCBhIHZhbHVlIGZvciBpbnRlcnBvbGF0aW9uIGluIGEge0BsaW5rY29kZSBjc3N9IHRhZ2dlZCB0ZW1wbGF0ZSBsaXRlcmFsLlxuICpcbiAqIFRoaXMgaXMgdW5zYWZlIGJlY2F1c2UgdW50cnVzdGVkIENTUyB0ZXh0IGNhbiBiZSB1c2VkIHRvIHBob25lIGhvbWVcbiAqIG9yIGV4ZmlsdHJhdGUgZGF0YSB0byBhbiBhdHRhY2tlciBjb250cm9sbGVkIHNpdGUuIFRha2UgY2FyZSB0byBvbmx5IHVzZVxuICogdGhpcyB3aXRoIHRydXN0Z
Line truncated

demo/dist/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Demo</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+  <script type="module" src="./demo.js"></script>
+
+  <style>
+    body {
+      font-family: 'Source Code Pro', monospace;
+      color: #cccccc;
+      background: #1d1d1d;
+      font-size: 16px;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <demo-app></demo-app>
+</body>
+</html>

demo/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Demo</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+  <script type="module" src="./demo.js"></script>
+
+  <style>
+    body {
+      font-family: 'Source Code Pro', monospace;
+      color: #cccccc;
+      background: #1d1d1d;
+      font-size: 16px;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <demo-app></demo-app>
+</body>
+</html>

demo/src/demo.js

@@ -0,0 +1,86 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import '../../tp-logic-canvas.js';
+import './simple-block.js';
+import { LitElement, html, css } from 'lit';
+
+class DemoApp extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          padding: 20px;
+        }
+
+        tp-logic-canvas {
+          width: 1200px;
+          height: 800px;
+          background: #040a13;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { blocks, connections } = this;
+
+    return html`
+      <tp-logic-canvas .connections=${connections}>
+        ${blocks.map(block => this.renderBlock(block))}
+      </tp-logic-canvas>
+    `;
+  }
+
+  renderBlock(block) {
+    switch (block.type) {
+      case 'simple-block':
+        return html`
+          <simple-block .title=${block.id} .left=${block.left} .top=${block.top} .inputs=${block.inputs} .outputs=${block.outputs}></simple-block>
+        `;
+    }
+  }
+
+  static get properties() {
+    return {
+      blocks: { type: Array },
+      connections: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.blocks = [
+      {
+        id: 'block1',
+        type: 'simple-block',
+        left: 200,
+        top: 200,
+        inputs: [
+          { name: 'inputA' },
+          { name: 'inputB' }
+        ],
+      },
+      {
+        id: 'block2',
+        type: 'simple-block',
+        left: 40,
+        top: 40,
+        outputs: [
+          { name: 'outputA' },
+        ],
+      }
+    ];
+
+    this.connections = [
+      { srcBlock: 'block2', srcOutput: 'outputA', destBlock: 'block1', destInput: 'inputB' }
+    ]
+  }
+}
+
+window.customElements.define('demo-app', DemoApp);

demo/src/simple-block.js

@@ -0,0 +1,43 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { TpLcBlock } from '../../tp-lc-block';
+import { html, css } from 'lit';
+
+class SimpleBlock extends TpLcBlock {
+  static get styles() {
+    return [
+      ...TpLcBlock.blockStyles,
+      css`
+        :host {
+          display: block;
+          background: #11406b;
+          border-radius: 4px;
+        }
+      `
+    ];
+  }
+
+  renderContent() {
+    const { title } = this;
+
+    return html`
+      ${title}<br>
+      ${title}<br>
+      ${title}<br>
+      ${title}<br>
+      ${title}<br>
+    `;
+  }
+
+  static get properties() {
+    return {
+      title: { type: String },
+    };
+  }
+}
+
+window.customElements.define('simple-block', SimpleBlock);

package-lock.json

@@ -0,0 +1,97 @@
+{
+  "name": "@tp/tp-element",
+  "version": "0.0.1",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@tp/tp-element",
+      "version": "0.0.1",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lit": "^2.2.2"
+      }
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.3.1",
+      "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz",
+      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
+      "license": "MIT"
+    },
+    "node_modules/lit": {
+      "version": "2.2.2",
+      "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.2.tgz",
+      "integrity": "sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.2.0",
+      "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
+      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.2.2",
+      "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.2.tgz",
+      "integrity": "sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  },
+  "dependencies": {
+    "@lit/reactive-element": {
+      "version": "1.3.1",
+      "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz",
+      "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw=="
+    },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "lit": {
+      "version": "2.2.2",
+      "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.2.tgz",
+      "integrity": "sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.0",
+      "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
+      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.2.2",
+      "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.2.tgz",
+      "integrity": "sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  }
+}

package.json

@@ -1,18 +1,18 @@
 {
-  "name": "@tp/tp-element",
-  "version": "0.0.1",
+  "name": "@tp/tp-logic-canvas",
+  "version": "1.0.0",
   "description": "",
-  "main": "tp-element.js",
+  "main": "tp-logic-canvas.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
+    "url": "https://gitea.codeblob.work/tp-elements/tp-logic-canvas.git"
   },
   "author": "trading_peter",
   "license": "Apache-2.0",
   "dependencies": {
-    "lit": "^2.2.0"
+    "lit": "^2.2.2"
   }
 }

tp-element.js

@@ -1,35 +0,0 @@
-/**
-@license
-Copyright (c) 2022 trading_peter
-This program is available under Apache License Version 2.0
-*/
-
-import { LitElement, html, css } from 'lit';
-
-class TpElement extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-        }
-      `
-    ];
-  }
-
-  render() {
-    const { } = this;
-
-    return html`
-
-    `;
-  }
-
-  static get properties() {
-    return { };
-  }
-
-
-}
-
-window.customElements.define('tp-element', TpElement);

tp-lc-block.js

@@ -0,0 +1,104 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import './tp-lc-in.js';
+import './tp-lc-out.js';
+import { LitElement, html, css } from 'lit';
+
+export class TpLcBlock extends LitElement {
+  static get blockStyles() {
+    return [
+      css`
+        :host {
+          display: block;
+          position: absolute;
+          padding: 10px;
+        }
+
+        .wrap {
+          display: flex;
+        }
+
+        .inputs, .outputs {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+        }
+
+        .inputs {
+          margin-right: 20px;
+        }
+
+        .outputs {
+          margin-left: 20px;
+        }
+
+        tp-lc-in + tp-lc-in,
+        tp-lc-out + tp-lc-out {
+          margin-top: 10px;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { } = this;
+    const inputs = this.inputs || [];
+    const outputs = this.outputs || [];
+
+    return html`
+      <div class="wrap">
+        ${inputs.length > 0 ? html`
+          <div class="inputs">
+            ${inputs.map(input => html`
+              <tp-lc-in .name=${input.name}></tp-lc-in>
+              `)}
+          </div>
+          ` : null}
+
+          <div class="inner">
+            ${this.renderContent()}
+          </div>
+
+          <div class="outputs">
+            ${outputs.length > 0 ? html`
+              ${outputs.map(input => html`
+              <tp-lc-out .name=${input.name}></tp-lc-out>
+            `)}
+          </div>
+        ` : null}
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      left: { type: Number },
+      top: { type: Number },
+      inputs: { type: Array },
+      output: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.inputs = [];
+    this.outputs = [];
+  }
+
+  shouldUpdate(changes) {
+    super.shouldUpdate(changes);
+
+    if (changes.has('left') || changes.has('top')) {
+      this.style.left = `${this.left || 0}px`;
+      this.style.top = `${this.top || 0}px`;
+    }
+
+    return true;
+  }
+}
+
+window.customElements.define('tp-lc-block', TpLcBlock);

tp-lc-in.js

@@ -0,0 +1,53 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+
+class TpLcIn extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          align-items: center;
+        }
+
+        .circle {
+          border-radius: 50px;
+          border: 3px solid green;
+          width: 10px;
+          height: 10px;
+          cursor: pointer;
+        }
+
+        .circle:hover {
+          background: green;
+        }
+
+        label {
+          margin-left: 5px;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { name } = this;
+
+    return html`
+      <div class="circle"></div>
+      <label>${name}</label>
+    `;
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+    };
+  }
+}
+
+window.customElements.define('tp-lc-in', TpLcIn);

tp-lc-line.js

@@ -0,0 +1,55 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+
+class TpLcLine extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          padding: 0;
+          margin: 0;
+          height: 4px;
+          background: blue;
+          position: absolute;
+          line-height: 1px;
+          border-radius: 10px;
+          z-index: 99;
+        }
+      `
+    ];
+  }
+
+  static get properties() {
+    return {
+      thickness: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.thickness = 4;
+  }
+
+  coords(x1, y1, x2, y2) {
+    // distance
+    const length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
+    // center
+    const cx = ((x1 + x2) / 2) - (length / 2);
+    const cy = ((y1 + y2) / 2) - (this.thickness / 2);
+    // angle
+    const angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
+    // make hr
+    this.style.left = `${cx}px`
+    this.style.top = `${cy}px`;
+    this.style.width = `${length}px`;
+    this.style.transform = `rotate(${angle}deg)`;
+  }
+}
+
+window.customElements.define('tp-lc-line', TpLcLine);

tp-lc-out.js

@@ -0,0 +1,64 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+
+class TpLcOut extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          align-items: center;
+        }
+
+        .circle {
+          border-radius: 50px;
+          border: 3px solid green;
+          width: 10px;
+          height: 10px;
+          cursor: pointer;
+        }
+
+        .circle:hover,
+        :host([isDragging]) .circle {
+          background: green;
+        }
+
+        label {
+          margin-right: 5px;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { name } = this;
+
+    return html`
+      <label>${name}</label>
+      <div class="circle" @mousedown=${this.startDrag}></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+      isDragging: { type: Boolean, reflect: true },
+    };
+  }
+
+  startDrag(e) {
+    this.isDragging = true;
+    window.addEventListener('mouseup', () => {
+      this.isDragging = false;
+    }, { once: true });
+
+    this.dispatchEvent(new CustomEvent('start-drag', { detail: e, bubbles: true, composed: true }));
+  }
+}
+
+window.customElements.define('tp-lc-out', TpLcOut);

tp-logic-canvas.js

@@ -0,0 +1,97 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import './tp-lc-line.js';
+import { LitElement, html, css } from 'lit';
+
+class TpLogicCanvas extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          position: relative;
+          overflow: auto;
+        }
+
+        :host([isDragging]) {
+          user-select: none;
+        }
+
+        .block {
+          background-color: violet;
+        }
+
+        .block2 {
+          background-color: orange;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { } = this;
+
+    return html`
+      <tp-lc-line></tp-lc-line>
+      <slot></slot>
+    `;
+  }
+
+  static get properties() {
+    return {
+      blocks: { type: Array },
+      isDragging: { type: Boolean, reflect: true },
+      connections: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onMove = this.onMove.bind(this);
+  }
+
+  firstUpdated() {
+    this.addEventListener('start-drag', this.onDragStart);
+    this.addEventListener('mousemove', this.onMove);
+  }
+
+  shouldUpdate(changes) {
+    if (changes.has('connections')) {
+
+    }
+
+    return true;
+  }
+
+  onDragStart(e) {
+    this.isDragging = true;
+
+    window.addEventListener('mouseup', () => {
+      this.isDragging = false;
+    }, { once: true });
+
+    this.startCoords = this.getOffset(e.detail.target);
+  }
+
+  onMove(e) {
+    if (!this.isDragging) return;
+
+    this.shadowRoot.querySelector('tp-lc-line').coords(this.startCoords.left, this.startCoords.top, e.pageX, e.pageY);
+  }
+
+  getOffset(el) {
+    var rect = el.getBoundingClientRect();
+
+    return {
+      left: (rect.left - 5 - (el.offsetWidth / 2)) + window.pageXOffset,
+      top: (rect.top - 5 - (el.offsetHeight / 2)) + window.pageYOffset,
+    };
+  }
+}
+
+window.customElements.define('tp-logic-canvas', TpLogicCanvas);