993 lines
267 KiB
JavaScript
993 lines
267 KiB
JavaScript
|
// ../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+KCk7XG5cbi8qKlxuICogQSBjb250YWluZXIgZm9yIGEgc3RyaW5nIG9mIENTUyB0ZXh0LCB0aGF0IG1heSBiZSB1c2VkIHRvIGNyZWF0ZSBhIENTU1N0eWxlU2hlZXQuXG4gKlxuICogQ1NTUmVzdWx0IGlzIHRoZSByZXR1cm4gdmFsdWUgb2YgYGNzc2AtdGFnZ2VkIHRlbXBsYXRlIGxpdGVyYWxzIGFuZFxuICogYHVuc2FmZUNTUygpYC4gSW4gb3JkZXIgdG8gZW5zdXJlIHRoYXQgQ1NTUmVzdWx0cyBhcmUgb25seSBjcmVhdGVkIHZpYSB0aGVcbiAqIGBjc3NgIHRhZyBhbmQgYHVuc2FmZUNTUygpYCwgQ1NTUmVzdWx0IGNhbm5vdCBiZSBjb25zdHJ1Y3RlZCBkaXJlY3RseS5cbiAqL1xuZXhwb3J0IGNsYXNzIENTU1Jlc3VsdCB7XG4gIC8vIFRoaXMgcHJvcGVydHkgbmVlZHMgdG8gcmVtYWluIHVubWluaWZpZWQuXG4gIFsnXyRjc3NSZXN1bHQkJ10gPSB0cnVlO1xuICByZWFkb25seSBjc3NUZXh0OiBzdHJpbmc7XG5cbiAgcHJpdmF0ZSBjb25zdHJ1Y3Rvcihjc3NUZXh0OiBzdHJpbmcsIHNhZmVUb2tlbjogc3ltYm9sKSB7XG4gICAgaWYgKHNhZmVUb2tlbiAhPT0gY29uc3RydWN0aW9uVG9rZW4pIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihcbiAgICAgICAgJ0NTU1Jlc3VsdCBpcyBub3QgY29uc3RydWN0YWJsZS4gVXNlIGB1bnNhZmVDU1NgIG9yIGBjc3NgIGluc3RlYWQuJ1xuICAgICAgKTtcbiAgICB9XG4gICAgdGhpcy5jc3NUZXh0ID0gY3NzVGV4dDtcbiAgfVxuXG4gIC8vIE5vdGUsIHRoaXMgaXMgYSBnZXR0ZXIgc28gdGhhdCBpdCdzIGxhenkuIEluIHByYWN0aWNlLCB0aGlzIG1lYW5zXG4gIC8vIHN0eWxlc2hlZXRzIGFyZSBub3QgY3JlYXRlZCB1bnRpbCB0aGUgZmlyc3QgZWxlbWVudCBpbnN0YW5jZSBpcyBtYWRlLlxuICBnZXQgc3R5bGVTaGVldCgpOiBDU1NTdHlsZVNoZWV0IHwgdW5kZWZpbmVkIHtcbiAgICAvLyBOb3RlLCBpZiBgc3VwcG9ydHNBZG9wdGluZ1N0eWxlU2hlZXRzYCBpcyB0cnVlIHRoZW4gd2UgYXNzdW1lXG4gICAgLy8gQ1NTU3R5bGVTaGVldCBpcyBjb25zdHJ1Y3RhYmxlLlxuICAgIGxldCBzdHlsZVNoZWV0ID0gc3R5bGVTaGVldENhY2hlLmdldCh0aGlzLmNzc1RleHQpO1xuICAgIGlmIChzdXBwb3J0c0Fkb3B0aW5nU3R5bGVTaGVldHMgJiYgc3R5bGVTaGVldCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBzdHlsZVNoZWV0Q2FjaGUuc2V0KHRoaXMuY3NzVGV4dCwgKHN0eWxlU2hlZXQgPSBuZXcgQ1NTU3R5bGVTaGVldCgpKSk7XG4gICAgICBzdHlsZVNoZWV0LnJlcGxhY2VTeW5jKHRoaXMuY3NzVGV4dCk7XG4gICAgfVxuICAgIHJldHVybiBzdHlsZVNoZWV0O1xuICB9XG5cbiAgdG9TdHJpbmcoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5jc3NUZXh0O1xuICB9XG59XG5cbnR5cGUgQ29uc3RydWN0YWJsZUNTU1Jlc3VsdCA9IENTU1Jlc3VsdCAmIHtcbiAgbmV3IChjc3NUZXh0OiBzdHJpbmcsIHNhZmVUb2tlbjogc3ltYm9sKTogQ1NTUmVzdWx0O1xufTtcblxuY29uc3QgdGV4dEZyb21DU1NSZXN1bHQgPSAodmFsdWU6IENTU1Jlc3VsdEdyb3VwIHwgbnVtYmVyKSA9PiB7XG4gIC8vIFRoaXMgcHJvcGVydHkgbmVlZHMgdG8gcmVtYWluI
|