diff --git a/projects/editor/src/app/file.service.ts b/projects/common/file.service.ts
similarity index 100%
rename from projects/editor/src/app/file.service.ts
rename to projects/common/file.service.ts
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-component.directive.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-component.directive.ts
index 425eab410d1c2f8e709e84010ead1ad434c4ce79..c2ae89ac1929eb68ea9d72f7c9ae46404e14b804 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-component.directive.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-component.directive.ts
@@ -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> = {};
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/audio.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/audio.component.ts
index 7ba347c69ed108c692892f490fa1b0c7e396342c..1a743427b473f09ff07d152a3f49f90ecc799c9b 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/audio.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/audio.component.ts
@@ -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;}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/button.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/button.component.ts
index 9d44b08044cc1c592d98bd9fb21bdc1d8651cd7f..f6a0fe9f56c242fad02d3c44d9f02b64ebf113d2 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/button.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/button.component.ts
@@ -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}}
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/checkbox.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/checkbox.component.ts
index ff6f11ad408663afdc0304c0edba316a72bce6b2..a7e85cc033e02a83d5581a3967ff15fb381dc62f 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/checkbox.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/checkbox.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/dropdown.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/dropdown.component.ts
index ca3a3a5596a67198a66e77e2c7829b21e63e0a8f..ed53e8b7fcb03bacf101f5a82c93adf8525e03ec 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/dropdown.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/dropdown.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/image.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/image.component.ts
index 829bc99f04654bd8cb3ab15a1476c9f9de8b2c2c..77695707d843d4857c45b11731e266a5f0f8b86e 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/image.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/image.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/label.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/label.component.ts
index 74abd2292a4d17e5cc4170c33d84aa452d7abe61..e3ee46f91531044881854a417a42dc2efd7ca400 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/label.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/label.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/radio-button-group.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/radio-button-group.component.ts
index d284dea6519d071d9aac6672c3c4a35c7432bf02..b28b8082988c5a22df37170dfb56d2e0fd3449b8 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/radio-button-group.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/radio-button-group.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/text-field.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/text-field.component.ts
index 964d4b7139ec3ba90a6d57087a326aa56af12c1c..2eaca65c17c35877237cf21c9b1202a460aad08a 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/text-field.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/text-field.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/video.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/video.component.ts
index 59025610a4eac413cb8a743745381c582b571996..8ebaf34fba735ff4331f6a52f9ca5b94607a6a20 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/video.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-components/video.component.ts
@@ -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}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section.component.ts
index 5b80a0096dcd0b92bff1e5ed72727c8b3f189e7f..a2b89eeb14fd60d9f4bd6a5ec4dc29d4316224e2 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section.component.ts
@@ -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(