Skip to content

Commit

Permalink
feat: Addresses divergence of toolType/toolName naming convention (#1216
Browse files Browse the repository at this point in the history 
)

* fix: Divergence on toolType/toolName naming convention

* fix: Renaming non-tool parameter, adding TODOs and improving jsDoc
  • Loading branch information
@brunoalvesdefaria
brunoalvesdefaria authored Apr 10, 2020
1 parent 3fb6cf6 commit cefbb34
Show file tree
Hide file tree
Showing 34 changed files with 839 additions and 750 deletions.
427 changes: 221 additions & 206 deletions docs/api.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/latest/third-party-functionality/item-types.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
`BaseAnnotationTool`s use `manipulators` to interact with the annotation's `handle`s data in a particular way. If you need to build a custom interaction mechanism you envision using more than once, you may want to make a custom manipulator. A manipulator is just a `function`. They have rather freeform structure, but principally take `eventData` and `toolData` and perform an operation, e.g.:

```js
export default function(eventData, toolType, data, handle, someCallback) {
export default function(eventData, toolName, data, handle, someCallback) {
// Implementation, Do something with the handle.
// ...
someCallback();
Expand Down
2 changes: 1 addition & 1 deletion docs/v3/third-party-functionality/item-types.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
`BaseAnnotationTool`s use `manipulators` to interact with the annotation's `handle`s data in a particular way. If you need to build a custom interaction mechanism you envision using more than once, you may want to make a custom manipulator. A manipulator is just a `function`. They have rather freeform structure, but principally take `eventData` and `toolData` and perform an operation, e.g.:

```js
export default function(eventData, toolType, data, handle, someCallback) {
export default function(eventData, toolName, data, handle, someCallback) {
// Implementation, Do something with the handle.
// ...
someCallback();
Expand Down
35 changes: 17 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,24 +104,24 @@
</ul>
<ul class="tool-category" data-tool-category="multitouch-pinch">
<li>
<a href="#" data-tool="PanMultiTouch" data-tool-type="multitouch">PanMultiTouch</a>
<a href="#" data-tool="PanMultiTouch" data-tool-interaction="multitouch">PanMultiTouch</a>
</li>
<li>
<a href="#" data-tool="ZoomTouchPinch" data-tool-type="pinch">ZoomTouchPinch</a>
<a href="#" data-tool="ZoomTouchPinch" data-tool-interaction="pinch">ZoomTouchPinch</a>
</li>
<li>
<a href="#" data-tool="RotateTouch" data-tool-type="pinch">RotateTouch</a>
<a href="#" data-tool="RotateTouch" data-tool-interaction="pinch">RotateTouch</a>
</li>
<li>
<a href="#" data-tool="StackScrollMultiTouch" data-tool-type="multitouch">StackScrollMultiTouch</a>
<a href="#" data-tool="StackScrollMultiTouch" data-tool-interaction="multitouch">StackScrollMultiTouch</a>
</li>
</ul>
<ul class="tool-category" data-tool-category="mousewheel">
<li>
<a href="#" data-tool="StackScrollMouseWheel" data-tool-type="wheel">StackScrollMouseWheel</a>
<a href="#" data-tool="StackScrollMouseWheel" data-tool-interaction="wheel">StackScrollMouseWheel</a>
</li>
<li>
<a href="#" data-tool="ZoomMouseWheel" data-tool-type="wheel">ZoomMouseWheel</a>
<a href="#" data-tool="ZoomMouseWheel" data-tool-interaction="wheel">ZoomMouseWheel</a>
</li>
</ul>
<ul class="tool-category" data-tool-category="overlay">
Expand All @@ -130,16 +130,15 @@
ScaleOverlay <label class="label-on"> ON</label>
<label class="label-off"> OFF</label>
</label>
<input id="scaleOverlayCheckbox" class="hide" data-tool="ScaleOverlay" data-tool-type="none"
<input id="scaleOverlayCheckbox" class="hide" data-tool="ScaleOverlay" data-tool-interaction="none"
type="checkbox" />
</li>
<li>
<label id="overlay" class="checkbox-label" for="overlayCheckbox">
Overlay <label class="label-on"> ON</label>
<label class="label-off"> OFF</label>
</label>
<input id="overlayCheckbox" class="hide" data-tool="Overlay" data-tool-type="none"
type="checkbox" />
<input id="overlayCheckbox" class="hide" data-tool="Overlay" data-tool-interaction="none" type="checkbox" />
</li>
</ul>

Expand Down Expand Up @@ -269,7 +268,7 @@
type,
// The tool type
`color: ${color}; font-family: monospace;`,
event.detail.toolType || event.detail.toolName,
event.detail.toolInteraction || event.detail.toolName,
'',
getData(event.detail)
// event.detail
Expand Down Expand Up @@ -336,8 +335,8 @@
? evt.buttons
: convertMouseEventWhichToButtons(evt.which);

const toolType = evt.target.getAttribute('data-tool-type');
setButtonActive(toolName, mouseButtonMask, toolType);
const toolInteraction = evt.target.getAttribute('data-tool-interaction');
setButtonActive(toolName, mouseButtonMask, toolInteraction);
cornerstoneTools.setToolActive(toolName, {
mouseButtonMask,
isTouchActive: true,
Expand Down Expand Up @@ -409,22 +408,22 @@
});
};

const setButtonActive = (toolName, mouseButtonMask, toolType) => {
const setButtonActive = (toolName, mouseButtonMask, toolInteraction) => {
Array.from(toolButtons).forEach(toolBtn => {
// Classes we need to set & remove
let mouseButtonIcon = `mousebutton-${mouseButtonMask}`;
let touchIcon = `touch-1`;

// Update classes depending on the toolType we clicked
if (toolType === 'none') {
// Update classes depending on the toolInteraction we clicked
if (toolInteraction === 'none') {
return;
} else if (toolType === 'multitouch') {
} else if (toolInteraction === 'multitouch') {
mouseButtonIcon = null;
touchIcon = 'touch-2';
} else if (toolType === 'pinch') {
} else if (toolInteraction === 'pinch') {
mouseButtonIcon = null;
touchIcon = 'touch-pinch';
} else if (toolType === 'wheel') {
} else if (toolInteraction === 'wheel') {
mouseButtonIcon = 'mousebutton-wheel';
touchIcon = null;
}
Expand Down
16 changes: 8 additions & 8 deletions netlify-example/brush/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,8 +330,8 @@ <h2>
: convertMouseEventWhichToButtons(evt.which);
// TODO: Let's make this happen automagically for mask/touch conflicts?
setAllToolsPassive();
const toolType = evt.target.getAttribute('data-tool-type');
setButtonActive(toolName, mouseButtonMask, toolType);
const toolInteraction = evt.target.getAttribute('data-tool-interaction');
setButtonActive(toolName, mouseButtonMask, toolInteraction);
cornerstoneTools.setToolActive(toolName, { mouseButtonMask });

evt.preventDefault();
Expand Down Expand Up @@ -369,22 +369,22 @@ <h2>
});
};

const setButtonActive = (toolName, mouseButtonMask, toolType) => {
const setButtonActive = (toolName, mouseButtonMask, toolInteraction) => {
Array.from(toolButtons).forEach(toolBtn => {
// Classes we need to set & remove
let mouseButtonIcon = `mousebutton-${mouseButtonMask}`;
let touchIcon = `touch-1`;

// Update classes depending on the toolType we clicked
if (toolType === 'none') {
// Update classes depending on the toolInteraction we clicked
if (toolInteraction === 'none') {
return;
} else if (toolType === 'multitouch') {
} else if (toolInteraction === 'multitouch') {
mouseButtonIcon = null;
touchIcon = 'touch-2';
} else if (toolType === 'pinch') {
} else if (toolInteraction === 'pinch') {
mouseButtonIcon = null;
touchIcon = 'touch-pinch';
} else if (toolType === 'wheel') {
} else if (toolInteraction === 'wheel') {
mouseButtonIcon = 'mousebutton-wheel';
touchIcon = null;
}
Expand Down
99 changes: 50 additions & 49 deletions netlify-example/freehandRoi/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@
</ul>

<!-- Select Active Tool -->
<ul class="tool-category active" data-tool-category="tools">
<li><a href="#" data-tool="FreehandRoi">FreehandRoi</a></li>
<li><a href="#" data-tool="FreehandRoiSculptor">FreehandRoiSculptor</a></li>
<li><a href="#" id="saveToolState">Save Freehand</a></li>
<li><a href="#" id="clearToolState">Clear Freehand</a></li>
<li><a href="#" id="loadToolState">Load Freehand State</a></li>
</ul>
<ul class="tool-category active" data-tool-category="tools">
<li><a href="#" data-tool="FreehandRoi">FreehandRoi</a></li>
<li><a href="#" data-tool="FreehandRoiSculptor">FreehandRoiSculptor</a></li>
<li><a href="#" id="saveToolState">Save Freehand</a></li>
<li><a href="#" id="clearToolState">Clear Freehand</a></li>
<li><a href="#" id="loadToolState">Load Freehand State</a></li>
</ul>
<ul class="tool-category" data-tool-category="mousewheel">
<li><a href="#" data-tool="StackScrollMouseWheel" data-tool-type="wheel">StackScrollMouseWheel</a></li>
<li><a href="#" data-tool="ZoomMouseWheel" data-tool-type="wheel">ZoomMouseWheel</a></li>
<li><a href="#" data-tool="StackScrollMouseWheel" data-tool-interaction="wheel">StackScrollMouseWheel</a></li>
<li><a href="#" data-tool="ZoomMouseWheel" data-tool-interaction="wheel">ZoomMouseWheel</a></li>
</ul>

<!-- Our beautiful element targets -->
Expand Down Expand Up @@ -187,7 +187,8 @@ <h1>FreehandRoiSculptor Tool API</h1>
<td>
<input type="range" id="hoverCursorFadeAlpha" min="0" max="255">
</td>
<td>hoverCursorFadeAlpha - The alpha of the cursor when distant from the region, if showCursorOnHover and limitRadiusOutsideRegion are enabled.</td>
<td>hoverCursorFadeAlpha - The alpha of the cursor when distant from the region, if showCursorOnHover and
limitRadiusOutsideRegion are enabled.</td>
</tr>
<tr>
<td>
Expand Down Expand Up @@ -301,8 +302,8 @@ <h1>FreehandRoiSculptor Tool API</h1>
const mouseButtonMask = evt.buttons
? evt.buttons
: convertMouseEventWhichToButtons(evt.which)
const toolType = evt.target.getAttribute('data-tool-type')
setButtonActive(toolName, mouseButtonMask, toolType);
const toolInteraction = evt.target.getAttribute('data-tool-interaction')
setButtonActive(toolName, mouseButtonMask, toolInteraction);
cornerstoneTools.setToolActive(toolName, { mouseButtonMask });

evt.preventDefault();
Expand Down Expand Up @@ -335,22 +336,22 @@ <h1>FreehandRoiSculptor Tool API</h1>
});
}

const setButtonActive = (toolName, mouseButtonMask, toolType) => {
const setButtonActive = (toolName, mouseButtonMask, toolInteraction) => {
Array.from(toolButtons).forEach(toolBtn => {
// Classes we need to set & remove
let mouseButtonIcon = `mousebutton-${mouseButtonMask}`;
let touchIcon = `touch-1`

// Update classes depending on the toolType we clicked
if (toolType === 'none') {
// Update classes depending on the toolInteraction we clicked
if (toolInteraction === 'none') {
return;
} else if (toolType === 'multitouch') {
} else if (toolInteraction === 'multitouch') {
mouseButtonIcon = null;
touchIcon = 'touch-2';
} else if (toolType === 'pinch') {
} else if (toolInteraction === 'pinch') {
mouseButtonIcon = null;
touchIcon = 'touch-pinch';
} else if (toolType === 'wheel') {
} else if (toolInteraction === 'wheel') {
mouseButtonIcon = 'mousebutton-wheel';
touchIcon = null;
}
Expand Down Expand Up @@ -403,7 +404,7 @@ <h1>FreehandRoiSculptor Tool API</h1>
const freehandRoiTool = cornerstoneTools.getToolForElement(element, 'FreehandRoi');
const freehandRoiSculpterTool = cornerstoneTools.getToolForElement(element, 'FreehandRoiSculptor');

function freehandApiCall (opperation) {
function freehandApiCall(opperation) {
switch (opperation) {
case 'always-show-handles':
const alwaysShowHandles = freehandRoiTool.alwaysShowHandles;
Expand Down Expand Up @@ -467,24 +468,24 @@ <h1>FreehandRoiSculptor Tool API</h1>
});

hoverCursorFadeAlphaSlider.addEventListener('input', event => {
const normalisedAlpha = Number(event.target.value)/255.0;
const normalisedAlpha = Number(event.target.value) / 255.0;

freehandRoiSculptorTool.hoverCursorFadeAlpha = normalisedAlpha;
});

hoverCursorFadeDistanceSlider.addEventListener('input', event => {
// Slider transformed from (100 <-> 200) to (1.0 <-> 2.0).
const realValue = Math.floor(Number(event.target.value)/100.0);
const realValue = Math.floor(Number(event.target.value) / 100.0);

freehandRoiSculptorTool.hoverCursorFadeDistance = realValue;
});

const saveToolStateButton = document.getElementById('saveToolState');
const clearToolStateButton = document.getElementById('clearToolState');
const loadToolStateButton = document.getElementById('loadToolState');
let toolState = null;
const saveToolStateButton = document.getElementById('saveToolState');
const clearToolStateButton = document.getElementById('clearToolState');
const loadToolStateButton = document.getElementById('loadToolState');
let toolState = null;

saveToolStateButton.addEventListener('click', event => {
saveToolStateButton.addEventListener('click', event => {
const toolStateString = JSON.stringify(cornerstoneTools.getToolState(element, freehandRoiTool.name));

if (toolStateString) {
Expand All @@ -493,37 +494,37 @@ <h1>FreehandRoiSculptor Tool API</h1>
} else {
alert("nothing to save!");
}
});
});

clearToolStateButton.addEventListener('click', event => {
cornerstoneTools.clearToolState(element, freehandRoiTool.name);
clearToolStateButton.addEventListener('click', event => {
cornerstoneTools.clearToolState(element, freehandRoiTool.name);

cornerstone.updateImage(element);
});
cornerstone.updateImage(element);
});

loadToolStateButton.addEventListener('click', event => {
if (toolState) {
cornerstoneTools.clearToolState(element, freehandRoiTool.name);
loadToolStateButton.addEventListener('click', event => {
if (toolState) {
cornerstoneTools.clearToolState(element, freehandRoiTool.name);

toolState.data.forEach((data) => {
cornerstoneTools.addToolState(element, freehandRoiTool.name, data);
})
toolState.data.forEach((data) => {
cornerstoneTools.addToolState(element, freehandRoiTool.name, data);
})

cornerstone.updateImage(element);
alert('loaded');
} else {
alert ('Nothing has been saved!');
} else {
alert('Nothing has been saved!');
}
});

element.addEventListener('keydown', event => {
if (event.keyCode === 27) {
freehandRoiTool.cancelDrawing(element);
}
if (event.keyCode === 13) {
freehandRoiTool.completeDrawing(element)
}
});
});

element.addEventListener('keydown', event => {
if (event.keyCode === 27) {
freehandRoiTool.cancelDrawing(element);
}
if (event.keyCode === 13) {
freehandRoiTool.completeDrawing(element)
}
});

</script>

Expand Down
Loading

0 comments on commit cefbb34

Please sign in to comment.