98 lines
3.0 KiB
HTML
98 lines
3.0 KiB
HTML
<div appCanvas class="canvas"
|
|
[paramStartingColor]="canvasParam.colors.start"
|
|
[paramEndingColor]="canvasParam.colors.end"
|
|
[paramPoints]="canvasParam.points"
|
|
[paramMarginX]="canvasParam.margin.x"
|
|
[paramMarginY]="canvasParam.margin.y"
|
|
[paramSpread]="canvasParam.spread"
|
|
[paramStrokeWidth]="canvasParam.stroke?.width"
|
|
[paramShowGrid]="canvasParam.showGrid"></div>
|
|
|
|
<app-graphs [config]="config"></app-graphs>
|
|
|
|
<ul *ngIf="false">
|
|
<li>
|
|
<label>
|
|
<div>Points</div>
|
|
<input type="number" name="points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<div>Margin X</div>
|
|
<input type="number" name="marginX" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<div>Margin Y</div>
|
|
<input type="number" name="marginY" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<div>Stroke Width</div>
|
|
<input type="number" name="strokeWidth" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<div>Spread lines</div>
|
|
<input type="number" name="spread" [(ngModel)]="canvasParam.spread" max="20" min="5" step="1">
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<div>Show Grid?</div>
|
|
<input type="checkbox" name="showGrid" [(ngModel)]="canvasParam.showGrid">
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
|
|
<aside>
|
|
<form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate>
|
|
<div class="form-group">
|
|
<label class="form-control-label">
|
|
Breite <small>(bspw. 42, -12, 3.2)</small>
|
|
</label>
|
|
<input type="number" class="form-control" formControlName="width">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-control-label">
|
|
Höhe <small>(bspw. 42, -12, 3.2)</small>
|
|
</label>
|
|
<input type="number" class="form-control" formControlName="height">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-control-label">
|
|
Anfangsvektor
|
|
</label>
|
|
<select class="form-control" formControlName="directionStart">
|
|
<option value="0">Oben</option>
|
|
<option value="90">Rechts</option>
|
|
<option value="180">Unten</option>
|
|
<option value="270">Links</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-control-label">
|
|
Endvektor
|
|
</label>
|
|
<select class="form-control" formControlName="directionEnd">
|
|
<option value="0">Oben</option>
|
|
<option value="90">Rechts</option>
|
|
<option value="180">Unten</option>
|
|
<option value="270">Links</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-control-label">
|
|
Knotenpunkte
|
|
</label>
|
|
<input type="number" class="form-control" formControlName="nodes" min="1" max="10">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" [disabled]="configForm.invalid">Aktualisieren</button>
|
|
</form>
|
|
</aside>
|
|
|