graph3D.component.html

<div class="card">
  <div class="controls">
    <div class="btn-group ddown">
      <button
        type="button"
        class="btn btn-secondary"
        style="min-width: 70px"
        (click)="changeZoomType()"
      >
        {{ translationTypes[graphProps.zoomType] | translate | titleCase
        }}{{ translationTypesSuffix[graphProps.zoomType] }}
      </button>
      <div
        class="btn-group"
        ngbDropdown
        role="group"
        aria-label="Button group with nested dropdown"
      >
        <button
          class="btn btn-secondary dropdown-toggle-split"
          ngbDropdownToggle
        ></button>
        <div class="dropdown-menu" ngbDropdownMenu>
          <button
            *ngFor="let type of [1, 2, 3, 4]"
            class="dropdown-item"
            [disabled]="type === graphProps.zoomType"
            (click)="changeZoomType(type)"
          >
            {{ translationTypes[type] | translate | titleCase
            }}{{ translationTypesSuffix[type] }}
          </button>
        </div>
      </div>
    </div>

    <button
      ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
      triggers="mouseenter:mouseleave"
      placement="bottom"
      class="btn btn-sm btn-secondary"
      (click)="zoomIn()"
    >
      <i class="fa fa-plus"></i>
    </button>

    <button
      ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
      triggers="mouseenter:mouseleave"
      placement="bottom"
      class="btn btn-sm btn-secondary"
      (click)="zoomOut()"
    >
      <i class="fa fa-minus"></i>
    </button>

    <button
      ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
      triggers="mouseenter:mouseleave"
      placement="bottom"
      class="btn btn-sm btn-secondary"
      (click)="center()"
    >
      <i class="fa fa-arrows"></i>
    </button>

    <button
      closePopoverDirective
      class="btn btn-sm btn-secondary"
      placement="bottom"
      [autoClose]="'outside'"
      [ngbPopover]="popoverAxesSize"
      popoverTitle="Rango de ejes"
      #popover="ngbPopover"
      tiggers="click"
    >
      <i class="fa fa-arrows-h"></i>
    </button>
    <ng-template #popoverAxesSize>
      <div class="axes-size">
        <div class="axe">
          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.range.xMin"
            [max]="graphProps.range.xMax - 1"
            [min]="-99"
            (change)="onChangeAxesSize('xMin', $event)"
          />
          <div class="less-than"><span>&#8804;</span>x<span>&#8804;</span></div>

          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.range.xMax"
            [max]="99"
            [min]="graphProps.range.xMin + 1"
            (change)="onChangeAxesSize('xMax', $event)"
          />
        </div>

        <div class="axe">
          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.range.yMin"
            [max]="graphProps.range.yMax - 1"
            [min]="-99"
            (change)="onChangeAxesSize('yMin', $event)"
          />
          <div class="less-than"><span>&#8804;</span>y<span>&#8804;</span></div>

          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.range.yMax"
            [max]="99"
            [min]="graphProps.range.yMin + 1"
            (change)="onChangeAxesSize('yMax', $event)"
          />
        </div>

        <div class="axe">
          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.range.zMin"
            [max]="graphProps.range.zMax - 1"
            [min]="-99"
            (change)="onChangeAxesSize('zMin', $event)"
          />
          <div class="less-than"><span>&#8804;</span>z<span>&#8804;</span></div>

          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.range.zMax"
            [max]="99"
            [min]="graphProps.range.zMin + 1"
            (change)="onChangeAxesSize('zMax', $event)"
          />
        </div>
      </div>
    </ng-template>

    <button
      ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
      triggers="mouseenter:mouseleave"
      placement="bottom"
      class="btn btn-sm btn-secondary"
      (click)="clear()"
    >
      <i class="fa fa-trash"></i>
    </button>

    <button
      [autoClose]="'outside'"
      [ngbPopover]="popoverConfig"
      closePopoverDirective
      placement="bottom"
      tiggers="click"
      class="btn btn-sm btn-secondary"
      popoverTitle="{{ 'i18n.object.settings' | translate | titleCase }}"
    >
      <i class="fa fa-gear"></i>
    </button>

    <ng-template #popoverConfig>
      <div style="width: 140px">
        <label class="d-block">
          <input
            type="checkbox"
            [checked]="graphProps.showEdges"
            (click)="changeEdgesVisibility()"
          />
          {{ "i18n.object.edges" | translate | titleCase }}
        </label>

        <label class="d-block">
          <input
            type="checkbox"
            [checked]="graphProps.showAxes"
            (click)="changeAxesVisibility()"
          />
          {{ "i18n.object.grid" | translate | titleCase }}
        </label>

        <label class="d-block">
          <input
            type="checkbox"
            [checked]="graphProps.showVertices"
            (click)="changeVerticesVisibility()"
          />
          {{ "i18n.object.vertices" | translate | titleCase }}
        </label>

        <div style="display: flex">
          <span style="margin-right: 8px; align-self: center">
            {{ "i18n.object.quality" | translate | titleCase }}:
          </span>

          <input
            type="number"
            class="form-control form-control-sm"
            [(ngModel)]="graphProps.quality"
            [max]="99"
            [min]="2"
            (change)="onChangeQuality()"
            style="width: 55px"
          />
        </div>

        <hr style="margin-block: 0.75rem 0.5rem" />

        <label class="d-block">
          <input
            type="checkbox"
            [checked]="graphProps.showMetaData"
            (click)="changeMetaDataVisibility()"
          />
          {{ "i18n.object.metaData" | translate | titleCase }}
        </label>
      </div>
    </ng-template>
  </div>

  <div class="card-block contenedor-canvas">
    <animation-control
      [minSpeed]="60"
      [value]="animationProps.value"
      [speed]="animationProps.speed"
      [visible]="animationProps.visible"
      [playing]="animationProps.playing"
      [onChangeSpeed]="onAnimationChangeSpeed"
      [onTogglePlay]="onAnimationTogglePlay"
    >
    </animation-control>

    <div #graph3DElement style="width: 100%; height: 100%"></div>
  </div>
</div>