light9 Changeset - fe807af851c8

Changeset - fe807af851c8

Parent rev.

Child rev.

[Not reviewed]

default

1 0 1

drewp@bigasterisk.com - 3 years ago 2022-05-29 08:43:11
drewp@bigasterisk.com

partial port of editchoice

1 file changed with 96 insertions and 17 deletions:

light9/web/EditChoice.ts

0 comments (0 inline, 0 general)

light9/web/EditChoice.ts

➞

Show inline comments

@@ file renamed from light9/web/edit-choice.html to light9/web/EditChoice.ts @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="resource-display.html">
 // 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();
   });
 <!-- see light9/editchoice.py for gtk version -->
 <dom-module id="edit-choice">
   <template>
     <style>
      #box {
   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;
+     }
-     #box.dragging {
+      .dragging {
          background: rgba(126, 52, 245, 0.0784313725490196);
          box-shadow: 0 0 20px #ffff00;
+     }
@@ @@ -21,13 +79,34 @@ @@
          display: inline-block;
          font-size: 145%;
+     }
     `,
   ];
   render() {
     return html`
       <resource-display .uri=${this.uri} rename></resource-display>
       <button @click=${this.unlink}>Unlink</button>
     `;
+  }
     </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>
   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);
+  }
+}

0 comments (0 inline, 0 general)