--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/EditChoice.ts	Sun May 29 01:43:11 2022 -0700
@@ -0,0 +1,112 @@
+// see light9/editchoice.py for gtk version
+import debug from "debug";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { NamedNode } from "n3";
+
+const log = debug("editchoice");
+const RDFS = "http://www.w3.org/2000/01/rdf-schema#";
+
+function setupDrop(
+  senseElem: HTMLElement,
+  highlightElem: HTMLElement,
+  coordinateOriginElem: HTMLElement | null,
+  onDrop: (uri: NamedNode, pos: Vector | null) => void
+) {
+  const highlight = () => highlightElem.classList.add("dragging");
+  const unhighlight = () => highlightElem.classList.remove("dragging");
+
+  senseElem.addEventListener("drag", (event: DragEvent) => {});
+
+  senseElem.addEventListener("dragstart", (event: DragEvent) => {});
+
+  senseElem.addEventListener("dragend", (event: DragEvent) => {});
+
+  senseElem.addEventListener("dragover", (event: DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer!.dropEffect = "copy";
+    highlight();
+  });
+
+  senseElem.addEventListener("dragenter", (event: DragEvent) => {
+    highlight();
+  });
+
+  senseElem.addEventListener("dragleave", (event: DragEvent) => {
+    unhighlight();
+  });
+
+  senseElem.addEventListener("drop", (event: DragEvent) => {
+    event.preventDefault();
+    const uri = new NamedNode(event.dataTransfer!.getData("text/uri-list"));
+
+    let pos: Vector | null = null;
+    if (coordinateOriginElem != null) {
+      const root = coordinateOriginElem.getBoundingClientRect();
+      pos = $V([event.pageX - root.left, event.pageY - root.top]);
+    }
+
+    try {
+      onDrop(uri, pos);
+    } catch (e) {
+      log(e);
+    }
+    unhighlight();
+  });
+}
+
+// Picks a URI based on the caller setting the property OR
+// the user drag-and-dropping a text/uri-list resource (probably
+// an <resource-display> or <a href> tag)
+@customElement("edit-choice")
+export class EditChoice extends LitElement {
+  @property() uri: NamedNode | null = null;
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        background: #141448;
+        min-width: 10em;
+        padding: 3px 8px;
+      }
+      .dragging {
+        background: rgba(126, 52, 245, 0.0784313725490196);
+        box-shadow: 0 0 20px #ffff00;
+      }
+      a {
+        color: #8e8eff;
+        padding: 3px;
+        display: inline-block;
+        font-size: 145%;
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <resource-display .uri=${this.uri} rename></resource-display>
+      <button @click=${this.unlink}>Unlink</button>
+    `;
+  }
+
+  constructor() {
+    super();
+    setupDrop(this, this, null, this._setUri.bind(this));
+  }
+
+  // updated(changedProperties: PropertyValues) {
+  //   log('cp' ,changedProperties)
+  //   if (changedProperties.has("box")) {
+  //     log('setupdrop', this.box)
+  //     setupDrop(this.box, this.box, null, this._setUri.bind(this));
+  //   }
+  // }
+
+  _setUri(u: any) {
+    this.uri = u;
+    this.dispatchEvent(new CustomEvent("edited"));
+  }
+
+  unlink() {
+    return this._setUri(null);
+  }
+}

--- a/light9/web/edit-choice.html	Sun May 29 01:42:05 2022 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,33 +0,0 @@
-<link rel="import" href="/lib/polymer/polymer.html">
-<link rel="import" href="resource-display.html">
-
-<!-- see light9/editchoice.py for gtk version -->
-<dom-module id="edit-choice">
-  <template>
-    <style>
-     #box {
-         display: inline-block;
-         background: #141448;
-         min-width: 10em;
-         padding: 3px 8px;
-     }
-     #box.dragging {
-         background: rgba(126, 52, 245, 0.0784313725490196);
-         box-shadow: 0 0 20px #ffff00;
-     }
-     a {
-         color: #8e8eff;
-         padding: 3px;
-         display: inline-block;
-         font-size: 145%;
-     }
-     
-    </style>
-    <div id="box">
-      <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>
-      <button on-click="unlink">Unlink</button>
-    </div>
-  </template>
-  <script src="coffee_element.js"></script>
-  <script src="edit-choice.js"></script>
-</dom-module>