#!/bin/zsh

import debug from "debug";

import { Literal, NamedNode, Quad_Object, Quad_Predicate, Quad_Subject, Term } from "n3";

import { some } from "underscore";

type Color = string;

export type ControlValue = number | Color | NamedNode;

const log = debug("effect");

function isUri(x: Term | number | string): x is NamedNode {

  return typeof x == "object" && x.termType == "NamedNode";

}

function valuePred(graph: SyncedGraph, attr: NamedNode): NamedNode {

  const U = graph.U();

  const scaledAttributeTypes = [U(":color"), U(":brightness"), U(":uv")];

  if (some(scaledAttributeTypes, (x: NamedNode) => attr.equals(x))) {

    return U(":scaledValue");

  } else {

    return U(":value");

  }

}

// effect settings data; r/w sync with the graph

export class Effect {

  private settings: Array<{ device: NamedNode; deviceAttr: NamedNode; setting: NamedNode; value: ControlValue }> = [];

  private ctxForEffect: NamedNode

import debug from "debug";

import { NamedNode } from "n3";

import { ControlValue, Effect } from "./Effect";

const log = debug("g2c");

type NewValueCb = (newValue: ControlValue | null) => void;

// More efficient bridge between liveControl widgets and graph edits (inside Effect),

// as opposed to letting each widget scan the graph and push lots of

// tiny patches to it.

export class GraphToControls {

  // rename to PageControls?

  effect: Effect | null = null; // this uri should sync to the editchoice

  registeredWidgets: Map<NamedNode, Map<NamedNode, NewValueCb>> = new Map();

  constructor(public graph: SyncedGraph) {}

  setEffect(effect: NamedNode | null) {

    log(`setEffect ${effect?.value}`);

    this.effect = effect ? new Effect(this.graph, effect, this.onValuesChanged.bind(this)) : null;

  }

  newEffect(): NamedNode {

    // wrong- this should be our editor's scratch effect, promoted to a

    // real one when you name it.

    const uri = this.graph.nextNumberedResource(this.graph.Uri("http://light9.bigasterisk.com/effect/effect"));

import debug from "debug";

import { css, html, LitElement } from "lit";

import { customElement, property } from "lit/decorators.js";

import { NamedNode } from "n3";

import { unique } from "underscore";

import { GraphToControls } from "./GraphToControls";

import { Choice } from "./Light9Listbox";

import { Light9LiveControl } from "./Light9LiveControl";

export { Light9LiveControl };

const log = debug("devcontrol");

export interface DeviceAttrRow {

  uri: NamedNode; //devattr

  attrClasses: string; // the css kind

  dataType: NamedNode;

  showColorPicker: boolean;

  useColor: boolean;

  useChoice: boolean;

  choices: Choice[];

  choiceSize: number;

  useSlider: boolean;

  max: number;

}

@customElement("light9-device-control")

export class Light9DeviceControl extends LitElement {

  graph!: SyncedGraph;

  static styles = [

    css`

      :host {

        display: inline-block;

      }

import debug from "debug";

const log = debug("control");

import { css, html, LitElement, PropertyPart, PropertyValues } from "lit";

import { customElement, property } from "lit/decorators.js";

import { NamedNode } from "n3";

import { ControlValue } from "./Effect";

import { GraphToControls } from "./GraphToControls";

import { DeviceAttrRow } from "./Light9DeviceControl";

import { Choice } from "./Light9Listbox";

export { Slider } from "@material/mwc-slider";

@customElement("light9-live-control")

export class Light9LiveControl extends LitElement {

  graph!: SyncedGraph;

  static styles = [

    css`

      #colorControls {

        display: flex;

        align-items: center;

      }

      #colorControls > * {

        margin: 0 3px;

      }

      #colorControls paper-slider {

      }

      paper-slider {

        width: 100%;

        height: 25px;

      }

import debug from "debug";

import { css, html, LitElement, PropertyValues } from "lit";

import { customElement, property } from "lit/decorators.js";

import { NamedNode } from "n3";

import { sortBy, uniq } from "underscore";

import { GraphToControls } from "./GraphToControls";

export { Light9DeviceControl as Light9LiveDeviceControl } from "./Light9DeviceControl";

const log = debug("controls");

@customElement("light9-live-controls")

export class Light9LiveControls extends LitElement {

  graph!: SyncedGraph;

  static styles = [

    css`

      :host {

        display: flex;

        flex-direction: column;

      }

      #preview {

        width: 100%;

      }

      #deviceControls {

        flex-grow: 1;

        position: relative;

        width: 100%;

        overflow-y: auto;

      }

      light9-live-device-control > div {

import { defineConfig } from "vite";

const servicePort = 8217;

export default defineConfig({

  base: "/live/",

  server: {

    host: "0.0.0.0",

    strictPort: true,

    port: servicePort + 100,

    hmr: {

      port: servicePort + 200,

    },

  },

  clearScreen: false,

  define: {

    global: {},

  },

});