extensions/interactions/GraphInput/directives/graph-viz.component.html - develop - githubmirror/oppia

extensions/interactions/GraphInput/directives/graph-viz.component.html
209 строк8 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
<style>
  .oppia-graph-input-viz-container {
    background-color: white;
    border: 1px solid black;
    cursor: default;
    position: relative;
  }
  .oppia-graph-button-label {
    font-family: 'Font Awesome 5 Free', Arial, sans-serif;
    font-weight: 900;
  }
  .unselectable-text {
    cursor: default;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
  }
  .unclickable-text {
    pointer-events: none;
  }
  .oppia-graph-type-text {
    text-anchor: middle;
  }
  .graph-viz .oppia-update-button-container {
    float: right;
    height: 35px;
  }
  .oppia-cursor-for-add-node {
    background: red;
    border: 1px solid #000;
    border-radius: 50%;
    height: 10px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 10px;
    z-index: 10;
  }
</style>
<div class="graph-viz">
  <div class="oppia-graph-input-viz-container e2e-test-graph-input-viz-container">
    <svg class="oppia-graph-viz-svg"
         #graphArea
         width="100%"
         height="250"
         (mousemove)="mousemoveGraphSVG($event)"
         (click)="onClickGraphSVG()"
         [attr.viewBox]="svgViewBox">

      <svg viewBox="0 0 90 250" width="100%" height="250" preserveAspectRatio="xMaxYMin meet">
        <text>{{canEditOptions}}</text>
        <ng-container *ngIf="canEditOptions">
          <g *ngFor="let button of graphOptions; let idx = index">
            <rect *ngIf="graph"
                  tabindex="0"
                  attr.class="{{button.text.toLowerCase()}}"
                  width="70"
                  height="30"
                  x="10"
                  attr.y="{{10 + 50 * idx}}"
                  rx="5"
                  ry="5"
                  [style.fill]="'white'"
                  [style.stroke]="'black'"
                  [style.strokeWidth]="graph[button.option] ? '3' : '1'"
                  (click)="toggleGraphOption(button.option)">
            </rect>
            <text class="unselectable-text unclickable-text oppia-graph-type-text"
                  x="45"
                  attr.y="{{30 + 50 * idx}}">
            {{button.text}}
            </text>
          </g>
        </ng-container>
      </svg>

      <g *ngFor="let button of buttons; let idx = index" #optionButtons>
        <rect attr.class="graph-button e2e-test-{{(button.description | translate).replace(' ','-')}}-button"
              tabindex="0"
              width="140"
              (keydown)="handleKeyDown($event)"
              height="30"
              x="10"
              attr.y="{{10 + 50 * idx}}"
              rx="5"
              ry="5"
              (click)="onClickModeButton(button.mode, $event)"
              (keydown.enter)="onClickModeButton(button.mode, $event)"
              (mouseenter)="state.hoveredModeButton = button.mode"
              (mouseleave)="state.hoveredModeButton = (state.hoveredModeButton == button.mode) ? null : state.hoveredModeButton"
              [style.fill]="'white'"
              [style.stroke]="'black'"
              style.strokeWidth="{{state.currentMode == button.mode ? '3' : '1'}}"
              [attr.aria-label]="button.description | translate">
        </rect>
        <text *ngIf="!isLanguageRTL()" class="oppia-graph-button-label unselectable-text unclickable-text" x="18" attr.y="{{32 + 50 * idx}}">
          {{button.text}}
        </text>
        <text *ngIf="isLanguageRTL()" class="oppia-graph-button-label unselectable-text unclickable-text" x="108" attr.y="{{32 + 50 * idx}}">
          {{button.text}}
        </text>
        <text *ngIf="!isLanguageRTL()" class="unselectable-text unclickable-text" x="40" attr.y="{{30 + 50 * idx}}" text-anchor="right">
          {{button.description | translate}}
        </text>
        <text *ngIf="isLanguageRTL()" class="unselectable-text unclickable-text" x="80" attr.y="{{30 + 50 * idx}}" text-anchor="right">
          {{button.description | translate}}
        </text>
      </g>

      <line *ngIf="state.addEdgeVertex !== null && !usingMobileDevice"
            [attr.x1]="graph?.vertices[state.addEdgeVertex].x"
            [attr.y1]="graph?.vertices[state.addEdgeVertex].y"
            [attr.x2]="state.mouseX"
            [attr.y2]="state.mouseY"
            [ngStyle]="{'stroke': 'black', 'stroke-width': EDGE_WIDTH_PX}">
      </line>
      <g *ngFor="let edge of graph?.edges; let idx = index">
        <line class="e2e-test-graph-edge"
              (click)="onClickEdge(idx)"
              (keydown.enter)="onClickEdge(idx)"
              tabindex="0"
              (mouseenter)="state.hoveredEdge = idx"
              (mouseleave)="state.hoveredEdge = (idx === state.hoveredEdge) ? null : state.hoveredEdge"
              attr.x1="{{graph.vertices[edge.src].x}}"
              attr.y1="{{graph.vertices[edge.src].y}}"
              attr.x2="{{graph.vertices[edge.dst].x}}"
              attr.y2="{{graph.vertices[edge.dst].y}}"
              attr.style="{{'stroke:' + getEdgeColor(idx) + '; stroke-width:' + EDGE_WIDTH_PX}}">
        </line>
        <polygon *ngIf="graph?.isDirected"
                 (mouseenter)="state.hoveredEdge = idx"
                 (mouseleave)="state.hoveredEdge = (idx === state.hoveredEdge) ? null : state.hoveredEdge"
                 [attr.points]="getDirectedEdgeArrowPoints(idx)"
                 attr.style="{{'fill:' + getEdgeColor(idx)}}">
        </polygon>
        <text *ngIf="graph?.isWeighted"
              [attr.x]="getEdgeCentre(idx).x"
              attr.y="{{getEdgeCentre(idx).y - 12}}"
              attr.style="{{'fill: ' + getEdgeColor(idx)}}"
              (click)="onClickEdge(idx)"
              (mouseenter)="state.hoveredEdge = idx"
              (mouseleave)="state.hoveredEdge = (idx === state.hoveredEdge) ? null : state.hoveredEdge"
              class="unselectable-text">
          {{edge.weight}}
        </text>
      </g>
      <g *ngFor="let vertex of graph?.vertices; let idx = index"
         attr.transform="{{'translate(' + vertex.x + ',' + vertex.y + ')'}}">
        <text *ngIf="graph?.isLabeled"
              x="0"
              y="-10"
              (click)="onClickVertex(idx)"
              (mouseenter)="state.hoveredVertex = idx"
              (mouseleave)="state.hoveredVertex = (idx === state.hoveredVertex) ? null : state.hoveredVertex"
              (mousedown)="onMousedownVertex(idx)"
              attr.style="{{'fill: ' + getVertexColor(idx)}}"
              class="unselectable-text">
          {{vertex.label}}
        </text>
        <circle attr.class="e2e-test-graph-vertex-{{idx}} e2e-test-graph-vertex"
                (mouseenter)="state.hoveredVertex = idx"
                (mouseleave)="onMouseleaveVertex(idx)"
                (focus)="onFocusVertex(idx)"
                (blur)="onBlurVertex(idx)"
                (click)="onClickVertex(idx)"
                (keydown.enter)="onClickVertex(idx)"
                tabindex="0"
                (mousedown)="onMousedownVertex(idx)"
                attr.style="{{'fill: ' + getVertexColor(idx)}}"
                cx="0"
                cy="0"
                [attr.r]="VERTEX_RADIUS_PX">
        </circle>
      </g>
    </svg>
    <div class="oppia-cursor-for-add-node"
         #dotCursor
         (click)="onClickGraphSVG()"
         (keydown.enter)="onClickGraphSVG()"
         *ngIf="state.currentMode === 2">
    </div>
  </div>
  <div [hidden]="usingMobileDevice">
      {{helpText | translate}}
  </div>
  <br>

  <div class="oppia-update-button-container">
    <div *ngIf="state.selectedVertex !== null && graph?.isLabeled && canEditVertexLabel">
      <input type="text" [(ngModel)]="selectedVertexLabel" [oppiaFocusOn]="vertexLabelEditBegun">
      <button mat-raised-button
              (click)="state.selectedVertex = null"
              [innerHTML]="'I18N_INTERACTIONS_GRAPH_UPDATE_LABEL' | translate">
      </button>
    </div>
    <div *ngIf="state.selectedEdge !== null && graph?.isWeighted && canEditEdgeWeight">
      <input type="number"
             [(ngModel)]="selectedEdgeWeight"
             [oppiaFocusOn]="edgeWeightEditBegun"
             [ngStyle]="shouldShowWrongWeightWarning ? {'border': '1px solid red'}: {}"
             (blur)="shouldShowWrongWeightWarning = !isValidEdgeWeight()"
             (focus)="shouldShowWrongWeightWarning = false">
      <button mat-raised-button
              (click)="onUpdateEdgeWeight()"
              [innerHTML]="'I18N_INTERACTIONS_GRAPH_UPDATE_WEIGHT' | translate">
      </button>
    </div>
  </div>
</div>