How to use CustomViewports method in storybook-root

Best JavaScript code snippet using storybook-root

commandsModule.js

Source:commandsModule.js Github

copy

Full Screen

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};...

Full Screen

Full Screen

preview.js

Source:preview.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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';

Full Screen

Using AI Code Generation

copy

Full Screen

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];

Full Screen

Using AI Code Generation

copy

Full Screen

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 = {

Full Screen

Using AI Code Generation

copy

Full Screen

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', () => (

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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 },

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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:

Full Screen

Using AI Code Generation

copy

Full Screen

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: {

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful