Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use CustomViewports method in storybook-root

Best JavaScript code snippet using storybook-root

commandsModule.js

Source:commandsModule.js

1import cornerstone from 'cornerstone-core';2import cornerstoneTools from 'cornerstone-tools';3import OHIF from '@ohif/core';4import setCornerstoneLayout from './utils/setCornerstoneLayout.js';5import { getEnabledElement } from './state';6import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';7const scroll = cornerstoneTools.import('util/scroll');8const { studyMetadataManager } = OHIF.utils;9const { setViewportSpecificData } = OHIF.redux.actions;10const refreshCornerstoneViewports = () => {11	cornerstone.getEnabledElements().forEach(enabledElement => {12		if (enabledElement.image) {13			cornerstone.updateImage(enabledElement.element);14		}15	});16};17const commandsModule = ({ servicesManager }) => {18	const customViewports = window.store.getState()['rootReducer']['viewports'].activeViewportIndex;19	const actions = {20		rotateViewport: ({ viewports, rotation }) => {21			const enabledElement = getEnabledElement(customViewports);22			if (enabledElement) {23				let viewport = cornerstone.getViewport(enabledElement);24				viewport.rotation += rotation;25				cornerstone.setViewport(enabledElement, viewport);26			}27		},28		flipViewportHorizontal: ({ viewports }) => {29			const enabledElement = getEnabledElement(customViewports);30			if (enabledElement) {31				let viewport = cornerstone.getViewport(enabledElement);32				viewport.hflip = !viewport.hflip;33				cornerstone.setViewport(enabledElement, viewport);34			}35		},36		flipViewportVertical: ({ viewports }) => {37			const enabledElement = getEnabledElement(customViewports);38			if (enabledElement) {39				let viewport = cornerstone.getViewport(enabledElement);40				viewport.vflip = !viewport.vflip;41				cornerstone.setViewport(enabledElement, viewport);42			}43		},44		scaleViewport: ({ direction, viewports }) => {45			const enabledElement = getEnabledElement(customViewports);46			const step = direction * 0.15;47			if (enabledElement) {48				if (step) {49					let viewport = cornerstone.getViewport(enabledElement);50					viewport.scale += step;51					cornerstone.setViewport(enabledElement, viewport);52				} else {53					cornerstone.fitToWindow(enabledElement);54				}55			}56		},57		resetViewport: ({ viewports }) => {58			// const a = window.store.getState();59			const enabledElement = getEnabledElement(customViewports);60			if (enabledElement) {61				cornerstone.reset(enabledElement);62			}63		},64		invertViewport: ({ viewports }) => {65			const enabledElement = getEnabledElement(customViewports);66			if (enabledElement) {67				let viewport = cornerstone.getViewport(enabledElement);68				viewport.invert = !viewport.invert;69				cornerstone.setViewport(enabledElement, viewport);70			}71		},72		// TODO: this is receiving `evt` from `ToolbarRow`. We could use it to have73		//       better mouseButtonMask sets.74		setToolActive: ({ toolName }) => {75			if (!toolName) {76				console.warn('No toolname provided to setToolActive command');77			}78			cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });79		},80		clearAnnotations: ({ viewports }) => {81			const element = getEnabledElement(customViewports);82			if (!element) {83				return;84			}85			const enabledElement = cornerstone.getEnabledElement(element);86			if (!enabledElement || !enabledElement.image) {87				return;88			}89			const { toolState } = cornerstoneTools.globalImageIdSpecificToolStateManager;90			if (!toolState || toolState.hasOwnProperty(enabledElement.image.imageId) === false) {91				return;92			}93			const imageIdToolState = toolState[enabledElement.image.imageId];94			const measurementsToRemove = [];95			Object.keys(imageIdToolState).forEach(toolType => {96				const { data } = imageIdToolState[toolType];97				data.forEach(measurementData => {98					const { _id, lesionNamingNumber, measurementNumber } = measurementData;99					if (!_id) {100						return;101					}102					measurementsToRemove.push({103						toolType,104						_id,105						lesionNamingNumber,106						measurementNumber107					});108				});109			});110			measurementsToRemove.forEach(measurementData => {111				OHIF.measurements.MeasurementHandlers.onRemoved({112					detail: {113						toolType: measurementData.toolType,114						measurementData115					}116				});117			});118		},119		nextImage: ({ viewports }) => {120			const enabledElement = getEnabledElement(customViewports);121			scroll(enabledElement, 1);122		},123		previousImage: ({ viewports }) => {124			const enabledElement = getEnabledElement(customViewports);125			scroll(enabledElement, -1);126		},127		getActiveViewportEnabledElement: ({ viewports }) => {128			const enabledElement = getEnabledElement(customViewports);129			return enabledElement;130		},131		showDownloadViewportModal: ({ title, viewports }) => {132			const activeViewportIndex = customViewports;133			const { UIModalService } = servicesManager.services;134			if (UIModalService) {135				UIModalService.show({136					content: CornerstoneViewportDownloadForm,137					title,138					contentProps: {139						activeViewportIndex,140						onClose: UIModalService.hide141					}142				});143			}144		},145		updateTableWithNewMeasurementData({ toolType, measurementNumber, location, description }) {146			// Update all measurements by measurement number147			const measurementApi = OHIF.measurements.MeasurementApi.Instance;148			const measurements = measurementApi.tools[toolType].filter(m => m.measurementNumber === measurementNumber);149			measurements.forEach(measurement => {150				measurement.location = location;151				measurement.description = description;152				measurementApi.updateMeasurement(measurement.toolType, measurement);153			});154			measurementApi.syncMeasurementsAndToolData();155			refreshCornerstoneViewports();156		},157		getNearbyToolData({ element, canvasCoordinates, availableToolTypes }) {158			const nearbyTool = {};159			let pointNearTool = false;160			availableToolTypes.forEach(toolType => {161				const elementToolData = cornerstoneTools.getToolState(element, toolType);162				if (!elementToolData) {163					return;164				}165				elementToolData.data.forEach((toolData, index) => {166					let elementToolInstance = cornerstoneTools.getToolForElement(element, toolType);167					if (!elementToolInstance) {168						elementToolInstance = cornerstoneTools.getToolForElement(element, `${toolType}Tool`);169					}170					if (!elementToolInstance) {171						console.warn('Tool not found.');172						return undefined;173					}174					if (elementToolInstance.pointNearTool(element, toolData, canvasCoordinates)) {175						pointNearTool = true;176						nearbyTool.tool = toolData;177						nearbyTool.index = index;178						nearbyTool.toolType = toolType;179					}180				});181				if (pointNearTool) {182					return false;183				}184			});185			return pointNearTool ? nearbyTool : undefined;186		},187		removeToolState: ({ element, toolType, tool }) => {188			cornerstoneTools.removeToolState(element, toolType, tool);189			cornerstone.updateImage(element);190		},191		setCornerstoneLayout: () => {192			setCornerstoneLayout();193		},194		setWindowLevel: ({ viewports, window, level }) => {195			const enabledElement = getEnabledElement(customViewports);196			if (enabledElement) {197				let viewport = cornerstone.getViewport(enabledElement);198				viewport.voi = {199					windowWidth: Number(window),200					windowCenter: Number(level)201				};202				cornerstone.setViewport(enabledElement, viewport);203			}204		},205		jumpToImage: ({ StudyInstanceUID, SOPInstanceUID, frameIndex, activeViewportIndex }) => {206			const study = studyMetadataManager.get(StudyInstanceUID);207			const displaySet = study.findDisplaySet(ds => {208				return ds.images && ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID);209			});210			displaySet.SOPInstanceUID = SOPInstanceUID;211			displaySet.frameIndex = frameIndex;212			window.store.dispatch(setViewportSpecificData(activeViewportIndex, displaySet));213			refreshCornerstoneViewports();214		}215	};216	const definitions = {217		jumpToImage: {218			commandFn: actions.jumpToImage,219			storeContexts: [],220			options: {}221		},222		getNearbyToolData: {223			commandFn: actions.getNearbyToolData,224			storeContexts: [],225			options: {}226		},227		removeToolState: {228			commandFn: actions.removeToolState,229			storeContexts: [],230			options: {}231		},232		updateTableWithNewMeasurementData: {233			commandFn: actions.updateTableWithNewMeasurementData,234			storeContexts: [],235			options: {}236		},237		showDownloadViewportModal: {238			commandFn: actions.showDownloadViewportModal,239			storeContexts: ['viewports'],240			options: {}241		},242		getActiveViewportEnabledElement: {243			commandFn: actions.getActiveViewportEnabledElement,244			storeContexts: ['viewports'],245			options: {}246		},247		rotateViewportCW: {248			commandFn: actions.rotateViewport,249			storeContexts: ['viewports'],250			options: { rotation: 90 }251		},252		rotateViewportCCW: {253			commandFn: actions.rotateViewport,254			storeContexts: ['viewports'],255			options: { rotation: -90 }256		},257		invertViewport: {258			commandFn: actions.invertViewport,259			storeContexts: ['viewports'],260			options: {}261		},262		flipViewportVertical: {263			commandFn: actions.flipViewportVertical,264			storeContexts: ['viewports'],265			options: {}266		},267		flipViewportHorizontal: {268			commandFn: actions.flipViewportHorizontal,269			storeContexts: ['viewports'],270			options: {}271		},272		scaleUpViewport: {273			commandFn: actions.scaleViewport,274			storeContexts: ['viewports'],275			options: { direction: 1 }276		},277		scaleDownViewport: {278			commandFn: actions.scaleViewport,279			storeContexts: ['viewports'],280			options: { direction: -1 }281		},282		fitViewportToWindow: {283			commandFn: actions.scaleViewport,284			storeContexts: ['viewports'],285			options: { direction: 0 }286		},287		resetViewport: {288			commandFn: actions.resetViewport,289			storeContexts: ['viewports'],290			options: {}291		},292		clearAnnotations: {293			commandFn: actions.clearAnnotations,294			storeContexts: ['viewports'],295			options: {}296		},297		nextImage: {298			commandFn: actions.nextImage,299			storeContexts: ['viewports'],300			options: {}301		},302		previousImage: {303			commandFn: actions.previousImage,304			storeContexts: ['viewports'],305			options: {}306		},307		// TOOLS308		setToolActive: {309			commandFn: actions.setToolActive,310			storeContexts: [],311			options: {}312		},313		setZoomTool: {314			commandFn: actions.setToolActive,315			storeContexts: [],316			options: { toolName: 'Zoom' }317		},318		setCornerstoneLayout: {319			commandFn: actions.setCornerstoneLayout,320			storeContexts: [],321			options: {},322			context: 'VIEWER'323		},324		setWindowLevel: {325			commandFn: actions.setWindowLevel,326			storeContexts: ['viewports'],327			options: {}328		}329	};330	return {331		actions,332		definitions,333		defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE'334	};335};...

preview.js

Source:preview.js

1import React from "react";2import { addDecorator } from '@storybook/react';3import { ThemeProvider } from "styled-components";4import { theme } from '../src/containers/Layout';5addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>)6const customViewports = {7  '4K': {8    name: '4K',9    styles: {10      width: '3840px',11      height: '2160px',12    },13  },14  fullHD: {15    name: 'fullHD',16    styles: {17      width: '533px',18      height: '801px',19    },20  },21}22export const parameters = {23  actions: { argTypesRegex: "^on[A-Z].*" },24  viewport: { viewports: customViewports }...

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withCustomViewports } from 'storybook-root-decorator';3import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';4addDecorator(5  withCustomViewports({6    viewports: {7      large: {8        styles: {9        },10      },11      phone: {12        styles: {13        },14      },15    },16  })17);18import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';19export const parameters = {20  viewport: {21    viewports: {22      large: {23        styles: {24        },25      },26      phone: {27        styles: {28        },29      },30    },31  },32};33import { addons } from '@storybook/addons';34import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';35addons.setConfig({36  viewport: {37    viewports: {38      large: {39        styles: {40        },41      },42      phone: {43        styles: {44        },45      },46    },47  },48});49import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withCustomViewports } from 'storybook-root-decorator';3addDecorator(withCustomViewports);4import { addDecorator } from '@storybook/vue';5import { withCustomViewports } from 'storybook-root-decorator';6addDecorator(withCustomViewports);7import { addDecorator } from '@storybook/angular';8import { withCustomViewports } from 'storybook-root-decorator';9addDecorator(withCustomViewports);10import { withCustomViewports } from 'storybook-root-decorator';11export const decorators = [withCustomViewports];12import { withCustomViewports } from 'storybook-root-decorator';13export const managerEntries = [withCustomViewports];14import { withCustomViewports } from 'storybook-root-decorator';15export const decorators = [withCustomViewports];16import { withCustomViewports } from 'storybook-root-decorator';17export const managerEntries = [withCustomViewports];18import { withCustomViewports } from 'storybook-root-decorator';19export const decorators = [withCustomViewports];20import { withCustomViewports } from 'storybook-root-decorator';21export const managerEntries = [withCustomViewports];22import { withCustomViewports } from 'storybook-root-decorator';23export const decorators = [withCustomViewports];

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { CustomViewports } from 'storybook-root';4import { action } from '@storybook/addon-actions';5import { Button } from '@storybook/react/demo';6import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';7storiesOf('Button', module)8  .addDecorator(withKnobs)9  .add('with text', () => (10    <Button onClick={action('clicked')}>{text('Label', 'Hello Button')}</Button>11  .add('with some emoji', () => (12    <Button onClick={action('clicked')}>{text('Label', '😀 😎 👍 💯')}</Button>13  .add('with custom viewport', () => (14      width={number('width', 300)}15      height={number('height', 600)}16      isMobile={boolean('isMobile', true)}17      <Button onClick={action('clicked')}>{text('Label', 'Hello Button')}</Button>18  ));19import React from 'react';20import { addDecorator } from '@storybook/react';21import { withViewport } from '@storybook/addon-viewport';22addDecorator(withViewport('iphone6'));23const CustomViewports = ({ children, width, height, isMobile }) => {24  const styles = {25  };26  return (27    <div style={styles}>28      {isMobile ? (29        <div style={{ width: '100%' }}>{children}</div>30      ) : (31        <div style={{ width: '50%' }}>{children}</div>32      )}33  );34};35export { CustomViewports };36import React from 'react';37import { addDecorator } from '@storybook/react';38import { withViewport } from '@storybook/addon-viewport';39addDecorator(withViewport('iphone6'));40const CustomViewports = ({ children, width, height, isMobile }) => {41  const styles = {

Using AI Code Generation

1import { addDecorator, configure } from '@storybook/react';2import { withCustomViewports } from 'storybook-root-decorator';3addDecorator(withCustomViewports);4configure(() => {5  require('./stories');6}, module);7import { storiesOf } from '@storybook/react';8import { withCustomViewports } from 'storybook-root-decorator';9const stories = storiesOf('Custom Viewports', module);10stories.addDecorator(withCustomViewports);11stories.add('Default', () => (12));13import { storiesOf } from '@storybook/react';14import { withCustomViewports } from 'storybook-root-decorator';15const stories = storiesOf('Custom Viewports', module);16stories.addDecorator(withCustomViewports);17stories.add('Other', () => (18));19import { storiesOf } from '@storybook/react';20import { withCustomViewports } from 'storybook-root-decorator';21const stories = storiesOf('Custom Viewports', module);22stories.addDecorator(withCustomViewports);23stories.add('Another', () => (24));25import { storiesOf } from '@storybook/react';26import { withCustomViewports } from 'storybook-root-decorator';27const stories = storiesOf('Custom Viewports', module);28stories.addDecorator(withCustomViewports);29stories.add('Last', () => (30));31import { storiesOf } from '@storybook/react';32import { withCustomViewports } from 'storybook-root-decorator';33const stories = storiesOf('Custom Viewports', module);34stories.addDecorator(withCustomViewports);35stories.add('Last', () => (

Using AI Code Generation

1import { CustomViewports } from 'storybook-root-decorator';2import { addDecorator } from '@storybook/react';3import { withRootDecorator } from 'storybook-root-decorator';4addDecorator(withRootDecorator(CustomViewports));5import { addParameters } from '@storybook/react';6import { CustomViewports } from 'storybook-root-decorator';7addParameters({8  viewport: {9  },10});11import { addons } from '@storybook/addons';12import { create } from '@storybook/theming';13addons.setConfig({14  theme: create({15    textInverseColor: 'rgba(255,255,255,0.9)',16  }),17});18import { addParameters } from '@storybook/react

Using AI Code Generation

1import {CustomViewports} from 'storybook-root';2import {addParameters} from '@storybook/react';3addParameters({4  viewport: {5  },6});7import {addParameters} from '@storybook/react';8addParameters({9  viewport: {10    viewports: {11      ExtraSmall: {12        styles: {13        },14      },15      Small: {16        styles: {17        },18      },19      Medium: {20        styles: {21        },22      },23      Large: {24        styles: {25        },26      },27      ExtraLarge: {28        styles: {29        },30      },31      ExtraExtraLarge: {32        styles: {33        },34      },35    },36  },37});38import {addParameters} from '@storybook/react';39addParameters({40  viewport: {41    viewports: {42      ExtraSmall: {43        styles: {44        },45      },46      Small: {47        styles: {48        },49      },50      Medium: {51        styles: {52        },53      },54      Large: {55        styles: {56        },

Using AI Code Generation

1import { CustomViewports } from 'storybook-root';2import { storiesOf } from '@storybook/react';3storiesOf('CustomViewports', module)4  .add('Default', () => (5  ));6import { CustomViewports } from 'storybook-root';7import { storiesOf } from '@storybook/react';8storiesOf('CustomViewports', module)9  .add('Default', () => (10  ));11import { CustomViewports } from 'storybook-root';12import { storiesOf } from '@storybook/react';13storiesOf('CustomViewports', module)14  .add('Default', () => (15  ));16import { CustomViewports } from 'storybook-root';17import { storiesOf } from '@storybook/react';18storiesOf('CustomViewports', module)19  .add('Default', () => (20  ));21import { CustomViewports } from 'storybook-root';22import { storiesOf } from '@storybook/react';23storiesOf('CustomViewports', module)24  .add('Default', () => (25  ));26import { CustomViewports } from 'storybook-root';27import { storiesOf } from '@storybook/react';28storiesOf('CustomViewports', module)29  .add('Default', () => (30  ));31import { CustomViewports } from 'storybook-root';32import { storiesOf } from '@storybook/react';33storiesOf('Custom

Using AI Code Generation

1import CustomViewports from 'storybook-addon-viewport';2import CustomViewports from 'storybook-addon-viewport';3I am using storybook-addon-viewport with storybook 5.1.9. I have a custom view port which I have defined in the main.js file. I want to use the same custom view port in the test.js file. I tried importing the custom view port in the test.js file but it is not working. I get the following error:4I am using storybook-addon-viewport with storybook 5.1.9. I have a custom view port which I have defined in the main.js file. I want to use the same custom view port in the test.js file. I tried importing the custom view port in the test.js file but it is not working. I get the following error:5I am using storybook-addon-viewport with storybook 5.1.9. I have a custom view port which I have defined in the main.js file. I want to use the same custom view port in the test.js file. I tried importing the custom view port in the test.js file but it is not working. I get the following error:6I am using storybook-addon-viewport with storybook 5.1.9. I have a custom view port which I have defined in the main.js file. I want to use the same custom view port in the test.js file. I tried importing the custom view port in the test.js file but it is not working. I get the following error:7I am using storybook-addon-viewport with storybook 5.1.9. I have a custom view port which I have defined in the main.js file. I want to use the same custom view port in the test.js file. I tried importing the custom view port in the test.js file but it is not working. I get the following error:8I am using storybook-addon-viewport with storybook 5.1.9. I have a custom view port which I have defined in the main.js file. I want to use the same custom view port in the test.js file. I tried importing the custom view port in the test.js file but it is not working. I get the following error:

Using AI Code Generation

1import { addParameters } from '@storybook/react';2addParameters({3  viewport: {4    viewports: {5    },6  },7});8{9  [name: string]: {10    name: string;11    styles: {12      width: string;13      height: string;14    };15    type: 'desktop' | 'mobile' | 'tablet';16  };17}18{19  iphone5: {20    styles: {21    },22  },23  ipad: {24    styles: {25    },26  },27};28import { addParameters } from '@storybook/react';29addParameters({30  viewport: {31    viewports: {32    },33  },34});35{36  [name: string]: {37    name: string;38    styles: {39      width: string;40      height: string;41    };42    type: 'desktop' | 'mobile' | 'tablet';43  };44}45{46  iphone5: {47    styles: {48    },49  },50  ipad: {51    styles: {52    },53  },54};55import { addParameters } from '@storybook/react';56addParameters({57  viewport: {58    viewports: {

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.