+
+
this.handleDown(e, "element")}
@pointermove=${(e: any) =>
this.handleMove(e, "element", (delta) => {
- this.moveElement(
- e.target.parentElement === this
- ? e.target
- : e.target.parentElement,
- delta
- );
+ const target = e.target as HTMLElement;
+ const child = target.assignedSlot ? target : target.closest('[slot]') || target;
+ this.moveElement(child as SupportedNode, delta);
})}
- @touchstart=${(e: any) => this.handleDown(e, "element")}
- @touchmove=${(e: any) =>
- this.handleMove(e, "element", (delta) =>
- this.moveElement(
- e.target.parentElement === this
- ? e.target
- : e.target.parentElement,
- delta
- )
- )}
>
@@ -139,25 +146,24 @@ export class DraggableDOM extends LitElement {
moveCanvas(delta: Offset) {
this.offset.x += delta.x;
this.offset.y += delta.y;
- this.root.style.setProperty("--offset-x", `${this.offset.x}px`);
- this.root.style.setProperty("--offset-y", `${this.offset.y}px`);
- this.container.style.setProperty("--dx", `${this.offset.x}px`);
- this.container.style.setProperty("--dy", `${this.offset.y}px`);
+ this.style.setProperty("--offset-x", `${this.offset.x}px`);
+ this.style.setProperty("--offset-y", `${this.offset.y}px`);
+ this.container.style.setProperty("--pan-x", `${this.offset.x}px`);
+ this.container.style.setProperty("--pan-y", `${this.offset.y}px`);
}
moveElement(child: SupportedNode, delta: Offset) {
- const getNumber = (key: "--dx" | "--dy", fallback: number) => {
- const saved = child.style.getPropertyValue(key);
+ const getNumber = (key: string) => {
+ const saved = (child as HTMLElement).style.getPropertyValue(key);
if (saved.length > 0) {
return parseFloat(saved.replace("px", ""));
}
- return fallback;
+ return 0;
};
- const dx = getNumber("--dx", 0) + delta.x;
- const dy = getNumber("--dy", 0) + delta.y;
- child.style.transform = `translate(${dx}px, ${dy}px)`;
- child.style.setProperty("--dx", `${dx}px`);
- child.style.setProperty("--dy", `${dy}px`);
+ const dx = getNumber("--dx") + delta.x;
+ const dy = getNumber("--dy") + delta.y;
+ (child as HTMLElement).style.setProperty("--dx", `${dx}px`);
+ (child as HTMLElement).style.setProperty("--dy", `${dy}px`);
}
}
diff --git a/lit-file-based-routing/src/components/menu-button.ts b/lit-components/lit-file-based-routing/components/menu-button.ts
similarity index 100%
rename from lit-file-based-routing/src/components/menu-button.ts
rename to lit-components/lit-file-based-routing/components/menu-button.ts
diff --git a/lit-file-based-routing/src/generated-app.ts b/lit-components/lit-file-based-routing/generated-app.ts
similarity index 100%
rename from lit-file-based-routing/src/generated-app.ts
rename to lit-components/lit-file-based-routing/generated-app.ts
diff --git a/lit-file-based-routing/src/pages/404.ts b/lit-components/lit-file-based-routing/pages/404.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/404.ts
rename to lit-components/lit-file-based-routing/pages/404.ts
diff --git a/lit-file-based-routing/src/pages/custom.not.nested.route.ts b/lit-components/lit-file-based-routing/pages/custom.not.nested.route.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/custom.not.nested.route.ts
rename to lit-components/lit-file-based-routing/pages/custom.not.nested.route.ts
diff --git a/lit-file-based-routing/src/pages/dashboard.ts b/lit-components/lit-file-based-routing/pages/dashboard.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/dashboard.ts
rename to lit-components/lit-file-based-routing/pages/dashboard.ts
diff --git a/lit-file-based-routing/src/pages/dashboard/account.ts b/lit-components/lit-file-based-routing/pages/dashboard/account.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/dashboard/account.ts
rename to lit-components/lit-file-based-routing/pages/dashboard/account.ts
diff --git a/lit-file-based-routing/src/pages/dashboard/account/:id.ts b/lit-components/lit-file-based-routing/pages/dashboard/account/:id.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/dashboard/account/:id.ts
rename to lit-components/lit-file-based-routing/pages/dashboard/account/:id.ts
diff --git a/lit-file-based-routing/src/pages/dashboard/account/index.ts b/lit-components/lit-file-based-routing/pages/dashboard/account/index.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/dashboard/account/index.ts
rename to lit-components/lit-file-based-routing/pages/dashboard/account/index.ts
diff --git a/lit-file-based-routing/src/pages/dashboard/index.ts b/lit-components/lit-file-based-routing/pages/dashboard/index.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/dashboard/index.ts
rename to lit-components/lit-file-based-routing/pages/dashboard/index.ts
diff --git a/lit-file-based-routing/src/pages/dashboard/overview.ts b/lit-components/lit-file-based-routing/pages/dashboard/overview.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/dashboard/overview.ts
rename to lit-components/lit-file-based-routing/pages/dashboard/overview.ts
diff --git a/lit-file-based-routing/src/pages/index.ts b/lit-components/lit-file-based-routing/pages/index.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/index.ts
rename to lit-components/lit-file-based-routing/pages/index.ts
diff --git a/lit-file-based-routing/src/pages/root.ts b/lit-components/lit-file-based-routing/pages/root.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/root.ts
rename to lit-components/lit-file-based-routing/pages/root.ts
diff --git a/lit-file-based-routing/src/pages/settings.ts b/lit-components/lit-file-based-routing/pages/settings.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/settings.ts
rename to lit-components/lit-file-based-routing/pages/settings.ts
diff --git a/lit-file-based-routing/src/pages/settings/admin.ts b/lit-components/lit-file-based-routing/pages/settings/admin.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/settings/admin.ts
rename to lit-components/lit-file-based-routing/pages/settings/admin.ts
diff --git a/lit-file-based-routing/src/pages/settings/index.ts b/lit-components/lit-file-based-routing/pages/settings/index.ts
similarity index 100%
rename from lit-file-based-routing/src/pages/settings/index.ts
rename to lit-components/lit-file-based-routing/pages/settings/index.ts
diff --git a/lit-components/lit-file-based-routing/router.test.ts b/lit-components/lit-file-based-routing/router.test.ts
new file mode 100644
index 0000000..82da738
--- /dev/null
+++ b/lit-components/lit-file-based-routing/router.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, test } from "vitest";
+import "./generated-app";
+
+describe("Lit File-Based Router Component", () => {
+ test("registers generated-app custom element successfully", () => {
+ expect(customElements.get("generated-app")).toBeDefined();
+ });
+
+ test("mounts router application container successfully", async () => {
+ document.body.innerHTML = "
";
+ await window.happyDOM.whenAsyncComplete();
+
+ const element = document.body.querySelector("generated-app");
+ expect(element).toBeDefined();
+ expect(element?.shadowRoot).toBeDefined();
+
+ // Await lazy route imports to complete before ending test and tearing down Happy DOM context
+ await new Promise((resolve) => setTimeout(resolve, 150));
+ });
+});
diff --git a/lit-force-graph/src/classes/context.ts b/lit-components/lit-force-graph/classes/context.ts
similarity index 69%
rename from lit-force-graph/src/classes/context.ts
rename to lit-components/lit-force-graph/classes/context.ts
index c427ed9..d8d8111 100644
--- a/lit-force-graph/src/classes/context.ts
+++ b/lit-components/lit-force-graph/classes/context.ts
@@ -4,6 +4,7 @@ export interface RenderContext {
data: GraphData;
element: HTMLElement;
onHover: (node?: GraphNode) => void;
+ instance?: any;
}
-export type Renderer = (context: RenderContext) => void;
+export type Renderer = (context: RenderContext) => any;
diff --git a/lit-force-graph/src/classes/graph.ts b/lit-components/lit-force-graph/classes/graph.ts
similarity index 100%
rename from lit-force-graph/src/classes/graph.ts
rename to lit-components/lit-force-graph/classes/graph.ts
diff --git a/lit-components/lit-force-graph/force-graph.test.ts b/lit-components/lit-force-graph/force-graph.test.ts
new file mode 100644
index 0000000..0b35cb8
--- /dev/null
+++ b/lit-components/lit-force-graph/force-graph.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+import "./lit-force-graph";
+
+describe("Lit Force Graph Component", () => {
+ test("registers lit-force-graph custom element successfully", () => {
+ expect(customElements.get("lit-force-graph")).toBeDefined();
+ });
+
+ test("mounts lit-force-graph container successfully", async () => {
+ document.body.innerHTML = "
";
+ await window.happyDOM.whenAsyncComplete();
+
+ const element = document.body.querySelector("lit-force-graph");
+ expect(element).toBeDefined();
+ expect(element?.shadowRoot).toBeDefined();
+ });
+});
diff --git a/lit-force-graph/src/lit-force-graph.ts b/lit-components/lit-force-graph/lit-force-graph.ts
similarity index 56%
rename from lit-force-graph/src/lit-force-graph.ts
rename to lit-components/lit-force-graph/lit-force-graph.ts
index 80ae0d0..f992696 100644
--- a/lit-force-graph/src/lit-force-graph.ts
+++ b/lit-components/lit-force-graph/lit-force-graph.ts
@@ -1,9 +1,7 @@
-import { html, css, LitElement } from "lit";
+import { html, css, LitElement, PropertyValues } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { Renderer } from "./classes/context";
import { GraphData, GraphNode } from "./classes/graph";
-import { render as render2D } from "./modes/mode-2d";
-import { render as render3D } from "./modes/mode-3d";
export const tagName = "lit-force-graph";
@@ -11,24 +9,24 @@ export const tagName = "lit-force-graph";
export class LitForceGraph extends LitElement {
static styles = css`
:host {
+ display: block;
background-color: var(--graph-background-color, #000011);
color: var(--graph-foreground-color, #ffffff);
width: var(--graph-width, 100%);
height: var(--graph-height, 100vh);
+ position: relative;
}
#graph {
width: 100%;
height: 100%;
- width: var(--graph-width, 100%);
- height: var(--graph-height, 100vh);
}
#controls {
position: absolute;
top: 20px;
right: 20px;
- z-index: 100 !important;
+ z-index: 100;
display: flex;
flex-direction: column;
align-items: flex-end;
@@ -41,10 +39,11 @@ export class LitForceGraph extends LitElement {
position: absolute;
top: 10px;
left: 10px;
- z-index: 100 !important;
+ z-index: 100;
display: flex;
flex-direction: column;
align-items: flex-start;
+ pointer-events: none;
}
#tooltips {
@@ -57,6 +56,7 @@ export class LitForceGraph extends LitElement {
align-items: center;
text-align: center;
justify-content: center;
+ pointer-events: none;
}
.node-tooltip {
@@ -65,18 +65,12 @@ export class LitForceGraph extends LitElement {
border-radius: 5px;
font-size: 12px;
padding: 5px;
- opacity: 0.67;
+ opacity: 0.8;
}
#graph-description {
opacity: 0.67;
}
-
- .scene-tooltip {
- color: var(--graph-foreground-color, #ffffff);
- background-color: transparent;
- display: none;
- }
`;
@query("#graph") graph!: HTMLElement;
@@ -84,15 +78,17 @@ export class LitForceGraph extends LitElement {
@property() mode = "2D";
@property({ type: Object }) data?: GraphData;
@state() hovered?: GraphNode;
+ @state() private _instance?: any;
- renderers = new Map
([
- ["2D", render2D],
- ["3D", render3D],
+ renderers = new Map Promise>([
+ ["2D", () => import("./modes/mode-2d").then((m) => m.render)],
+ ["3D", () => import("./modes/mode-3d").then((m) => m.render)],
+ ["AR", () => import("./modes/mode-ar").then((m) => m.render)],
+ ["VR", () => import("./modes/mode-vr").then((m) => m.render)],
]);
render() {
return html`
@@ -100,16 +96,16 @@ export class LitForceGraph extends LitElement {
Render mode
-
+
${Array.from(this.renderers.keys()).map((mode) => {
- return html` ${mode} `;
+ return html` ${mode} `;
})}
${this.data?.name}
-
${this?.data?.description}
+
${this.data?.description}
-
-
- 
-
-
-
-There is also an example on the Lit playground [here](https://lit.dev/playground/#project=W3sibmFtZSI6ImxpdC1odG1sLXRhYmxlLnRzIiwiY29udGVudCI6ImltcG9ydCB7IGh0bWwsIGNzcywgTGl0RWxlbWVudCB9IGZyb20gXCJsaXRcIjtcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSBcImxpdC9kZWNvcmF0b3JzLmpzXCI7XG5cbnR5cGUgT2JqZWN0RGF0YSA9IHsgW2tleTogc3RyaW5nXTogYW55IH07XG5cbkBjdXN0b21FbGVtZW50KFwibGl0LWh0bWwtdGFibGVcIilcbmV4cG9ydCBjbGFzcyBMaXRIdG1sVGFibGUgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgQHByb3BlcnR5KCkgc3JjID0gXCJcIjtcblxuICBkYXRhPzogT2JqZWN0RGF0YVtdO1xuXG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgXG4gICAgdHIge1xuICAgICAgdGV4dC1hbGlnbjogdmFyKC0tdGFibGUtdHItdGV4dC1hbGlnbiwgbGVmdCk7XG4gICAgICB2ZXJ0aWNhbC1hbGlnbjogdmFyKC0tdGFibGUtdHItdmVydGljYWwtYWxpZ24sIHRvcCk7XG4gICAgICBwYWRkaW5nOiB2YXIoLS10YWJsZS10ci1wYWRkaW5nLCAxMHB4KTtcbiAgICB9XG4gIGA7XG5cbiAgcmVuZGVyKCkge1xuICAgIC8vIENoZWNrIGlmIGRhdGEgaXMgbG9hZGVkXG4gICAgaWYgKCF0aGlzLmRhdGEpIHtcbiAgICAgIHJldHVybiBodG1sYDxzbG90IG5hbWU9XCJsb2FkaW5nXCI-TG9hZGluZy4uLjwvc2xvdD5gO1xuICAgIH1cbiAgICAvLyBDaGVjayBpZiBpdGVtcyBhcmUgbm90IGVtcHR5XG4gICAgaWYgKHRoaXMuZGF0YS5sZW5ndGggPT09IDApIHtcbiAgICAgIHJldHVybiBodG1sYDxzbG90IG5hbWU9XCJlbXB0eVwiPk5vIEl0ZW1zIEZvdW5kITwvc2xvdD5gO1xuICAgIH1cbiAgICAvLyBDb252ZXJ0IEpTT04gdG8gSFRNTCBUYWJsZVxuICAgIHJldHVybiBodG1sYFxuICAgICAgPHRhYmxlPlxuICAgICAgICA8dGhlYWQ-XG4gICAgICAgICAgPHRyPlxuICAgICAgICAgICAgJHtPYmplY3Qua2V5cyh0aGlzLmRhdGFbMF0pLm1hcCgoa2V5KSA9PiB7XG4gICAgICAgICAgICAgIGNvbnN0IG5hbWUgPSBrZXkucmVwbGFjZSgvXFxiKFthLXpdKS9nLCAoXywgdmFsKSA9PlxuICAgICAgICAgICAgICAgIHZhbC50b1VwcGVyQ2FzZSgpXG4gICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgIHJldHVybiBodG1sYDx0aD5cbiAgICAgICAgICAgICAgICA8c2xvdCBuYW1lPVwiJHtrZXl9XCI-JHtuYW1lfTwvc2xvdD5cbiAgICAgICAgICAgICAgPC90aD5gO1xuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgPC90cj5cbiAgICAgICAgPC90aGVhZD5cbiAgICAgICAgPHRib2R5PlxuICAgICAgICAgICR7dGhpcy5kYXRhLm1hcCgoaXRlbSkgPT4ge1xuICAgICAgICAgICAgcmV0dXJuIGh0bWxgXG4gICAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgICAke09iamVjdC52YWx1ZXMoaXRlbSkubWFwKCh2YWwpID0-IHtcbiAgICAgICAgICAgICAgICAgIHJldHVybiBodG1sYDx0ZD4ke3ZhbH08L3RkPmA7XG4gICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgIDwvdHI-XG4gICAgICAgICAgICBgO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L3Rib2R5PlxuICAgICAgPC90YWJsZT5cbiAgICBgO1xuICB9XG5cbiAgYXN5bmMgZmlyc3RVcGRhdGVkKCkge1xuICAgIGF3YWl0IHRoaXMuZmV0Y2hEYXRhKCk7XG4gIH1cblxuICBhc3luYyBmZXRjaERhdGEoKSB7XG4gICAgbGV0IF9kYXRhOiBhbnk7XG4gICAgaWYgKHRoaXMuc3JjLmxlbmd0aCA-IDApIHtcbiAgICAgIF9kYXRhID0gYXdhaXQgZmV0Y2godGhpcy5zcmMpLnRoZW4oKHJlcykgPT4gcmVzLmpzb24oKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnN0IGVsZW0gPSB0aGlzLnBhcmVudEVsZW1lbnQ_LnF1ZXJ5U2VsZWN0b3IoXG4gICAgICAgICdzY3JpcHRbdHlwZT1cImFwcGxpY2F0aW9uL2pzb25cIl0nXG4gICAgICApIGFzIEhUTUxTY3JpcHRFbGVtZW50O1xuICAgICAgaWYgKGVsZW0pIF9kYXRhID0gSlNPTi5wYXJzZShlbGVtLmlubmVySFRNTCk7XG4gICAgfVxuICAgIF9kYXRhID8_PSBbXTtcbiAgICB0aGlzLmRhdGEgPSB0aGlzLnRyYW5zZm9ybShfZGF0YSk7XG4gICAgdGhpcy5yZXF1ZXN0VXBkYXRlKCk7XG4gIH1cblxuICB0cmFuc2Zvcm0oZGF0YTogYW55KSB7XG4gICAgcmV0dXJuIGRhdGE7XG4gIH1cbn1cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuPGhlYWQ-XG4gIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiIC8-XG4gIDxsaW5rIHJlbD1cImljb25cIiB0eXBlPVwiaW1hZ2Uvc3ZnK3htbFwiIGhyZWY9XCIvc3JjL2Zhdmljb24uc3ZnXCIgLz5cbiAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIiAvPlxuICA8dGl0bGU-SlNPTiB0byBMaXQgSFRNTCBUYWJsZTwvdGl0bGU-XG4gIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbGl0LWh0bWwtdGFibGUuanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cblxuPGJvZHk-XG4gIDxsaXQtaHRtbC10YWJsZSBzcmM9XCJodHRwczovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vcG9zdHNcIj5cbiAgICA8IS0tIDxzcGFuIHNsb3Q9XCJ0aXRsZVwiIHN0eWxlPVwiY29sb3I6IHJlZDtcIj5UaXRsZTwvc3Bhbj4gLS0-XG4gICAgPCEtLSA8c2NyaXB0IHR5cGU9XCJhcHBsaWNhdGlvbi9qc29uXCI-XG4gICAgICBbXG4gICAgICAgIHtcbiAgICAgICAgICBcImlkXCI6IFwiMFwiLFxuICAgICAgICAgIFwibmFtZVwiOiBcIkZpcnN0IEl0ZW1cIlxuICAgICAgICB9XG4gICAgICBdXG4gICAgPC9zY3JpcHQ-IC0tPlxuICA8L2xpdC1odG1sLXRhYmxlPlxuXG48L2JvZHk-XG5cbjwvaHRtbD4ifV0).
diff --git a/lit-html-table/doc/editor.png b/lit-html-table/doc/editor.png
deleted file mode 100644
index 8f8e5a5..0000000
Binary files a/lit-html-table/doc/editor.png and /dev/null differ
diff --git a/lit-html-table/doc/finished.png b/lit-html-table/doc/finished.png
deleted file mode 100644
index 8516026..0000000
Binary files a/lit-html-table/doc/finished.png and /dev/null differ
diff --git a/lit-html-table/index.html b/lit-html-table/index.html
deleted file mode 100644
index 2846e5b..0000000
--- a/lit-html-table/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-
-
-
-
-