Work for #3390: fix image adorners

surveyjs · Sep 27, 2022 · 91f5279 · 91f5279
1 parent 3781cf8
commit 91f5279
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/packages/survey-creator-angular/src/adorners/question-image.component.html b/packages/survey-creator-angular/src/adorners/question-image.component.html
@@ -2,9 +2,9 @@
   <div class="svc-image-question-controls">
     <ng-container *ngIf="adorner.allowEdit">
       <input type="file" aria-hidden="true" tabindex="-1" accept="image/*" class="svc-choose-file-input" />
-      <svg class="svc-image-question-controls__button" [iconName]="'icon-file'" [size]="24" [key2click]
-        (click)="adorner.chooseFile(adorner)" [attr.title]="undefined" [attr.aria-label]="undefined"
-        sv-ng-svg-icon></svg>
+      <span class="svc-image-question-controls__button" [key2click] [attr.title]="undefined" [attr.aria-label]="undefined">
+        <svg  [iconName]="'icon-file'" [size]="24" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
+      </span>
     </ng-container>
   </div>
 </ng-template>
diff --git a/packages/survey-creator-angular/src/adorners/question-image.component.ts b/packages/survey-creator-angular/src/adorners/question-image.component.ts
@@ -1,22 +1,25 @@
-import { ChangeDetectorRef, Component, Input, ViewContainerRef } from "@angular/core";
-import { AngularComponentFactory, BaseAngular, EmbeddedViewContentComponent } from "survey-angular-ui";
-import { ItemValue, PageModel, Question, SurveyModel } from "survey-core";
-import { CreatorBase, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel } from "survey-creator-core";
-import { CreatorModelComponent } from "../creator-model.component";
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { AngularComponentFactory, EmbeddedViewContentComponent } from "survey-angular-ui";
+import { QuestionImageAdornerViewModel } from "survey-creator-core";
 import { QuestionDesignerComponent } from "../question.component";
 
 @Component({
   selector: "svc-image-question",
   templateUrl: "../question.component.html",
   styles: [":host { display: none; }"]
 })
-export class QuestionImageDesignerComponent extends QuestionDesignerComponent {
+export class QuestionImageDesignerComponent extends QuestionDesignerComponent implements AfterViewInit {
+  @ViewChild("container", { read: ElementRef }) container!: ElementRef<HTMLDivElement>
+
   protected override createModel(): void {
     if (this.componentData) {
       this.adorner = new QuestionImageAdornerViewModel(this.creator, this.model, <any>null, this.viewContainerRef?.element.nativeElement.nextSibling);
     }
   }
   public override adornerComponent = "svc-image-question-adorner";
+  ngAfterViewInit(): void {
+    (<QuestionImageAdornerViewModel>this.adorner).questionRoot = this.container.nativeElement;
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent("svc-image-question", QuestionImageDesignerComponent);
@@ -27,7 +30,7 @@ AngularComponentFactory.Instance.registerComponent("svc-image-question", Questio
   styles: [":host { display: none; }"]
 })
 export class QuestionImageAdornerDesignerComponent extends EmbeddedViewContentComponent {
-  @Input() adorner!: any;
+  @Input() adorner!: QuestionImageAdornerViewModel;
   @Input() question!: any;
 }
 

diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
@@ -1,7 +1,7 @@
 <ng-template #template>
   <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()"
     (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
-    [attr.data-sv-drop-target-survey-element]="adorner.element.name || null">
+    [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
 
     <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content" [class]="adorner.css()"
       [key2click] (click)="adorner.select(adorner, $event)" data-bind="clickBubble: false">