Skip to content
Snippets Groups Projects
Commit 6161be27 authored by rhenck's avatar rhenck
Browse files

Remove unused fields in section component

parent ad6290f8
No related branches found
No related tags found
No related merge requests found
Showing
with 122 additions and 125 deletions
......@@ -6,9 +6,7 @@ import { UnitUIElement } from '../../../../../../../common/unit';
@Directive()
export abstract class CanvasElementComponent {
@Input() elementModel!: UnitUIElement;
@Input() canvasSize!: [number, number];
@Input() manualPositioning!: boolean;
@Input() sectionIndex!: number;
@Input() draggable!: boolean;
@Output() elementSelected = new EventEmitter<{ componentElement: CanvasElementComponent, multiSelect: boolean }>();
style: Record<string, string> = {};
......
......@@ -4,17 +4,17 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-audio',
template: `
<div *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
<audio controls src="{{$any(elementModel).src}}"></audio>
</div>
<div *ngIf="manualPositioning"
(click)="click($event)"
[ngStyle]="style">
<audio controls src="{{$any(elementModel).src}}"></audio>
</div>
<div *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
<audio controls src="{{$any(elementModel).src}}"></audio>
</div>
<div *ngIf="draggable"
(click)="click($event)"
[ngStyle]="style">
<audio controls src="{{$any(elementModel).src}}"></audio>
</div>
`,
styles: [
'div {position: absolute; display: inline-block; border: 5px solid; padding: 12px 9px 9px 9px;}'
......
......@@ -4,13 +4,13 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-button',
template: `
<button *ngIf="!manualPositioning"
<button *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
mat-button (click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</button>
<button *ngIf="manualPositioning"
<button *ngIf="draggable"
mat-button (click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
......
......@@ -4,19 +4,19 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-checkbox',
template: `
<mat-checkbox *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
class="example-margin"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</mat-checkbox>
<mat-checkbox *ngIf="manualPositioning"
class="example-margin"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</mat-checkbox>
<mat-checkbox *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
class="example-margin"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</mat-checkbox>
<mat-checkbox *ngIf="draggable"
class="example-margin"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</mat-checkbox>
`,
styles: [
'button {position: absolute}'
......
......@@ -4,29 +4,29 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-dropdown',
template: `
<mat-form-field *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
appearance="fill"
(click)="click($event)"
[ngStyle]="style">
<mat-label>{{$any(elementModel).label}}</mat-label>
<mat-select>
<mat-option *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="manualPositioning"
appearance="fill"
(click)="click($event)"
[ngStyle]="style">
<mat-label>{{$any(elementModel).label}}</mat-label>
<mat-select>
<mat-option *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
appearance="fill"
(click)="click($event)"
[ngStyle]="style">
<mat-label>{{$any(elementModel).label}}</mat-label>
<mat-select>
<mat-option *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="draggable"
appearance="fill"
(click)="click($event)"
[ngStyle]="style">
<mat-label>{{$any(elementModel).label}}</mat-label>
<mat-select>
<mat-option *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
`,
styles: [
'mat-form-field {position: absolute}'
......
......@@ -4,15 +4,15 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-image',
template: `
<img *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
src="{{$any(elementModel).src}}" alt="Image Placeholder"
(click)="click($event)"
[ngStyle]="style">
<img *ngIf="manualPositioning"
src="{{$any(elementModel).src}}" alt="Image Placeholder"
(click)="click($event)"
[ngStyle]="style">
<img *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
src="{{$any(elementModel).src}}" alt="Image Placeholder"
(click)="click($event)"
[ngStyle]="style">
<img *ngIf="draggable"
src="{{$any(elementModel).src}}" alt="Image Placeholder"
(click)="click($event)"
[ngStyle]="style">
`,
styles: [
'img {position: absolute}'
......
......@@ -4,17 +4,17 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-label',
template: `
<div *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</div>
<div *ngIf="manualPositioning"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</div>
<div *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</div>
<div *ngIf="draggable"
(click)="click($event)"
[ngStyle]="style">
{{$any(elementModel).label}}
</div>
`,
styles: [
'div {position: absolute}'
......
......@@ -4,27 +4,27 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-radio-button-group',
template: `
<div *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
<label id="radio-group-label">{{$any(elementModel).text}}</label>
<mat-radio-group aria-labelledby="radio-group-label" fxLayout="{{elementModel.alignment}}">
<mat-radio-button *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-radio-button>
</mat-radio-group>
</div>
<div *ngIf="manualPositioning"
(click)="click($event)"
[ngStyle]="style">
<label id="radio-group-label">{{$any(elementModel).text}}</label>
<mat-radio-group aria-labelledby="radio-group-label" fxLayout="{{elementModel.alignment}}">
<mat-radio-button *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-radio-button>
</mat-radio-group>
</div>
<div *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
<label id="radio-group-label">{{$any(elementModel).text}}</label>
<mat-radio-group aria-labelledby="radio-group-label" fxLayout="{{elementModel.alignment}}">
<mat-radio-button *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-radio-button>
</mat-radio-group>
</div>
<div *ngIf="draggable"
(click)="click($event)"
[ngStyle]="style">
<label id="radio-group-label">{{$any(elementModel).text}}</label>
<mat-radio-group aria-labelledby="radio-group-label" fxLayout="{{elementModel.alignment}}">
<mat-radio-button *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-radio-button>
</mat-radio-group>
</div>
`,
styles: [
'div {position: absolute}'
......
......@@ -4,27 +4,27 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-text-field',
template: `
<div *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this">
<input *ngIf="$any(elementModel).multiline === false" matInput (click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
<textarea *ngIf="$any(elementModel).multiline === true" matInput
(click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
<div *ngIf="!draggable"
cdkDrag [cdkDragData]="this">
<input *ngIf="$any(elementModel).multiline === false" matInput (click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
<textarea *ngIf="$any(elementModel).multiline === true" matInput
(click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
</textarea>
</div>
<div *ngIf="manualPositioning">
<input *ngIf="$any(elementModel).multiline === false" matInput (click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
<textarea *ngIf="$any(elementModel).multiline === true" matInput
(click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
</div>
<div *ngIf="draggable">
<input *ngIf="$any(elementModel).multiline === false" matInput (click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
<textarea *ngIf="$any(elementModel).multiline === true" matInput
(click)="click($event)"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
</textarea>
</div>
</div>
`,
styles: [
'div {position: absolute}'
......
......@@ -4,17 +4,17 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
@Component({
selector: 'app-video',
template: `
<div *ngIf="!manualPositioning"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
<video controls src="{{$any(elementModel).src}}"></video>
</div>
<div *ngIf="manualPositioning"
(click)="click($event)"
[ngStyle]="style">
<video controls src="{{$any(elementModel).src}}"></video>
</div>
<div *ngIf="!draggable"
cdkDrag [cdkDragData]="this"
(click)="click($event)"
[ngStyle]="style">
<video controls src="{{$any(elementModel).src}}"></video>
</div>
<div *ngIf="draggable"
(click)="click($event)"
[ngStyle]="style">
<video controls src="{{$any(elementModel).src}}"></video>
</div>
`,
styles: [
'div {position: absolute; display: inline-block;border: 5px solid; padding: 12px 9px 9px 9px}'
......
......@@ -72,8 +72,7 @@ export class CanvasSectionComponent implements OnInit {
const componentFactory = this.getComponentFactory(element);
const componentRef = this.elementContainer.createComponent(componentFactory);
componentRef.instance.elementModel = element;
componentRef.instance.canvasSize = [this.section.width, this.section.height];
componentRef.instance.manualPositioning = this.manualPositioning;
componentRef.instance.draggable = this.manualPositioning;
componentRef.instance.updateStyle();
componentRef.instance.elementSelected.subscribe(
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment