From f96648e38492f4e56962561b750c97f7f06cf22f Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 1 Aug 2022 20:33:42 +0200
Subject: [PATCH] [editor] Fix button action inputs
Casting to ButtonElement caused issues where changed values were not
recognized by inputs.
#280
---
.../button-properties.component.ts | 36 ++++++++-----------
1 file changed, 15 insertions(+), 21 deletions(-)
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/button-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/button-properties.component.ts
index 8db4f5d8a..110012461 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/button-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/button-properties.component.ts
@@ -1,11 +1,10 @@
import {
- Component, EventEmitter, Input, OnInit, Output
+ Component, EventEmitter, Input, Output
} from '@angular/core';
-import { UnitService } from '../../../../services/unit.service';
-import { SelectionService } from '../../../../services/selection.service';
import { FileService } from 'common/services/file.service';
import { UIElement } from 'common/models/elements/element';
-import { ButtonElement } from 'common/models/elements/button/button';
+import { UnitService } from '../../../../services/unit.service';
+import { SelectionService } from '../../../../services/selection.service';
@Component({
selector: 'aspect-button-properties',
@@ -14,14 +13,14 @@ import { ButtonElement } from 'common/models/elements/button/button';
<legend>Knopf</legend>
<mat-checkbox *ngIf="combinedProperties.asLink !== undefined"
- [checked]="combinedButtonElement.asLink"
+ [checked]="$any(combinedProperties).asLink"
(change)="updateModel.emit({ property: 'asLink', value: $event.checked })">
{{'propertiesPanel.asLink' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.action' | translate }}</mat-label>
- <mat-select [value]="combinedButtonElement.action"
+ <mat-select [value]="combinedProperties.action"
(selectionChange)="updateModel.emit({ property: 'action', value: $event.value })">
<mat-option [value]="null">
{{ 'propertiesPanel.none' | translate }}
@@ -35,13 +34,13 @@ import { ButtonElement } from 'common/models/elements/button/button';
<mat-form-field appearance="fill">
<mat-label>{{'propertiesPanel.actionParam' | translate }}</mat-label>
- <mat-select [disabled]="combinedButtonElement.action === null"
- [value]="combinedButtonElement.actionParam"
- [matTooltipDisabled]="combinedButtonElement.action !== 'pageNav'"
+ <mat-select [disabled]="combinedProperties.action === null"
+ [value]="combinedProperties.actionParam"
+ [matTooltipDisabled]="combinedProperties.action !== 'pageNav'"
[matTooltip]="'propertiesPanel.pageNavSelectionHint' | translate"
(selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })">
- <ng-container *ngIf="combinedButtonElement.action === 'pageNav'">
+ <ng-container *ngIf="combinedProperties.action === 'pageNav'">
<ng-container *ngFor="let page of unitService.unit.pages; index as i">
<mat-option *ngIf="!page.alwaysVisible && selectionService.selectedPageIndex !== i"
[value]="i">
@@ -50,7 +49,7 @@ import { ButtonElement } from 'common/models/elements/button/button';
</ng-container>
</ng-container>
- <ng-container *ngIf="combinedButtonElement.action === 'unitNav'">
+ <ng-container *ngIf="combinedProperties.action === 'unitNav'">
<mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
@@ -60,14 +59,14 @@ import { ButtonElement } from 'common/models/elements/button/button';
</mat-form-field>
<div class="image-panel" (mouseenter)="hoveringImage = true" (mouseleave)="hoveringImage = false">
- <button *ngIf="combinedButtonElement.imageSrc === null || hoveringImage"
+ <button *ngIf="combinedProperties.imageSrc === null || hoveringImage"
class="add-image-button" mat-raised-button
(click)="loadImage()">{{'loadImage' | translate }}</button>
- <button *ngIf="combinedButtonElement.imageSrc !== null && hoveringImage"
+ <button *ngIf="combinedProperties.imageSrc !== null && hoveringImage"
class="remove-image-button" mat-raised-button
(click)="removeImage()">{{'removeImage' | translate }}</button>
- <img *ngIf="combinedButtonElement.imageSrc"
- [src]="combinedButtonElement.imageSrc">
+ <img *ngIf="combinedProperties.imageSrc"
+ [src]="combinedProperties.imageSrc">
</div>
</fieldset>
`,
@@ -80,20 +79,15 @@ import { ButtonElement } from 'common/models/elements/button/button';
'.image-panel img {width:100%; height:100%;}'
]
})
-export class ButtonPropertiesComponent implements OnInit {
+export class ButtonPropertiesComponent {
@Input() combinedProperties!: UIElement;
@Output() updateModel =
new EventEmitter<{ property: string; value: string | number | boolean | null, isInputValid?: boolean | null }>();
- combinedButtonElement: ButtonElement = {} as ButtonElement;
hoveringImage = false;
constructor(public unitService: UnitService, public selectionService: SelectionService) { }
- ngOnInit(): void {
- this.combinedButtonElement = this.combinedProperties as ButtonElement;
- }
-
async loadImage(): Promise<void> {
this.updateModel.emit({ property: 'imageSrc', value: await FileService.loadImage() });
}
--
GitLab