paraview-glance/src/components/core/VtkView/template.html

Web application for Visualizing Scientific and Medical datasets

<v-container fluid :class="$style.container">
  <v-layout column :class="$style.floatToolbar">
    <v-tooltip
      left
      :disabled="smallScreen"
    >
      <span class="pv-no-select">Reset camera</span>
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          dark
          v-on="on"
          v-on:click="resetCamera()"
        >
          <v-icon>mdi-image-filter-center-focus</v-icon>
        </v-btn>
      </template>
    </v-tooltip>
    <v-tooltip
      left
      :disabled="smallScreen"
    >
      <span class="pv-no-select">Rotate camera left 90°</span>
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          dark
          v-on="on"
          v-on:click="rollLeft()"
        >
          <v-icon>mdi-rotate-left</v-icon>
        </v-btn>
      </template>
    </v-tooltip>
    <v-tooltip
      left
      :disabled="smallScreen"
    >
      <span class="pv-no-select">Rotate camera right 90°</span>
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          dark
          v-on="on"
          v-on:click="rollRight()"
        >
          <v-icon>mdi-rotate-right</v-icon>
        </v-btn>
      </template>
    </v-tooltip>
    <v-tooltip
      left
      v-if="type === 'View3D'"
      :disabled="smallScreen"
    >
      <span class="pv-no-select">Reset Camera to Orientation {{orientationLabels[0]}}</span>
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          dark
          v-on="on"
          v-on:click="updateOrientation('x')"
        >
          {{orientationLabels[0]}}
        </v-btn>
      </template>
    </v-tooltip>
    <v-tooltip
      left
      v-if="type === 'View3D'"
      :disabled="smallScreen"
    >
      <span class="pv-no-select">Reset Camera to Orientation {{orientationLabels[1]}}</span>
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          dark
          v-on="on"
          v-on:click="updateOrientation('y')"
        >
          {{orientationLabels[1]}}
        </v-btn>
      </template>
    </v-tooltip>
    <v-tooltip
      left
      v-if="type === 'View3D'"
      :disabled="smallScreen"
    >
      <span class="pv-no-select">Reset Camera to Orientation {{orientationLabels[2]}}</span>
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          dark
          v-on="on"
          v-on:click="updateOrientation('z')"
        >
          {{orientationLabels[2]}}
        </v-btn>
      </template>
    </v-tooltip>
  </v-layout>
  <v-layout column fill-height>
    <v-flex
      fill-height
      class="js-view"
      :class="$style.vtkView"
      :style="{ background: backgroundColor }"
      v-on:mousedown="view.activate()"
    />
    <div
      v-if="isActive"
      :class="$style.activeView"
    />
    <div :class="$style.toolbarWrapper">
      <toolbar-sheet v-model="backgroundSheet">
        <v-container grid-list-md class="mr-0">
          <v-layout row>
            <v-spacer />
            <palette-picker
              :size="24"
              :palette="palette"
              :value="backgroundColor"
              v-on:input="changeBackgroundColor"
            />
          </v-layout>
        </v-container>
      </toolbar-sheet>
      <v-toolbar
        dark
        height="45px"
        :class="$style.smallToolbar"
      >
        <v-select
          dense
          flat
          hide-details
          :class="$style.viewTypeSelector"
          :items="viewTypes"
          :value="viewType"
          @change="changeViewType"
        />
        <v-spacer />
        <v-tooltip
          top
          v-if="type === 'View3D'"
          :disabled="smallScreen || viewPointMenuVisible"
        >
          <template v-slot:activator="{ on: tooltip }">
            <v-menu offset-y top left v-model="viewPointMenuVisible">
              <template v-slot:activator="{ on: menu }">
                <v-btn
                  :class="$style.button"
                  icon
                  v-on="{ ...tooltip, ...menu }"
                  v-show="cameraViewPoints.length"
                  :disabled="viewPointMenuVisible"
                >
                  <v-icon>mdi-camera-switch</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, index) in cameraViewPoints"
                  :key="index"
                  @click="changeCameraViewPoint(item)"
                >
                  <v-list-item-title>{{ item }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </template>
          <span class="pv-no-select">Change View Point</span>
        </v-tooltip>
        <v-tooltip
          top
          :disabled="smallScreen"
        >
          <span class="pv-no-select">Background color</span>
          <template v-slot:activator="{ on }">
            <v-btn
              :class="$style.button"
              icon
              :disabled="backgroundSheet || !view"
              v-on="on"
              v-on:click="backgroundSheet = !backgroundSheet"
            >
              <v-icon>mdi-palette</v-icon>
            </v-btn>
          </template>
        </v-tooltip>
        <v-tooltip
          top
          :disabled="smallScreen"
        >
          <span class="pv-no-select">Screenshot</span>
          <template v-slot:activator="{ on }">
            <v-btn
              :class="$style.button"
              icon
              v-on="on"
              v-on:click="screenCapture()"
            >
              <v-icon>mdi-camera-plus</v-icon>
            </v-btn>
          </template>
        </v-tooltip>
        <v-tooltip
          top
          v-if="!smallScreen && singleViewButton"
          key="singleView"
        >
          <span class="pv-no-select">Single view</span>
          <template v-slot:activator="{ on }">
            <v-btn
              :class="$style.button"
              icon
              v-on="on"
              v-on:click="singleView(layoutIndex)"
            >
              <v-icon>mdi-fullscreen</v-icon>
            </v-btn>
          </template>
        </v-tooltip>
        <v-tooltip
          top
          v-if="!smallScreen && flipViewButton"
          key="flipView"
        >
          <span class="pv-no-select">Split view</span>
          <template v-slot:activator="{ on }">
            <v-btn
              :class="$style.button"
              icon
              v-on="on"
              v-on:click="splitView(layoutIndex)"
            >
              <v-icon>mdi-flip-horizontal</v-icon>
            </v-btn>
          </template>
        </v-tooltip>
        <v-tooltip
          top
          v-if="!smallScreen && quadViewButton"
          key="quadView"
        >
          <span class="pv-no-select">Quad view</span>
          <template v-slot:activator="{ on }">
            <v-btn
              :class="$style.button"
              icon
              v-on="on"
              v-on:click="quadView(layoutIndex)"
            >
              <v-icon>mdi-widgets</v-icon>
            </v-btn>
          </template>
        </v-tooltip>
      </v-toolbar>
    </div>
  </v-layout>
</v-container>