Mercurial > code > home > repos > light9

comparison web/EditChoice.ts @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/EditChoice.ts@2aeceb6f03aa
children
comparison
equal deleted inserted replaced
2375:623836db99af 2376:4556eebe5d73
1 // see light9/editchoice.py for gtk version
2 import debug from "debug";
3 import { css, html, LitElement } from "lit";
4 import { customElement, property } from "lit/decorators.js";
5 import { NamedNode } from "n3";
6 import { $V, Vector } from "sylvester";
7 export { ResourceDisplay } from "../web/ResourceDisplay";
8 const log = debug("editchoice");
9 const RDFS = "http://www.w3.org/2000/01/rdf-schema#";
10
11 function setupDrop(
12 senseElem: HTMLElement,
13 highlightElem: HTMLElement,
14 coordinateOriginElem: HTMLElement | null,
15 onDrop: (uri: NamedNode, pos: Vector | null) => void
16 ) {
17 const highlight = () => highlightElem.classList.add("dragging");
18 const unhighlight = () => highlightElem.classList.remove("dragging");
19
20 senseElem.addEventListener("drag", (event: DragEvent) => { });
21
22 senseElem.addEventListener("dragstart", (event: DragEvent) => { });
23
24 senseElem.addEventListener("dragend", (event: DragEvent) => { });
25
26 senseElem.addEventListener("dragover", (event: DragEvent) => {
27 event.preventDefault();
28 event.dataTransfer!.dropEffect = "copy";
29 highlight();
30 });
31
32 senseElem.addEventListener("dragenter", (event: DragEvent) => {
33 highlight();
34 });
35
36 senseElem.addEventListener("dragleave", (event: DragEvent) => {
37 unhighlight();
38 });
39
40 senseElem.addEventListener("drop", (event: DragEvent) => {
41 event.preventDefault();
42 const uri = new NamedNode(event.dataTransfer!.getData("text/uri-list"));
43
44 let pos: Vector | null = null;
45 if (coordinateOriginElem != null) {
46 const root = coordinateOriginElem.getBoundingClientRect();
47 pos = $V([event.pageX - root.left, event.pageY - root.top]);
48 }
49
50 try {
51 onDrop(uri, pos);
52 } catch (e) {
53 log(e);
54 }
55 unhighlight();
56 });
57 }
58
59 // Picks a URI based on the caller setting the property OR
60 // the user drag-and-dropping a text/uri-list resource (probably
61 // an <resource-display> or <a href> tag)
62 @customElement("edit-choice")
63 export class EditChoice extends LitElement {
64 @property() uri?: NamedNode
65 @property({ type: Boolean }) nounlink = false;
66 @property({ type: Boolean }) rename = false;
67 static styles = [
68 css`
69 :host {
70 display: inline-block;
71 background: #141448;
72 /* min-width: 10em; */
73 padding: 3px 8px;
74 }
75 .dragging {
76 background: rgba(126, 52, 245, 0.0784313725490196);
77 box-shadow: 0 0 20px #ffff00;
78 }
79 a {
80 color: #8e8eff;
81 padding: 3px;
82 display: inline-block;
83 font-size: 145%;
84 }
85 `,
86 ];
87 render() {
88 const unlink = html`
89 <button @click=${this.unlink}>Unlink</button>
90 `
91 return html`
92 <resource-display .uri=${this.uri} ?rename=${this.rename}></resource-display>
93 ${this.nounlink ? html`` : unlink}
94 `;
95 }
96
97 constructor() {
98 super();
99 setupDrop(this, this, null, this._setUri.bind(this));
100 }
101
102 // updated(changedProperties: PropertyValues) {
103 // log('cp' ,changedProperties)
104 // if (changedProperties.has("box")) {
105 // log('setupdrop', this.box)
106 // setupDrop(this.box, this.box, null, this._setUri.bind(this));
107 // }
108 // }
109
110 _setUri(u?: NamedNode) {
111 this.uri = u;
112 this.dispatchEvent(new CustomEvent("edited", { detail: { newValue: u } }));
113 }
114
115 unlink() {
116 return this._setUri(undefined);
117 }
118 }