diff --git a/light9/fade/Light9EffectFader.ts b/light9/fade/Light9EffectFader.ts --- a/light9/fade/Light9EffectFader.ts +++ b/light9/fade/Light9EffectFader.ts @@ -1,3 +1,4 @@ +import debug from "debug"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { NamedNode, Quad } from "n3"; @@ -8,6 +9,8 @@ import { Patch } from "../web/patch"; import { Literal } from "n3"; export { Light9Fader } from "./Light9Fader"; +const log = debug("efffader") + ////////////////////////////////////// const RETURN_URI = new NamedNode(""); const RETURN_FLOAT = 1; @@ -36,7 +39,7 @@ function set2Step( baseName: string, pred2: NamedNode, newObjLiteral: Literal -) {} +) { } function maybeUriValue(graph: SyncedGraph, s: NamedNode, p: NamedNode): NamedNode | undefined { try { @@ -62,7 +65,7 @@ function maybeFloatValue(graph: SyncedGr ////////////////////////////////////// class EffectFader { - constructor(public uri: NamedNode) {} + constructor(public uri: NamedNode) { } column: string = "unset"; effect?: NamedNode; effectAttr?: NamedNode; // :strength @@ -90,6 +93,7 @@ export class Light9EffectFader extends L return html`...`; } return html` +
${this.conf.value.toPrecision(3)}
effect
@@ -130,41 +134,38 @@ export class Light9EffectFader extends L } private compileValue(graph: SyncedGraph, conf: EffectFader) { - // external graph change -> conf.value + // external graph change -> conf.value const U = graph.U(); conf.value = get2Step(RETURN_FLOAT, graph, this.uri, U(":setting"), U(":value")); + // since conf attrs aren't watched as property: + this.requestUpdate() } onSliderInput(ev: CustomEvent) { // slider user input -> graph + if (this.conf === undefined) return; + this.conf.value = ev.detail.value + this.writeValueToGraph() + } + + writeValueToGraph() { + // this.value -> graph if (this.graph === undefined) { return; } const U = this.graph.U(); - // const prev = this.value; - // const v: number = ev.detail.value; - // this.value = parseFloat(v.toPrecision(3)); // rewrite pls - // if (this.value == prev) { - // return; - // } - // if (!this.setting) { - // throw new Error("can't make new settings yet"); - // } - if (this.conf === undefined) { return; } - let patch = new Patch([], []); - let settingNode: NamedNode; - const valueTerm = this.graph.LiteralRoundedFloat(ev.detail.value); - try { - settingNode = this.graph.uriValue(this.uri, U(":setting")); - } catch (e) { - settingNode = this.graph.nextNumberedResource(U(":fadeset")); - patch = patch.update(new Patch([], [new Quad(this.conf.uri, U(":setting"), settingNode, this.ctx)])); + if (this.conf.value === undefined) { + log(`value of ${this.uri} is undefined`) + return; } - patch = patch.update(this.graph.getObjectPatch(settingNode, this.graph.Uri(":value"), valueTerm, this.ctx)); - this.graph.applyAndSendPatch(patch); + log('writeValueToGraph', this.conf.value) + const valueTerm = this.graph.LiteralRoundedFloat(this.conf.value); + const settingNode = this.graph.uriValue(this.uri, U(":setting")); + this.graph.patchObject(settingNode, this.graph.Uri(":value"), valueTerm, this.ctx); + } onEffectChange(ev: CustomEvent) { diff --git a/light9/fade/Light9Fader.ts b/light9/fade/Light9Fader.ts --- a/light9/fade/Light9Fader.ts +++ b/light9/fade/Light9Fader.ts @@ -46,10 +46,13 @@ export class Light9Fader extends LitElem protected update(changedProperties: PropertyValueMap | Map): void { super.update(changedProperties); if (changedProperties.has("value")) { - this.value= clamp(this.value, 0, 1) - this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } })); + } } + valueChangedFromUi() { + this.value= clamp(this.value, 0, 1) + this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } })); + } protected updated(_changedProperties: PropertyValueMap | Map): void { super.updated(_changedProperties); @@ -77,6 +80,7 @@ export class Light9Fader extends LitElem ev.stopPropagation(); if (ev.buttons == 1) { this.value = this.sliderValue(ev.offsetY); + this.valueChangedFromUi() this.drag = new Drag(ev.clientY, this.value); } else if (ev.buttons == 2) { // RMB in trough @@ -91,6 +95,7 @@ export class Light9Fader extends LitElem this.addEventListener("wheel", (ev: WheelEvent) => { ev.preventDefault(); this.value += ev.deltaY / 120 * -.05; + this.valueChangedFromUi() }); const maybeDrag = (ev: MouseEvent) => { @@ -116,10 +121,12 @@ export class Light9Fader extends LitElem // unmute this.value = this.unmutedValue; } + this.valueChangedFromUi() } onMouseDrag(dy: number) { if (this.drag === undefined) throw "unexpected"; this.value = this.drag.startDragValue - dy / this.troughHeight; + this.valueChangedFromUi() } onMouseUpAnywhere() {