Mercurial > code > home > repos > light9
annotate web/fade/Light9EffectFader.ts @ 2376:4556eebe5d73
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/fade/Light9EffectFader.ts@06bf6dae8e64 |
| children |
| rev | line source |
|---|---|
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
1 import debug from "debug"; |
| 2329 | 2 import { css, html, LitElement } from "lit"; |
| 3 import { customElement, property, state } from "lit/decorators.js"; | |
| 2331 | 4 import { NamedNode, Quad } from "n3"; |
|
2372
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2355
diff
changeset
|
5 import { getTopGraph } from "../RdfdbSyncedGraph"; |
|
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2355
diff
changeset
|
6 import { showRoot } from "../show_specific"; |
|
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2355
diff
changeset
|
7 import { SyncedGraph } from "../SyncedGraph"; |
|
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2355
diff
changeset
|
8 import { Patch } from "../patch"; |
| 2331 | 9 import { Literal } from "n3"; |
| 2329 | 10 export { Light9Fader } from "./Light9Fader"; |
| 11 | |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
12 const log = debug("efffader") |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
13 |
| 2331 | 14 ////////////////////////////////////// |
| 15 const RETURN_URI = new NamedNode(""); | |
| 16 const RETURN_FLOAT = 1; | |
| 17 function get2Step<T extends NamedNode | number>(returnWhat: T, graph: SyncedGraph, subj1: NamedNode, pred1: NamedNode, pred2: NamedNode): T | undefined { | |
| 18 // ?subj1 ?pred1 ?x . ?x ?pred2 ?returned . | |
| 19 let x: NamedNode; | |
| 20 try { | |
| 21 x = graph.uriValue(subj1, pred1); | |
| 22 } catch (e) { | |
| 23 return undefined; | |
| 24 } | |
| 25 try { | |
| 26 if (typeof returnWhat === "object" && (returnWhat as NamedNode).termType == "NamedNode") { | |
| 27 return graph.uriValue(x, pred2) as T; | |
| 28 } else if (typeof returnWhat === "number") { | |
| 29 return graph.floatValue(x, pred2) as T; | |
| 30 } | |
| 31 } catch (e) { | |
| 32 return undefined; | |
| 33 } | |
| 34 } | |
| 35 function set2Step( | |
| 36 graph: SyncedGraph, // | |
| 37 subj1: NamedNode, | |
| 38 pred1: NamedNode, | |
| 39 baseName: string, | |
| 40 pred2: NamedNode, | |
| 41 newObjLiteral: Literal | |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
42 ) { } |
| 2331 | 43 |
| 44 function maybeUriValue(graph: SyncedGraph, s: NamedNode, p: NamedNode): NamedNode | undefined { | |
| 45 try { | |
| 46 return graph.uriValue(s, p); | |
| 47 } catch (e) { | |
| 48 return undefined; | |
| 49 } | |
| 50 } | |
| 51 function maybeStringValue(graph: SyncedGraph, s: NamedNode, p: NamedNode): string | undefined { | |
| 52 try { | |
| 53 return graph.stringValue(s, p); | |
| 54 } catch (e) { | |
| 55 return undefined; | |
| 56 } | |
| 57 } | |
| 58 function maybeFloatValue(graph: SyncedGraph, s: NamedNode, p: NamedNode): number | undefined { | |
| 59 try { | |
| 60 return graph.floatValue(s, p); | |
| 61 } catch (e) { | |
| 62 return undefined; | |
| 63 } | |
| 64 } | |
| 65 | |
| 66 ////////////////////////////////////// | |
| 67 class EffectFader { | |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
68 constructor(public uri: NamedNode) { } |
| 2331 | 69 column: string = "unset"; |
| 70 effect?: NamedNode; | |
| 71 effectAttr?: NamedNode; // :strength | |
| 72 setting?: NamedNode; // we assume fader always has exactly one setting | |
| 73 value?: number; | |
| 74 } | |
| 2329 | 75 |
| 76 @customElement("light9-effect-fader") | |
| 77 export class Light9EffectFader extends LitElement { | |
| 78 static styles = [ | |
| 79 css` | |
| 80 :host { | |
| 81 display: inline-block; | |
| 82 border: 2px gray outset; | |
| 83 background: #272727; | |
| 84 } | |
| 85 light9-fader { | |
| 2355 | 86 margin: 0px; |
| 2329 | 87 width: 100%; |
| 88 } | |
| 89 `, | |
| 90 ]; | |
| 91 render() { | |
| 2331 | 92 if (this.conf === undefined || this.conf.value === undefined) { |
| 93 return html`...`; | |
| 94 } | |
| 2329 | 95 return html` |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
96 <div><resource-display .uri=${this.uri}></resource-display> |
| 2331 | 97 <light9-fader .value=${this.conf.value} @change=${this.onSliderInput}></light9-fader> |
| 98 <div>${this.conf.value.toPrecision(3)}</div> | |
| 99 <div>effect <edit-choice nounlink .uri=${this.conf.effect} @edited=${this.onEffectChange}></edit-choice></div> | |
| 100 <div>attr <edit-choice nounlink .uri=${this.conf.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div> | |
| 2329 | 101 `; |
| 102 } | |
| 103 | |
| 104 graph?: SyncedGraph; | |
| 105 ctx: NamedNode = new NamedNode(showRoot + "/fade"); | |
| 106 @property() uri!: NamedNode; | |
| 2331 | 107 @state() conf?: EffectFader; // compiled from graph |
| 2329 | 108 |
| 109 constructor() { | |
| 110 super(); | |
| 111 getTopGraph().then((g) => { | |
| 112 this.graph = g; | |
| 2331 | 113 this.graph.runHandler(this.compile.bind(this, this.graph), `fader config ${this.uri.value}`); |
| 2329 | 114 }); |
| 115 } | |
| 116 | |
| 117 private compile(graph: SyncedGraph) { | |
| 118 const U = graph.U(); | |
| 2331 | 119 this.conf = undefined; |
| 120 | |
| 121 const conf = new EffectFader(this.uri); | |
| 122 | |
| 2329 | 123 if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) { |
| 124 // not loaded yet, perhaps | |
| 125 return; | |
| 126 } | |
| 2331 | 127 |
| 128 conf.column = maybeStringValue(graph, this.uri, U(":column")) || "unset"; | |
| 129 conf.effect = maybeUriValue(graph, this.uri, U(":effect")); | |
| 130 conf.effectAttr = get2Step(RETURN_URI, graph, this.uri, U(":setting"), U(":effectAttr")); | |
| 131 | |
| 132 this.conf = conf; | |
| 133 graph.runHandler(this.compileValue.bind(this, graph, this.conf), `fader config.value ${this.uri.value}`); | |
| 2329 | 134 } |
| 135 | |
| 2331 | 136 private compileValue(graph: SyncedGraph, conf: EffectFader) { |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
137 // external graph change -> conf.value |
| 2329 | 138 const U = graph.U(); |
| 2331 | 139 conf.value = get2Step(RETURN_FLOAT, graph, this.uri, U(":setting"), U(":value")); |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
140 // since conf attrs aren't watched as property: |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
141 this.requestUpdate() |
| 2329 | 142 } |
| 143 | |
| 144 onSliderInput(ev: CustomEvent) { | |
| 2331 | 145 // slider user input -> graph |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
146 if (this.conf === undefined) return; |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
147 this.conf.value = ev.detail.value |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
148 this.writeValueToGraph() |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
149 } |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
150 |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
151 writeValueToGraph() { |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
152 // this.value -> graph |
| 2329 | 153 if (this.graph === undefined) { |
| 154 return; | |
| 155 } | |
| 156 const U = this.graph.U(); | |
| 2331 | 157 if (this.conf === undefined) { |
| 2329 | 158 return; |
| 159 } | |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
160 if (this.conf.value === undefined) { |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
161 log(`value of ${this.uri} is undefined`) |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
162 return; |
| 2329 | 163 } |
|
2339
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
164 log('writeValueToGraph', this.conf.value) |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
165 const valueTerm = this.graph.LiteralRoundedFloat(this.conf.value); |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
166 const settingNode = this.graph.uriValue(this.uri, U(":setting")); |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
167 this.graph.patchObject(settingNode, this.graph.Uri(":value"), valueTerm, this.ctx); |
|
2210d934d62d
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
168 |
| 2329 | 169 } |
| 170 | |
| 171 onEffectChange(ev: CustomEvent) { | |
| 172 if (this.graph === undefined) { | |
| 173 return; | |
| 174 } | |
| 175 const { newValue } = ev.detail; | |
| 176 this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx); | |
| 177 } | |
| 178 | |
| 179 onEffectAttrChange(ev: CustomEvent) { | |
| 180 if (this.graph === undefined) { | |
| 181 return; | |
| 182 } | |
| 2331 | 183 // const { newValue } = ev.detail; |
| 184 // if (this.setting === undefined) { | |
| 185 // this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set")); | |
| 186 // this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx); | |
| 187 // } | |
| 188 // this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx); | |
| 2329 | 189 } |
| 190 } |