Inspector

Inspector components.

interface Control 
extends Property, Element {
  fallback?: Scalar
  frame?: number
  icon?: string
  input?: Element
  inputInitialize?: Element
  inputSelect: HTMLSelectElement
  max?: number
  min?: number
  name?: string
  options?: Array<Scalar> | ScalarRecord
  order?: number
  scalar?: Scalar
  scalarFromInput?: Scalar
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (value?: Scalar) => boolean
  step?: number
  target?: string
  tweens?: boolean
  type?: string
  undoable?: boolean
}

interface ControlElement 
extends Element, Control {
  fallback?: Scalar
  frame?: number
  icon?: string
  input?: Element
  inputInitialize?: Element
  inputSelect: HTMLSelectElement
  max?: number
  min?: number
  name?: string
  options?: Array<Scalar> | ScalarRecord
  order?: number
  scalar?: Scalar
  scalarFromInput?: Scalar
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (value?: Scalar) => boolean
  step?: number
  target?: string
  tweens?: boolean
  type?: string
  undoable?: boolean
}

type ControlFunctionInfo = ArrayOf3<number, ControlGroupFunction, Array<SignalId>>

interface ControlGroup  {
  addOrRemoveEnd: (addOrRemove: string, propertyNamePrefix: string) => Promise<void>
  controlContent: (name: string, icon?: string, more?: OptionalContent) => OptionalContent
  controlInputContent: (propertyId?: SignalId) => OptionalContent
  controlInputContentEnd: (namePrefix: string) => OptionalContent
  currentValue: (name: string) => Scalar | undefined
  icon: string
  legendContent: OptionalContent
  propertyIdValue: (nameOrPropertyId: string) => Scalar | undefined
  propertyIds?: Array<SignalId>
  propertyNameContent: (propertyName: string) => OptionalContent
  signalIdForName: (name: string) => SignalId | undefined
  targetForName: (name: string) => StringOrNot
  updatePropertyIds: Array<SignalId>
}

interface ControlGroupEventDetail 
extends WithOrder {
  functions: Map<ControlGroupFunction, Array<SignalId>>
  order?: number
  propertyIds: Array<SignalId>
}

type ControlGroupFunction = object

type ElementControlFunction = (args: ElementInspectorArgs) => Promise<DataOrError<ControlElement>>

type ElementGroupsFunction = () => Promise<DataOrError<boolean>>

interface ElementInspectorArgs  {
  element?: ControlElement
  scalarProperty: ScalarProperty
}

/**
 * @implements DropHandled
 * @implements HeadHandled
 */
class ControlAssetElement
extends ControlElementBase {
  border: () => number
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  drop: (dataTransfer: DataTransfer, clientX: number) => void
  dropValid: (dataTransfer: DataTransfer) => boolean
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  head: OptionalContent
  iconIds: Strings
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  label?: string
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  previewSize: () => Size
  promise: Promise<void> | undefined
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (content: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
  visibility: boolean
}

class ControlBooleanElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlInputElement
extends ElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: () => Promise<void>
  handleInput: () => Promise<void>
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  scalarProperty: () => 
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlNumericElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlRgbElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlRowElement
extends LoaderElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class ControlStringElement
extends ControlElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChange: (event?: Event) => Promise<void>
  handleInput: (event?: Event) => Promise<void>
  input: () => Element | undefined
  inputInitialize: () => Element | undefined
  inputSelect: () => HTMLSelectElement
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  propertyId: () => SignalId
  scalarFromInput: () => Scalar | undefined
  scalarFromOptions: (index: number) => Scalar | undefined
  setInputValue: (scalar?: Scalar) => boolean
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorContentElement
extends ContentElementBase {
  chromeCss: CSSResult
  connectedCallback: () => void
  contentCss: CSSResult
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  cssShared: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  mediaMasher: () => MediaMasherNode
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorElement
extends PanelElementBase {
  connectedCallback: () => void
  contentContent: (slots: Array<Element>) => OptionalContent
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  footerContent: (slots: Array<Element>) => OptionalContent
  headerContent: (slots: Array<Element>) => OptionalContent
  mediaMasher: () => MediaMasherNode
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorFooterElement
extends FooterElementBase {
  chromeCss: CSSResult
  connectedCallback: () => void
  contentCss: CSSResult
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  cssShared: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  mediaMasher: () => MediaMasherNode
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorHeaderElement
extends HeaderElementBase {
  chromeCss: CSSResult
  connectedCallback: () => void
  contentCss: CSSResult
  cssBorderBoxSizing: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  cssShared: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  mediaMasher: () => MediaMasherNode
  partContent: (part: string, slots: Array<Element>) => OptionalContent
  partSeparator: string
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshParts: () => string
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

class InspectorTargetElement
extends ScrollerElementBase {
  connectedCallback: () => void
  cssBorderBoxSizing: CSSResult
  cssDivRoot: CSSResult
  cssHostDropping: CSSResult
  cssHostFlex: CSSResult
  defaultContent: () => OptionalContent
  disconnectedCallback: () => void
  handleChanged: () => void
  handleSignal: (signal: Signal) => void
  mediaMasher: () => MediaMasherNode
  pluginsNeeded: Array<PluginId>
  properties: PropertyDeclarations
  refreshSelectedProperties: (refreshIfUnchanged?: boolean) => void
  signals: () => SignalsRecord
  styles: CSSResult
  subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
  templateContent: (contents: TemplateContents) => TemplateContent
  unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
  variable: (name: string) => number
  variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
  variableString: (name: string) => string
}

function svgElementGroup(
  document: Document
): SVGGElement

const CONTROL_CSS = {
  _$cssResult$: true,
  cssText: '
  input, select {
    width: 100%;
    height: var(--size-control-pix);
    min-width: var(--size-control-pix);
  }
  input[type="search"] {
    border-radius: calc(var(--size-control-pix) / 2);
    padding-left: 2ch;
  }
  input[type="checkbox"] {
    width: var(--size-control-pix);
  }
  input[type=range] {
    flex-grow: 1;
    -webkit-appearance: none;
    width: 100%;
    border-radius: calc(var(--size-control-pix) * 0.25);
    height: calc(var(--size-control-pix) * 0.5);
    border: 1px solid var(--fore-chrome);
    background-color: var(--back-chrome); 
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--fore-chrome);
    border: 1px solid var(--back-chrome);
    border-radius: calc(var(--size-control-pix) * 0.5);
    width: var(--size-control-pix);
    height: var(--size-control-pix);
    cursor: pointer;
  }
  input[type=range]:is(:active, :hover) {
    border-color: var(--on-fore-chrome);
  }
  input[type=range]:is(:active, :hover)::-webkit-slider-thumb {
    background-color: var(--on-fore-chrome);
  }
',
  t: [
    '
  input, select {
    width: 100%;
    height: var(--size-control-pix);
    min-width: var(--size-control-pix);
  }
  input[type="search"] {
    border-radius: calc(var(--size-control-pix) / 2);
    padding-left: 2ch;
  }
  input[type="checkbox"] {
    width: var(--size-control-pix);
  }
  ',
    '
'
  ]
}

const CONTROL_INPUT_PROPS = {
  target: {},
  name: {},
  scalar: {},
  type: {},
  options: {
    converter: {}
  },
  max: {},
  min: {},
  step: {},
  frame: {}
}

const CONTROL_MIN_PROPS = {
  target: {},
  name: {},
  scalar: {},
  type: {},
  options: {
    converter: {}
  }
}

const CONTROL_PROPS = {
  propertyId: {
    attribute: 'property-id'
  }
}