feat: Cornerstone extension viewport default enabledElement handler and installation guides (#2636)

* feat: Add initial doc for mode installation

* fix: cornerstone viewport should have default enabledElement handler

* docs: Add custom mode and extension installation guides

* docs: Add route address for template mode

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -4,14 +4,21 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF from '@ohif/core';
-import ViewportLoadingIndicator from './ViewportLoadingIndicator';
-import setCornerstoneMeasurementActive from './_shared/setCornerstoneMeasurementActive';
-import ViewportOverlay from './ViewportOverlay';
-
 import { useCine, useViewportGrid } from '@ohif/ui';
 
+import ViewportLoadingIndicator from './ViewportLoadingIndicator';
+import setCornerstoneMeasurementActive from './_shared/setCornerstoneMeasurementActive';
+import setActiveAndPassiveToolsForElement from './_shared/setActiveAndPassiveToolsForElement';
+import getTools from './_shared/getTools';
+
+import ViewportOverlay from './ViewportOverlay';
+
 const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex');
 
+const BaseAnnotationTool = cornerstoneTools.importInternal(
+  'base/BaseAnnotationTool'
+);
+
 const { StackManager } = OHIF.utils;
 
 function OHIFCornerstoneViewport({
@@ -45,6 +52,42 @@ function OHIFCornerstoneViewport({
     element.addEventListener(cornerstone.EVENTS.IMAGE_RENDERED, handler);
   };
 
+  const defaultOnElementEnabled = evt => {
+    const eventData = evt.detail;
+    const targetElement = eventData.element;
+    const tools = getTools();
+    const toolAlias = ToolBarService.state.primaryToolId;
+
+    // Activate appropriate tool bindings for element
+    setActiveAndPassiveToolsForElement(targetElement, tools);
+    cornerstoneTools.setToolActiveForElement(targetElement, toolAlias, {
+      mouseButtonMask: 1,
+    });
+
+    // Set dashed, based on tracking, for this viewport
+    const allTools = cornerstoneTools.store.state.tools;
+    const toolsForElement = allTools.filter(
+      tool => tool.element === targetElement
+    );
+
+    toolsForElement.forEach(tool => {
+      if (tool instanceof BaseAnnotationTool) {
+        const configuration = tool.configuration;
+
+        configuration.renderDashed = true;
+
+        tool.configuration = configuration;
+      }
+    });
+
+    // Update image after setting tool config
+    const enabledElement = cornerstone.getEnabledElement(targetElement);
+
+    if (enabledElement.image) {
+      cornerstone.updateImage(targetElement);
+    }
+  };
+
   useEffect(() => {
     isMounted.current = true;
     return () => {
@@ -174,7 +217,9 @@ function OHIFCornerstoneViewport({
   return (
     <div className="relative flex flex-row w-full h-full overflow-hidden">
       <CornerstoneViewport
-        onElementEnabled={onElementEnabled}
+        onElementEnabled={
+          onElementEnabled ? onElementEnabled : defaultOnElementEnabled
+        }
         viewportIndex={viewportIndex}
         imageIds={imageIds}
         imageIdIndex={initialImageIdIndex}