Changeset - 2210d934d62d
[Not reviewed]
default
0 2 0
drewp@bigasterisk.com - 20 months ago 2023-06-03 00:34:24
drewp@bigasterisk.com
fader was echoing external edits as patches back into the graph. This fixes that the wrong way, circumventing lit
2 files changed with 33 insertions and 25 deletions:
0 comments (0 inline, 0 general)
light9/fade/Light9EffectFader.ts
Show inline comments
 
import debug from "debug";
 
import { css, html, LitElement } from "lit";
 
import { customElement, property, state } from "lit/decorators.js";
 
import { NamedNode, Quad } from "n3";
 
import { getTopGraph } from "../web/RdfdbSyncedGraph";
 
import { showRoot } from "../web/show_specific";
 
import { SyncedGraph } from "../web/SyncedGraph";
 
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;
 
function get2Step<T extends NamedNode | number>(returnWhat: T, graph: SyncedGraph, subj1: NamedNode, pred1: NamedNode, pred2: NamedNode): T | undefined {
 
  // ?subj1 ?pred1 ?x . ?x ?pred2 ?returned .
 
  let x: NamedNode;
 
@@ -33,13 +36,13 @@ function set2Step(
 
  graph: SyncedGraph, //
 
  subj1: NamedNode,
 
  pred1: NamedNode,
 
  baseName: string,
 
  pred2: NamedNode,
 
  newObjLiteral: Literal
 
) {}
 
) { }
 

	
 
function maybeUriValue(graph: SyncedGraph, s: NamedNode, p: NamedNode): NamedNode | undefined {
 
  try {
 
    return graph.uriValue(s, p);
 
  } catch (e) {
 
    return undefined;
 
@@ -59,13 +62,13 @@ function maybeFloatValue(graph: SyncedGr
 
    return undefined;
 
  }
 
}
 

	
 
//////////////////////////////////////
 
class EffectFader {
 
  constructor(public uri: NamedNode) {}
 
  constructor(public uri: NamedNode) { }
 
  column: string = "unset";
 
  effect?: NamedNode;
 
  effectAttr?: NamedNode; // :strength
 
  setting?: NamedNode; // we assume fader always has exactly one setting
 
  value?: number;
 
}
 
@@ -87,12 +90,13 @@ export class Light9EffectFader extends L
 
  ];
 
  render() {
 
    if (this.conf === undefined || this.conf.value === undefined) {
 
      return html`...`;
 
    }
 
    return html`
 
      <div><resource-display .uri=${this.uri}></resource-display>
 
      <light9-fader .value=${this.conf.value} @change=${this.onSliderInput}></light9-fader>
 
      <div>${this.conf.value.toPrecision(3)}</div>
 
      <div>effect <edit-choice nounlink .uri=${this.conf.effect} @edited=${this.onEffectChange}></edit-choice></div>
 
      <div>attr <edit-choice nounlink .uri=${this.conf.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
 
    `;
 
  }
 
@@ -127,47 +131,44 @@ export class Light9EffectFader extends L
 

	
 
    this.conf = conf;
 
    graph.runHandler(this.compileValue.bind(this, graph, this.conf), `fader config.value ${this.uri.value}`);
 
  }
 

	
 
  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) {
 
    if (this.graph === undefined) {
 
      return;
 
    }
light9/fade/Light9Fader.ts
Show inline comments
 
@@ -43,16 +43,19 @@ export class Light9Fader extends LitElem
 
    return html` <div id="handle"><hr /></div> `;
 
  }
 

	
 
  protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): 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<any> | Map<PropertyKey, unknown>): void {
 
    super.updated(_changedProperties);
 
    const y = this.sliderTopY(this.value);
 
    this.handleEl.style.top = y + "px";
 
  }
 
@@ -74,12 +77,13 @@ export class Light9Fader extends LitElem
 
      }
 
    });
 
    this.addEventListener("mousedown", (ev: MouseEvent) => {
 
      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
 
        this.onRmb();
 
      }
 
    });
 
@@ -88,12 +92,13 @@ export class Light9Fader extends LitElem
 
      event.preventDefault();
 
    });
 

	
 
    this.addEventListener("wheel", (ev: WheelEvent) => {
 
      ev.preventDefault();
 
      this.value += ev.deltaY / 120 * -.05;
 
      this.valueChangedFromUi()
 
    });
 

	
 
    const maybeDrag = (ev: MouseEvent) => {
 
      if (ev.buttons != 1) return;
 
      if (this.drag === undefined) return;
 
      ev.stopPropagation();
 
@@ -113,16 +118,18 @@ export class Light9Fader extends LitElem
 
      this.unmutedValue = this.value;
 
      this.value = 0;
 
    } else {
 
      // 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() {
 
    this.drag = undefined;
 
  }
 

	
0 comments (0 inline, 0 general)