fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes. - lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode. - lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
@@ -0,0 +1,96 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import "@material/mwc-icon-button";
+import "@material/mwc-icon";
+
+@customElement("rich-action")
+export class RichAction extends LitElement {
+  static styles = css`
+    * {
+      --mdc-icon-size: var(--icon-size);
+      --mdc-icon-button-size: var(--icon-size);
+    }
+    section {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    section * {
+      margin: 2px;
+    }
+    mwc-icon-button[active] {
+      color: var(--rich-action-active-color);
+    }
+    mwc-icon {
+      cursor: pointer;
+    }
+  `;
+
+  @property({ type: String }) command = "";
+  @property({ type: String }) value?: string;
+  @property({ type: String }) icon = "info";
+  @property({ type: Boolean }) active = false;
+  @property({ type: Array, hasChanged: () => true }) values: Option[] = [];
+
+  render() {
+    const { icon, command, value, active, values } = this;
+    const hasItems = values.length > 0;
+    return html`<section>
+      ${hasItems
+        ? html` <mwc-icon>${icon}</mwc-icon>
+            <select
+              @change=${(e: Event) => {
+                const event = e as CustomEvent;
+                const select = event.target as HTMLSelectElement;
+                const selectedValue = select.value;
+                if (selectedValue === "--") {
+                  editorCommand("removeFormat", undefined);
+                } else {
+                  editorCommand(command, selectedValue);
+                }
+              }}
+            >
+              ${values.map(
+                (v) =>
+                  html`<option value=${v.value} ?selected=${v.value === value}>
+                    ${v.name}
+                  </option>`
+              )}
+            </select>`
+        : html`<mwc-icon-button
+            ?active="${active}"
+            icon=${icon}
+            @click=${() => {
+              if (command) {
+                editorCommand(command, value);
+              } else {
+                this.dispatchEvent(
+                  new Event("action", {
+                    bubbles: true,
+                    composed: true,
+                  })
+                );
+              }
+            }}
+          ></mwc-icon-button>`}
+      <div><slot></slot></div>
+    </section>`;
+  }
+}
+
+interface Option {
+  name: string;
+  value: string;
+}
+
+export function editorCommand(command: string, value?: string) {
+  document.execCommand(command, true, value);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rich-action": RichAction;
+  }
+}