light9 Changeset - c5cd51e32fc5

Changeset - c5cd51e32fc5

Parent rev.

Child rev.

[Not reviewed]

default

0 1 1

drewp@bigasterisk.com - 20 months ago 2023-06-02 01:53:26
drewp@bigasterisk.com

refactor

2 files changed with 128 insertions and 117 deletions:

light9/fade/Light9EffectFader.ts

124

light9/fade/Light9FadeUi.ts

117

0 comments (0 inline, 0 general)

light9/fade/Light9EffectFader.ts

➞

Show inline comments

@@ new file 100644 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
 import { showRoot } from "../web/show_specific";
 import { SyncedGraph } from "../web/SyncedGraph";
 import { meter } from "./Light9FadeUi";
 export { Light9Fader } from "./Light9Fader";
 @customElement("light9-effect-fader")
 export class Light9EffectFader extends LitElement {
   static styles = [
     css`
       :host {
         display: inline-block;
         border: 2px gray outset;
         background: #272727;
+      }
       light9-fader {
         margin: 4px;
         width: 100%;
+      }
     `,
   ];
   render() {
     return html`
       <light9-fader .value=${this.value} @change=${this.onSliderInput}></light9-fader>
       <div>${this.value.toPrecision(3)}</div>
       <div>eff: <edit-choice nounlink .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
       <div>attr: <edit-choice nounlink .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
       <div>Slider ${this.column}</div>
     `;
+  }
   graph?: SyncedGraph;
   ctx: NamedNode = new NamedNode(showRoot + "/fade");
   @property() uri!: NamedNode;
   @property() column!: string;
   @property() effect?: NamedNode;
   @property() effectAttr?: NamedNode;
   @state() setting?: NamedNode;
   @property() value: number = 0.0;
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.compile.bind(this, this.graph), `config ${this.uri.value}`);
       this.graph.runHandler(this.compileValue.bind(this, this.graph), `valueSync ${this.uri.value}`);
     });
+  }
   private compile(graph: SyncedGraph) {
     const U = graph.U();
     if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
       // not loaded yet, perhaps
       this.column = "unset";
       this.effect = undefined;
       this.effectAttr = undefined;
       return;
+    }
     this.column = graph.stringValue(this.uri, U(":column"));
     this.effect = graph.uriValue(this.uri, U(":effect"));
     this.setting = graph.uriValue(this.uri, U(":setting"));
     if (this.setting !== undefined) {
       try {
         this.effectAttr = graph.uriValue(this.setting, U(":effectAttr"));
       } catch (e) {
         this.effectAttr = undefined;
+      }
+    }
+  }
   private compileValue(graph: SyncedGraph) {
     const U = graph.U();
     if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
       // not loaded yet
       // console.timeEnd(`valueSync ${this.uri.value}`)
       return;
+    }
     const st = graph.uriValue(this.uri, U(":setting"));
     this.value = graph.floatValue(st, graph.Uri(":value"));
+  }
   onSliderInput(ev: CustomEvent) {
     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;
+    }
     meter.tick();
     if (!this.setting) {
       throw new Error("can't make new settings yet");
+    }
     this.graph.patchObject(this.setting, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);
+  }
   onEffectChange(ev: CustomEvent) {
     if (this.graph === undefined) {
       return;
+    }
     const { newValue } = ev.detail;
     this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx);
+  }
   onEffectAttrChange(ev: CustomEvent) {
     if (this.graph === undefined) {
       return;
+    }
     const { newValue } = ev.detail;
     if (this.setting === undefined) {
       this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set"));
       this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx);
+    }
     this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx);
+  }
+}

light9/fade/Light9FadeUi.ts

➞

Show inline comments

 import debug from "debug";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
-import { shortShow, showRoot } from "../web/show_specific";
 import { shortShow } from "../web/show_specific";
 import { SyncedGraph } from "../web/SyncedGraph";
 export { EditChoice } from "../web/EditChoice";
-export { Light9Fader } from "./Light9Fader";
+export { Light9EffectFader } from "./Light9EffectFader";
 debug.enable("*");
 const log = debug("fade");
 let meter: FPSMeter;
+export let meter: FPSMeter;
 @customElement("light9-fade-ui")
 export class Light9FadeUi extends LitElement {
   static styles = [
     css`
       :host {
         display: block;
         user-select: none; /* really this is only desirable during slider drag events */
+      }
     `,
   ];
   render() {
@@ @@ -53,126 +53,13 @@ export class Light9FadeUi extends LitEle @@
         g.Uri(`:show/${shortShow}/fadePage1f6`),
         g.Uri(`:show/${shortShow}/fadePage1f7`),
       ];
     });
+  }
   connectedCallback(): void {
     super.connectedCallback();
     meter = new FPSMeter(this.shadowRoot?.querySelector("#fps")!, { graph: 1, left: "auto", right: "0" });
     meter.tick();
+  }
+}
 @customElement("light9-effect-fader")
 export class Light9EffectFader extends LitElement {
   static styles = [
     css`
       :host {
         display: inline-block;
         border: 2px gray outset;
         background: #272727;
+      }
       light9-fader {
         margin: 4px;
         width: 100%;
+      }
     `,
   ];
   render() {
     return html`
       <light9-fader .value=${this.value} @change=${this.onSliderInput}></light9-fader>
       <div>${this.value.toPrecision(3)}</div>
       <div>eff: <edit-choice .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
       <div>attr: <edit-choice .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
       <div>&lt;=&gt; Slider ${this.column}</div>
     `;
+  }
   graph?: SyncedGraph;
   ctx: NamedNode = new NamedNode(showRoot + "/fade");
   @property() uri!: NamedNode;
   @property() column!: string;
   @property() effect?: NamedNode;
   @property() effectAttr?: NamedNode
   @state() setting?: NamedNode;
   @property() value: number = 0.0;
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.compile.bind(this, this.graph), `config ${this.uri.value}`);
       this.graph.runHandler(this.compileValue.bind(this, this.graph), `valueSync ${this.uri.value}`);
     });
+  }
   private compile(graph: SyncedGraph) {
     const U = graph.U();
     if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
       // not loaded yet, perhaps
       this.column = "unset";
       this.effect = undefined;
       this.effectAttr = undefined;
       return;
+    }
     this.column = graph.stringValue(this.uri, U(":column"));
     this.effect = graph.uriValue(this.uri, U(":effect"));
     this.setting = graph.uriValue(this.uri, U(":setting"));
     if (this.setting !== undefined) {
       try {
         this.effectAttr = graph.uriValue(this.setting, U(":effectAttr"));
       } catch (e) {
         this.effectAttr = undefined;
+      }
+    }
+  }
   private compileValue(graph: SyncedGraph) {
     const U = graph.U();
     if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
       // not loaded yet
       // console.timeEnd(`valueSync ${this.uri.value}`)
       return;
+    }
     const st = graph.uriValue(this.uri, U(":setting"));
     this.value = graph.floatValue(st, graph.Uri(":value"));
+  }
   onSliderInput(ev: CustomEvent) {
     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;
+    }
     meter.tick();
     if (!this.setting) {
       throw new Error("can't make new settings yet");
+    }
     this.graph.patchObject(this.setting, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);
+  }
   onEffectChange(ev: CustomEvent) {
     if (this.graph === undefined) {
       return;
+    }
     const { newValue } = ev.detail;
     this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx);
+  }
   onEffectAttrChange(ev: CustomEvent) {
     if (this.graph === undefined) {
       return;
+    }
     const { newValue } = ev.detail;
     if (this.setting === undefined) {
       this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set"));
       this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx);
+    }
     this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx);
+  }
+}

0 comments (0 inline, 0 general)