Skip to content
This repository was archived by the owner on Sep 28, 2022. It is now read-only.

Commit 86b7c23

Browse files
SimonBiggsSimonBiggs
committed
make slider accept python variables
1 parent c4fc99f commit 86b7c23

7 files changed

Lines changed: 92 additions & 100 deletions

File tree

‎scriptedforms/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@simonbiggs/scriptedforms",
3-
"version": "0.10.0-dev1",
3+
"version": "0.10.0-dev2",
44
"license": "AGPL-3.0+",
55
"repository": {
66
"type": "git",

‎scriptedforms/src/app/form-builder-module/create-form-component-factory.ts‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,15 @@ import { DropdownComponent } from '../variables-module/dropdown.component';
7979

8080
import { VariableFileComponent } from '../variables-module/variable-file.component';
8181

82+
import { VariableParameterComponent } from '../variables-module/variable-parameter.component';
83+
8284
import { CodeModule } from '../code-module/code.module';
8385
import { CodeComponent } from '../code-module/code.component';
8486

8587
import { VariableComponent } from '../types/variable-component';
8688
import { SectionComponent } from '../types/section-component';
8789

90+
8891
export
8992
interface IFormComponent {
9093
formViewInitialised: PromiseDelegate<void>;
@@ -172,11 +175,11 @@ function createFormComponentFactory(
172175
this.variableComponents = this.variableComponents.concat(this.stringComponents.toArray());
173176
this.variableComponents = this.variableComponents.concat(this.dropdownComponents.toArray());
174177

175-
this.dropdownComponents.toArray().forEach(dropdownComponent => {
176-
if (dropdownComponent.items) {
177-
this.variableComponents = this.variableComponents.concat([dropdownComponent.variableParameterComponent]);
178-
}
179-
});
178+
// this.dropdownComponents.toArray().forEach(dropdownComponent => {
179+
// if (dropdownComponent.items) {
180+
// this.variableComponents = this.variableComponents.concat([dropdownComponent.variableParameterComponent]);
181+
// }
182+
// });
180183

181184
this.variableComponents = this.variableComponents.concat(this.variableFileComponents.toArray());
182185

@@ -190,6 +193,19 @@ function createFormComponentFactory(
190193
this.variableComponents = this.variableComponents.concat([sectionFileChangeComponent.variableParameterComponent]);
191194
});
192195

196+
// Make parameter components be appended to the variable component list
197+
this.variableComponents.forEach(variableComponent => {
198+
variableComponent.variableParameterMap.forEach(map => {
199+
const parameterComponent = <VariableParameterComponent> map[0]
200+
if (parameterComponent) {
201+
console.log(parameterComponent)
202+
this.variableComponents = this.variableComponents.concat([parameterComponent]);
203+
}
204+
})
205+
})
206+
207+
console.log(this.variableComponents)
208+
193209
this.sectionComponents.forEach((sectionComponent, index) => {
194210
sectionComponent.setId(index);
195211
});

‎scriptedforms/src/app/variables-module/dropdown.component.ts‎

Lines changed: 14 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { VariableParameterComponent } from './variable-parameter.component';
3636
<span #variablecontainer *ngIf='variableName === undefined'>
3737
<ng-content></ng-content>
3838
</span>
39-
<variable-parameter #variableParameterComponent *ngIf="items">{{items}}</variable-parameter>
39+
<variable-parameter #optionsParameter *ngIf="items">{{items}}</variable-parameter>
4040
<mat-form-field class="variableDropdown">
4141
<mat-label>{{labelValue}}</mat-label>
4242
<mat-select class="variableDropdown"
@@ -47,37 +47,30 @@ import { VariableParameterComponent } from './variable-parameter.component';
4747
(ngModelChange)="variableChanged($event)"
4848
(blur)="onBlur()"
4949
(focus)="onFocus()">
50-
<mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
50+
<mat-option *ngFor="let option of parameterValues.optionsValue" [value]="option">{{option}}</mat-option>
5151
</mat-select>
52-
</mat-form-field>
53-
<div class="jp-RenderedText" *ngIf="usedSeparator">
54-
<pre>
55-
<span class="ansi-red-fg">
56-
The use of commas or semicolons to separate inputs is deprecated.
57-
Please instead use the items html parameter like so:
58-
&lt;variable-dropdown
59-
items="[<span *ngFor="let option of deprecatedOptions.slice(0,-1)">'{{option}}', </span>'{{deprecatedOptions.slice(-1)}}']"&gt;
60-
{{variableName}}
61-
&lt;/variable-dropdown&gt;
62-
</span>
63-
</pre>
64-
</div>`,
52+
</mat-form-field>`,
6553
styles: [
6654
`.variableDropdown {
6755
width: 100%;
6856
}
6957
`]})
7058
export class DropdownComponent extends VariableBaseComponent
7159
implements AfterViewInit {
72-
deprecatedOptions: (string | number)[] = [];
73-
options: (string | number)[] = [];
74-
usedSeparator = false;
7560

76-
// Make this required once internal separators are removed
77-
@Input() items?: string;
61+
@Input() items: string;
7862

79-
@ViewChild('variableParameterComponent') variableParameterComponent: VariableParameterComponent;
63+
@ViewChild('optionsParameter') optionsParameter: VariableParameterComponent;
8064

65+
parameterValues: { [s: string]: (string | number)[]; } = {
66+
optionsValue: []
67+
}
68+
69+
setVariableParameterMap() {
70+
this.variableParameterMap = [
71+
[this.optionsParameter, 'optionsValue'],
72+
]
73+
}
8174

8275
pythonValueReference() {
8376
let valueReference: string;
@@ -92,29 +85,4 @@ export class DropdownComponent extends VariableBaseComponent
9285
}
9386
return valueReference;
9487
}
95-
96-
loadVariableName() {
97-
const element: HTMLSpanElement = this.variablecontainer.nativeElement;
98-
const ngContent = this.htmlDecode(element.innerHTML).trim();
99-
100-
// Remove separators in version 0.8.0
101-
const deprecatedItems = ngContent.split(/[,;]/);
102-
if (deprecatedItems.length > 1) {
103-
this.usedSeparator = true;
104-
}
105-
106-
this.variableName = deprecatedItems[0].trim();
107-
deprecatedItems.slice(1).forEach(item => {
108-
this.options = this.options.concat([item.trim()]);
109-
});
110-
111-
this.deprecatedOptions = this.options;
112-
113-
if (this.items) {
114-
this.options = this.variableParameterComponent.variableValue;
115-
this.variableParameterComponent.variableChange.asObservable().subscribe((value: string[]) => {
116-
this.options = value;
117-
});
118-
}
119-
}
12088
}

‎scriptedforms/src/app/variables-module/number-base.component.ts‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,33 +38,4 @@ export class NumberBaseComponent extends VariableBaseComponent implements AfterV
3838
@Input() min?: number = null;
3939
@Input() max?: number = null;
4040
@Input() step ? = 1;
41-
42-
usedSeparator = false;
43-
44-
// variableValue: number
45-
46-
loadVariableName() {
47-
const element: HTMLSpanElement = this.variablecontainer.nativeElement;
48-
const ngContent = this.htmlDecode(element.innerHTML).trim();
49-
50-
// Make both , and ; work for now, remove this in version 0.8.0.
51-
const items = ngContent.split(/[,;]/);
52-
if (items.length > 1) {
53-
this.usedSeparator = true;
54-
}
55-
56-
this.variableName = items[0].trim();
57-
58-
if (items.length > 1) {
59-
this.min = Number(items[1]);
60-
}
61-
62-
if (items.length > 2) {
63-
this.max = Number(items[2]);
64-
}
65-
66-
if (items.length > 3) {
67-
this.step = Number(items[3]);
68-
}
69-
}
7041
}

‎scriptedforms/src/app/variables-module/number.component.ts‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,7 @@ import {
5353
[min]="min"
5454
[step]="step"
5555
type="number">
56-
</mat-form-field>
57-
<div class="jp-RenderedText" *ngIf="usedSeparator">
58-
<pre>
59-
<span class="ansi-red-fg">
60-
The use of commas or semicolons to separate inputs is deprecated.
61-
Please instead use html parameters like so:
62-
&lt;variable-number min="{{min}}" max="{{max}}" step="{{step}}"&gt;{{variableName}}&lt;/variable-number&gt;
63-
</span>
64-
</pre>
65-
</div>`,
56+
</mat-form-field>`,
6657
styles: [
6758
`.variableNumber {
6859
width: 200px;

‎scriptedforms/src/app/variables-module/slider.component.ts‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@
2525
// program. If not, see <http://www.apache.org/licenses/LICENSE-2.0>.
2626

2727
import {
28-
Component, AfterViewInit, Input
28+
Component, AfterViewInit, Input, ViewChild
2929
} from '@angular/core';
3030

31-
import { NumberBaseComponent } from './number-base.component';
31+
import { VariableBaseComponent } from './variable-base.component';
32+
import { VariableParameterComponent } from './variable-parameter.component';
3233
// import { Slider } from '../interfaces/slider';
3334

3435
// import * as stringify from 'json-stable-stringify';
@@ -39,17 +40,19 @@ import { NumberBaseComponent } from './number-base.component';
3940
<span #variablecontainer *ngIf="variableName === undefined">
4041
<ng-content></ng-content>
4142
</span>
42-
43+
<variable-parameter #minParameter *ngIf="min">{{min}}</variable-parameter>
44+
<variable-parameter #maxParameter *ngIf="max">{{max}}</variable-parameter>
45+
<variable-parameter #stepParameter *ngIf="step">{{step}}</variable-parameter>
4346
<span class="container">{{labelValue}}
4447
<mat-slider class="variableSlider" *ngIf="variableName"
4548
[disabled]="!isFormReady"
4649
[value]="variableValue"
4750
(input)="updateValue($event.value)"
4851
(blur)="onBlur()"
4952
(focus)="onFocus()"
50-
[max]="max"
51-
[min]="min"
52-
[step]="step"
53+
[max]="parameterValues.maxValue"
54+
[min]="parameterValues.minValue"
55+
[step]="parameterValues.stepValue"
5356
[thumbLabel]="true">
5457
</mat-slider>
5558
</span>
@@ -73,9 +76,28 @@ styles: [
7376
}
7477
`]
7578
})
76-
export class SliderComponent extends NumberBaseComponent implements AfterViewInit {
77-
@Input() min ? = 0;
78-
@Input() max ? = 100;
79+
export class SliderComponent extends VariableBaseComponent implements AfterViewInit {
80+
@Input() min ?: number | string;
81+
@Input() max ?: number | string;
82+
@Input() step ?: number | string;
83+
84+
@ViewChild('minParameter') minParameter: VariableParameterComponent;
85+
@ViewChild('maxParameter') maxParameter: VariableParameterComponent;
86+
@ViewChild('stepParameter') stepParameter: VariableParameterComponent;
87+
88+
parameterValues: { [s: string]: number; } = {
89+
minValue: 0,
90+
maxValue: 100,
91+
stepValue: 1
92+
}
93+
94+
setVariableParameterMap() {
95+
this.variableParameterMap = [
96+
[this.minParameter, 'minValue'],
97+
[this.maxParameter, 'maxValue'],
98+
[this.stepParameter, 'stepValue'],
99+
]
100+
}
79101

80102
updateValue(value: number) {
81103
this.variableValue = value;

‎scriptedforms/src/app/variables-module/variable-base.component.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {
4141

4242
import { VariableService } from '../services/variable.service';
4343
import { VariableValue } from '../types/variable-value';
44+
import { VariableParameterComponent } from './variable-parameter.component';
4445

4546

4647
@Component({
@@ -52,6 +53,9 @@ export class VariableBaseComponent implements AfterViewInit {
5253
isPandas = false;
5354
isFocus = false;
5455

56+
parameterValues: { [s: string]: any; } = {};
57+
variableParameterMap: (string | VariableParameterComponent)[][] = [];
58+
5559
@Input() required?: string;
5660

5761
variableIdentifier: string;
@@ -89,6 +93,23 @@ export class VariableBaseComponent implements AfterViewInit {
8993
this.variableName = this.htmlDecode(element.innerHTML).trim();
9094
}
9195

96+
setVariableParameterMap() {}
97+
98+
attachVariableParameters() {
99+
for (let map of this.variableParameterMap) {
100+
const variableComponent = <VariableParameterComponent> map[0];
101+
console.log(map)
102+
const key = <string> map[1];
103+
this.parameterValues[key] = variableComponent.variableValue;
104+
console.log(variableComponent.variableName)
105+
console.log(variableComponent.variableValue)
106+
variableComponent.variableChange.asObservable().subscribe((value: any) => {
107+
this.parameterValues[key] = value;
108+
console.log(value)
109+
})
110+
}
111+
}
112+
92113
ngAfterViewInit() {
93114
this.loadVariableName();
94115

@@ -122,6 +143,9 @@ export class VariableBaseComponent implements AfterViewInit {
122143
this.labelValue = this.variableName;
123144
}
124145

146+
this.setVariableParameterMap();
147+
this.attachVariableParameters();
148+
125149
this.myChangeDetectorRef.detectChanges();
126150
}
127151

0 commit comments

Comments
 (0)