TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ToolBarService

Browse Source
This commit is contained in:
James A. Petts 2020-05-19 10:01:44 +01:00
parent aec30e0db1
commit 6a3e0db53e
11 changed files with 73 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
extensions/default/src/ViewerLayout/index.jsx
View File

@ -28,12 +28,9 @@ function ViewerLayout({
rightPanels,
viewports,
children,
ViewportGridComp
ViewportGridComp,
}) {
const [displaySets, setDisplaySets] = useState({});
//const ViewportGrid = React.Children.only(children);
const { ToolBarService } = servicesManager.services;
/**
* Set body classes (tailwindcss) that don't allow vertical
* or horizontal overflow (no scrolling). Also guarantee window
@ -47,6 +44,7 @@ function ViewerLayout({
document.body.classList.remove('overflow-hidden');
};
}, []);
const getPanelData = id => {
const entry = extensionManager.getModuleEntry(id);
// TODO, not sure why sidepanel content has to be JSX, and not a children prop?
@ -70,27 +68,34 @@ function ViewerLayout({
};
};
const handleToolBarSubscription = newToolBarLayout => {
debugger;
setToolBarLayout(newToolBarLayout);
};
const [toolBarLayout, setToolBarLayout] = useState([
{ tools: [], moreTools: [] },
{ tools: [] },
]);
useEffect(() => {
const { unsubscribe } = ToolBarService.subscribe(
ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
handleToolBarSubscription
);
return unsubscribe;
}, []);
const leftPanelComponents = leftPanels.map(getPanelData);
const rightPanelComponents = rightPanels.map(getPanelData);
const viewportComponents = viewports.map(getViewportComponentData);
// let { toolBarLayout } = useToolbarLayout();
// if (!toolBarLayout.length) {
// return null;
// }
// TODO -> make toolbar service
const toolBarLayout = { tools: [], moreTools: [] };
//const [primaryToolBarLayout, secondaryToolBarLayout] = toolBarLayout;
const primaryToolBarLayout = toolBarLayout;
const secondaryToolBarLayout = toolBarLayout;
return (
<div>
<Header
tools={primaryToolBarLayout.tools}
moreTools={primaryToolBarLayout.moreTools}
tools={toolBarLayout[0].tools}
moreTools={toolBarLayout[0].moreTools}
/>
<div
className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
@ -105,7 +110,7 @@ function ViewerLayout({
{/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full">
<div className="flex flex-2 w-100 border-b border-transparent h-12">
<Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
<Toolbar type="secondary" tools={toolBarLayout[1].tools} />
</div>
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
<ViewportGridComp

8
modes/example/src/index.js
View File

@ -12,8 +12,10 @@ export default function mode({ modeConfiguration }) {
routes: [
{
path: 'viewer',
init: ({ toolBarManager }) => {
toolBarManager.addButtons([
init: ({ servicesManager, extensionManager }) => {
const { ToolBarService } = servicesManager.services;
ToolBarService.init(extensionManager);
ToolBarService.addButtons([
{
id: 'Zoom',
namespace: 'org.ohif.cornerstone.toolbarModule.Zoom',
@ -53,7 +55,7 @@ export default function mode({ modeConfiguration }) {
]);
// Could import layout selector here from org.ohif.default (when it exists!)
toolBarManager.setToolBarLayout([
ToolBarService.setToolBarLayout([
// Primary
{
tools: ['Zoom', 'Levels', 'Pan', 'Capture', 'Layout'],

46
platform/core/src/ToolBarManager.js
View File

@ -1,46 +0,0 @@
export default class toolBarManager {
constructor(extensionManager) {
this.buttons = {};
this.extensionManager = extensionManager;
}
addButtons(buttons) {
buttons.forEach(button => {
const buttonDefinition = this.extensionManager.getModuleEntry(
button.namespace
);
const id = button.id || buttonDefinition.id;
this.buttons[id] = buttonDefinition;
});
}
setToolBarLayout(layouts) {
const toolBarLayout = [];
layouts.forEach(layout => {
const toolBarDefinitions = { tools: [], moreTools: [] };
const { tools, moreTools } = layout;
tools &&
tools.forEach(element => {
const button = this.buttons[element];
toolBarDefinitions.tools.push(button);
});
moreTools &&
moreTools.forEach(element => {
const button = this.buttons[element];
toolBarDefinitions.moreTools.push(button);
});
toolBarLayout.push(toolBarDefinitions);
});
// TODO -> Change this to a service. => emit an event to subscribers to update the toolbar layout.
}
}

6
platform/core/src/index.js
View File

@ -20,7 +20,6 @@ import studies from './studies/';
import ui from './ui';
import user from './user.js';
import dicomMetadataStore from './dicomMetadataStore';
import ToolBarManager from './ToolBarManager';
import { ViewModelProvider, useViewModel } from './ViewModelContext';
import {
ToolbarLayoutProvider,
@ -35,6 +34,7 @@ import {
UINotificationService,
UIViewportDialogService,
DisplaySetService,
ToolBarSerivce,
} from './services';
import IWebApiDataSource from './DataSources/IWebApiDataSource';
@ -73,10 +73,10 @@ const OHIF = {
UIViewportDialogService,
DisplaySetService,
MeasurementService,
ToolBarSerivce,
IWebApiDataSource,
dicomMetadataStore,
//
ToolBarManager,
ViewModelProvider,
useViewModel,
};
@ -114,9 +114,9 @@ export {
UIViewportDialogService,
DisplaySetService,
MeasurementService,
ToolBarSerivce,
IWebApiDataSource,
dicomMetadataStore,
ToolBarManager,
ViewModelProvider,
useViewModel,
ToolbarLayoutProvider,

6
platform/core/src/services/DisplaySetService/DisplaySetService.js
View File

@ -98,9 +98,9 @@ export default class DisplaySetService {
displaySetsAdded = displaySets;
}
// If array of array of instances
this._broadcastChange(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
if (displaySetsAdded.length) {
this._broadcastChange(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
}
};
makeDisplaySetForInstances(instances) {

25
platform/core/src/services/ToolBarService/ToolBarService.js
View File

@ -1,5 +1,9 @@
import pubSubServiceInterface from '../pubSubServiceInterface';
const EVENTS = {
TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
};
export default class ToolBarService {
constructor() {
this.displaySets = {};
@ -26,6 +30,23 @@ export default class ToolBarService {
});
}
/**
* Broadcasts displaySetService changes.
*
* @param {string} eventName The event name
* @return void
*/
_broadcastChange = (eventName, callbackProps) => {
const hasListeners = Object.keys(this.listeners).length > 0;
const hasCallbacks = Array.isArray(this.listeners[eventName]);
if (hasListeners && hasCallbacks) {
this.listeners[eventName].forEach(listener => {
listener.callback(callbackProps);
});
}
};
setToolBarLayout(layouts) {
const toolBarLayout = [];
@ -51,6 +72,8 @@ export default class ToolBarService {
toolBarLayout.push(toolBarDefinitions);
});
// TODO -> Change this to a service. => emit an event to subscribers to update the toolbar layout.
this.toolBarLayout = toolBarLayout;
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, toolBarLayout);
}
}

8
platform/core/src/services/ToolBarService/index.js Normal file
View File

@ -0,0 +1,8 @@
import ToolBarService from './ToolBarService';
export default {
name: 'ToolBarService',
create: ({ configuration = {} }) => {
return new ToolBarService();
},
};

2
platform/core/src/services/index.js
View File

@ -5,6 +5,7 @@ import UIModalService from './UIModalService';
import UINotificationService from './UINotificationService';
import UIViewportDialogService from './UIViewportDialogService';
import DisplaySetService from './DisplaySetService';
import ToolBarSerivce from './ToolBarService';
export {
MeasurementService,
@ -14,4 +15,5 @@ export {
UINotificationService,
UIViewportDialogService,
DisplaySetService,
ToolBarSerivce,
};

2
platform/viewer/src/appInit.js
View File

@ -8,6 +8,7 @@ import {
UIDialogService,
MeasurementService,
DisplaySetService,
ToolBarSerivce,
// utils,
// redux as reduxOHIF,
} from '@ohif/core';
@ -45,6 +46,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
UIDialogService,
MeasurementService,
DisplaySetService,
ToolBarSerivce,
]);
/**

55
platform/viewer/src/routes/Mode/DisplaySetCreator.jsx
View File

@ -1,55 +0,0 @@
import { useEffect, useCallback } from 'react';
import {
displaySetManager,
ToolBarManager,
useViewModel,
useToolbarLayout,
} from '@ohif/core';
export default function DisplaySetCreator({
location,
mode,
dataSourceName,
extensionManager,
DisplaySetService,
}) {
console.warn('DisplaySetCreator rerendering');
const { routes, sopClassHandlers } = mode;
const dataSources = extensionManager.getDataSources(dataSourceName);
// TODO: For now assume one unique datasource.
const dataSource = dataSources[0];
const route = routes[0];
// Add toolbar state to the view model context?
const { displaySetInstanceUIDs, setDisplaySetInstanceUIDs } = useViewModel();
const { toolBarLayout, setToolBarLayout } = useToolbarLayout();
useEffect(() => {
let toolBarManager = new ToolBarManager(extensionManager, setToolBarLayout);
route.init({ toolBarManager });
}, [mode, dataSourceName, location]);
const createDisplaySets = useCallback(() => {
// Add SOPClassHandlers to a new SOPClassManager.
displaySetManager.init(extensionManager, sopClassHandlers, {
displaySetInstanceUIDs,
setDisplaySetInstanceUIDs,
});
const queryParams = location.search;
// Call the data source to start building the view model?
dataSource.retrieve.series.metadata(
queryParams,
displaySetManager.makeDisplaySets
);
}, [displaySetInstanceUIDs, location]);
useEffect(() => {
createDisplaySets();
}, [mode, dataSourceName, location]);
return null;
}

6
platform/viewer/src/routes/Mode/Mode.jsx
View File

@ -1,12 +1,10 @@
import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
//
import { ToolBarManager } from '@ohif/core';
import { DragAndDropProvider } from '@ohif/ui';
//
import ViewportGrid from '@components/ViewportGrid';
import Compose from './Compose';
//import DisplaySetCreator from './DisplaySetCreator';
export default function ModeRoute({
location,
@ -58,9 +56,7 @@ export default function ModeRoute({
}
useEffect(() => {
// TODO -> Make this into a service
let toolBarManager = new ToolBarManager(extensionManager); //, setToolBarLayout);
route.init({ toolBarManager });
route.init({ servicesManager, extensionManager });
}, [mode, dataSourceName, location]);
const createDisplaySets = useCallback(() => {