This commit is contained in:
Ibrahim 2024-09-22 20:41:12 -04:00
parent 51a87028c1
commit e534802abb
3 changed files with 113 additions and 110 deletions

View File

@ -1,5 +1,3 @@
import { tours } from './tours/tours';
/** @type {AppTypes.Config} */
window.config = {
@ -293,6 +291,109 @@ window.config = {
keys: ['9'],
},
],
tours,
tours: [
{
id: 'basicViewerTour',
route: '/viewer',
steps: [
{
id: 'scroll',
text: 'You can scroll through the images using the mouse wheel.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'zoom',
text: 'You can zoom the images using the right click.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'pan',
text: 'You can pan the images using the middle click.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'windowing',
text: 'You can modify the window level using the left click.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'length',
text: 'You can measure the length of a region using the Length tool.',
attachTo: {
element: '.MeasurementTools-split-button-primary',
on: 'bottom',
},
},
{
id: 'drawAnnotation',
text: 'Use the length tool on the viewport to measure the length of a region.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'trackMeasurement',
text: 'Click yes to track the measurements in the measurement panel.',
attachTo: {
element: '[data-cy="prompt-begin-tracking-yes-btn"]',
on: 'bottom',
},
},
{
id: 'openMeasurementPanel',
text: 'Click the measurements button to open the measurements panel.',
attachTo: {
element: '#trackedMeasurements-btn',
on: 'left-start',
},
},
{
id: 'scrollAwayFromMeasurement',
text: 'Scroll the images using the mouse wheel away from the measurement.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'jumpToMeasurement',
text: 'Click the measurement in the measurement panel to jump to it.',
attachTo: {
element: '[data-cy="measurement-item"]',
on: 'left-start',
},
},
{
id: 'changeLayout',
text: 'You can change the layout of the viewer using the layout button.',
attachTo: {
element: '[data-cy="Layout"]',
on: 'bottom',
},
},
{
id: 'selectLayout',
text: 'Select the MPR layout to view the images in MPR mode.',
attachTo: {
element: '[data-cy="MPR"]',
on: 'left-start',
},
},
],
tourOptions: {},
},
],
};

View File

@ -1,106 +0,0 @@
import { StepOptions, TourOptions } from 'shepherd.js';
const tours = {
route: '/viewer',
steps: [
{
id: 'scroll',
text: 'You can scroll through the images using the mouse wheel.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'zoom',
text: 'You can zoom the images using the right click.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'pan',
text: 'You can pan the images using the middle click.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'windowing',
text: 'You can modify the window level using the left click.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'length',
text: 'You can measure the length of a region using the Length tool.',
attachTo: {
element: '.MeasurementTools-split-button-primary',
on: 'bottom',
},
},
{
id: 'drawAnnotation',
text: 'Use the length tool on the viewport to measure the length of a region.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'trackMeasurement',
text: 'Click yes to track the measurements in the measurement panel.',
attachTo: {
element: '[data-cy="prompt-begin-tracking-yes-btn"]',
on: 'bottom',
},
},
{
id: 'openMeasurementPanel',
text: 'Click the measurements button to open the measurements panel.',
attachTo: {
element: '#trackedMeasurements-btn',
on: 'left-start',
},
},
{
id: 'scrollAwayFromMeasurement',
text: 'Scroll the images using the mouse wheel away from the measurement.',
attachTo: {
element: '.viewport-element',
on: 'left-start',
},
},
{
id: 'jumpToMeasurement',
text: 'Click the measurement in the measurement panel to jump to it.',
attachTo: {
element: '[data-cy="measurement-item"]',
on: 'left-start',
},
},
{
id: 'changeLayout',
text: 'You can change the layout of the viewer using the layout button.',
attachTo: {
element: '[data-cy="Layout"]',
on: 'bottom',
},
},
{
id: 'selectLayout',
text: 'Select the MPR layout to view the images in MPR mode.',
attachTo: {
element: '[data-cy="MPR"]',
on: 'left-start',
},
},
] as StepOptions[],
tourOptions: {} as TourOptions,
};
export { tours };

View File

@ -22,6 +22,8 @@ import ExtensionManagerType from '../extensions/ExtensionManager';
import Hotkey from '../classes/Hotkey';
import { StepOptions, TourOptions } from 'shepherd.js';
declare global {
namespace AppTypes {
export type ServicesManager = ServicesManagerType;
@ -129,6 +131,12 @@ declare global {
maxNumPrefetchRequests: number;
order: 'closest' | 'downward' | 'upward';
};
tours?: Array<{
id: string;
steps: StepOptions[];
tourOptions: TourOptions;
route: string;
}>;
}
export interface Test {