extensions/objects/templates/image-with-regions-editor.component.html - develop - githubmirror/oppia

extensions/objects/templates/image-with-regions-editor.component.html
94 строки4 KB
Jayam Patel
[GSoC 2025 - Acceptance Tests] M1.8 - Implement Acceptance tests for Exploration Editor (#11 in CUJv3 Doc) (#22969)
05 авг 2025, 06:02
05 авг 2025, 06:026e293e1
<div class="image-with-regions-editor" *ngIf="value">
  <div *ngIf="value.imagePath === ''">
    <schema-based-editor [localValue]="value.imagePath"
                         (localValueChange)="imageValueChanged($event)"
                         [schema]="getSchema()">
    </schema-based-editor>
  </div>
  <div class="position-relative" *ngIf="value.imagePath !== ''">
    <div>Add new regions by clicking on the image and dragging:</div>
    <svg class="oppia-image-with-regions-editor-svg e2e-test-svg"
         width="100%"
         attr.style="cursor: {{getCursorStyle()}};"
         attr.height="{{getImageHeight()}}"
         (mousedown)="onSvgMouseDown($event)"
         (mousemove)="onSvgMouseMove($event)"
         (mouseup)="onSvgMouseUp($event)">
      <image [attr.href]="getPreviewUrl(value.imagePath)"
             xlink:href=""
             x="0"
             y="0"
             [attr.height]="getImageHeight()"
             [attr.width]="getImageWidth()"
             class="e2e-test-image-interaction-image">
      </image>
      <rect *ngIf="userIsCurrentlyDrawing"
            [attr.x]="rectX"
            [attr.y]="rectY"
            [attr.width]="rectWidth"
            [attr.height]="rectHeight"
            [attr.style]="getRegionStyle(null)">
      </rect>
      <rect *ngFor="let labeledRegion of value.labeledRegions; let idx = index"
            [attr.x]="labeledRegion.region.area[0][0] * getImageWidth()"
            [attr.y]="labeledRegion.region.area[0][1] * getImageHeight()"
            [attr.width]="(labeledRegion.region.area[1][0] - labeledRegion.region.area[0][0]) * getImageWidth()"
            [attr.height]="(labeledRegion.region.area[1][1] - labeledRegion.region.area[0][1]) * getImageHeight()"
            [attr.style]="getRegionStyle(idx)"
            (mouseover)="onMouseoverRegion(idx)"
            (mouseout)="onMouseoutRegion(idx)"
            (mousemove)="onMouseMoveRegion(idx)"
            (mousedown)="onMousedownRegion(idx)">
      </rect>
      <a *ngFor="let labeledRegion of value.labeledRegions; let idx = index"
         (click)="deleteRegion(idx)"
         target="_blank" rel="noopener">
        <text class="fas fa-trash"
              font-family="Font Awesome 5 Free"
              font-size="20px"
              text-decoration="none"
              [attr.style]="getRegionTrashStyle(idx)"
              [attr.x]="labeledRegion.region.area[1][0] * getImageWidth() - 20"
              [attr.y]="labeledRegion.region.area[1][1] * getImageHeight() - 6">
              &#xF1F8;
        </text>
      </a>
      <text *ngFor="let labeledRegion of value.labeledRegions; let idx = index"
            [attr.style]="getRegionLabelStyle(idx)"
            [attr.x]="labeledRegion.region.area[0][0] * getImageWidth() + 6"
            [attr.y]="labeledRegion.region.area[0][1] * getImageHeight() + 18">
        {{labeledRegion.label}}
      </text>
    </svg>

    <input type="text" *ngIf="selectedRegion !== null"
           class="oppia-image-with-regions-region-label-editor"
           [attr.style]="getRegionLabelEditorStyle()"
           (mouseup)="regionLabelEditorMouseUp()"
           [(ngModel)]="value.labeledRegions[selectedRegion].label"
           (ngModelChange)="regionLabelSetter()">

    <div class="text-danger oppia-error-text">{{errorText}}</div>
    <button type="button" class="btn btn-danger" (click)="resetEditor()">Clear Image and Regions</button>
  </div>
</div>
<style>
  input.oppia-image-with-regions-region-label-editor {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    display: block;
    font-size: 14px;
    margin: 0;
    padding: 0 6px;
    position: absolute;
  }

  .image-with-regions-editor .oppia-error-text {
    margin-bottom: 4px;
  }

  .oppia-image-with-regions-editor-svg {
    user-select: none;
  }
</style>