Experimental ValueWidget
This commit is contained in:
parent
24a75e935a
commit
9197d7ef3a
|
@ -17,6 +17,8 @@ type Wrapped = {
|
||||||
options?: AddEventListenerOptions | boolean,
|
options?: AddEventListenerOptions | boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type NodeGenerator = (t: HtmlFragmentsTemplate) => HtmlFragment;
|
||||||
|
|
||||||
export class Widget implements EventTarget {
|
export class Widget implements EventTarget {
|
||||||
facet: Facet;
|
facet: Facet;
|
||||||
node: Dataflow.Field<ChildNode | null>;
|
node: Dataflow.Field<ChildNode | null>;
|
||||||
|
@ -24,7 +26,7 @@ export class Widget implements EventTarget {
|
||||||
new Map<string, Map<EventListenerOrEventListenerObject, Wrapped>>();
|
new Map<string, Map<EventListenerOrEventListenerObject, Wrapped>>();
|
||||||
_parent: Dataflow.Field<ParentNode | null>;
|
_parent: Dataflow.Field<ParentNode | null>;
|
||||||
|
|
||||||
constructor (private nodeGenerator: (t: HtmlFragmentsTemplate) => HtmlFragment) {
|
constructor (private nodeGenerator: NodeGenerator) {
|
||||||
this.facet = Turn.activeFacet;
|
this.facet = Turn.activeFacet;
|
||||||
|
|
||||||
on stop {
|
on stop {
|
||||||
|
@ -170,6 +172,50 @@ export class Widget implements EventTarget {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class ValueWidget extends Widget {
|
||||||
|
_value: Dataflow.Field<string>;
|
||||||
|
_valueAsNumber: Dataflow.Field<number>;
|
||||||
|
|
||||||
|
constructor (nodeGenerator: NodeGenerator) {
|
||||||
|
super(nodeGenerator);
|
||||||
|
|
||||||
|
field value: string = '';
|
||||||
|
this._value = value;
|
||||||
|
|
||||||
|
field valueAsNumber: number = NaN;
|
||||||
|
this._valueAsNumber = valueAsNumber;
|
||||||
|
|
||||||
|
const readValues = (n: any) => {
|
||||||
|
this._value.value = n?.value ?? '';
|
||||||
|
this._valueAsNumber.value = n?.valueAsNumber ?? NaN;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.on('change', e => readValues(e.target));
|
||||||
|
|
||||||
|
dataflow {
|
||||||
|
if (this.node.value && 'value' in this.node.value) {
|
||||||
|
readValues(this.node.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dataflow {
|
||||||
|
if (this.node.value && 'value' in this.node.value) {
|
||||||
|
(this.node.value as any).value = '' + this._valueAsNumber.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dataflow {
|
||||||
|
if (this.node.value && 'value' in this.node.value) {
|
||||||
|
this.node.value.value = this._value.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get value(): string { return this._value.value; }
|
||||||
|
set value(v: string) { this._value.value = v; }
|
||||||
|
|
||||||
|
get valueAsNumber(): number { return this._valueAsNumber.value; }
|
||||||
|
set valueAsNumber(v: number) { this._valueAsNumber.value = v; }
|
||||||
|
}
|
||||||
|
|
||||||
function spawnLocationHashTracker(ds: Ref) {
|
function spawnLocationHashTracker(ds: Ref) {
|
||||||
spawn named 'LocationHashTracker' {
|
spawn named 'LocationHashTracker' {
|
||||||
at ds {
|
at ds {
|
||||||
|
|
Loading…
Reference in New Issue