Customize shapes / Add custom shape factories

[xgrg]

Hi @ivmartel,

First of all, thank you very much for the great work on creating and maintaining DWV. I am currently using dwv (through npm install, v0.33.1) and I would like to customize the existing shape factories coming with the Draw tool.

I did my best to exhaust all the provided examples, documentation, issues and satellite projects. For instance, some issues on adding custom tools (eg. AlertTool) were quite informative but unfortunately did not cover shape factories.

For instance I would like the Konva line rendered by Draw/Roi tool not to be closed until the shape is complete. Also, I could find a way to change the color of the shape/label but not the text, or the font of the label/tag itself . I can manage to change these live in the JS object but they would come back to the original style as soon as a draw* event is fired. One solution, I assume, would be to derive my own shape factory, but then I could not figure how to do that without directly changing the codebase.

Is there any way to add custom shape factories on an npm-imported dwv?

I hope the description of the issue is clear enough. Thank you in advance for any assistance.

[ivmartel]

Hi, thanks for trying dwv!

For a custom factory, you need a class that exposes the same api as the current factories and to register it, add it to the app.init config argument (there is a tools property). I've not tried it for some time, I hope it works well! For some code that changes the color of a shape, check out the dwv-jqmobile repo (demo). I do not know of any custom shape factories repositories.

And for your information, I'm refactoring the factories and draw tools... See #1020 for progress, the goal is to save the annnotations as dicom and not use the Konva json format. The changes are quite big...

[xgrg]

Thank you @ivmartel for your kind and quick reply. I did my best to put your advice into practice but I have been facing some further problems. I can indeed create a new class that exposes the same api as the currently existing tools and pass it to app.init using the tools property. I also needed to add it to the toolList property which registers the constructors of the various tool classes. However, I am getting trouble when it comes to registering the shape factories (namely Rectangle and Roi, the two I am interested in) as the App initialization function would look for their constructors in a private property called toolOptions which is not exported. I tried to work it around by selecting my custom tool (eg. app.setTool("CustomDraw")) then using setOptions() with the desired factories, but it breaks anyway at a later stage. In particular, when creating and binding the layer group - cf addViewLayer and bindLayerGroupToApp - since the two aforementioned functions look for the Draw tool specifically to bind the (private) handler with drawing related events.

I could successfully change to color of a shape thanks to your example. Yet changing the font type seems impossible, as the style property is protected and initially instanciated in the App constructor with no chance of changing it later.

I am basically using bounding boxes (Rectangle) and polygons (Roi). What I am looking for, essentially, is the simplest way to tweak them: display/change the text labels, font type, keep polygons open before closing them on the final double click, remove the trash (shapes would be removed a different way). I would like if possible to keep npm-importing dwv instead of forking the code and doing my changes in there. I have tried so far to extract and duplicate the minimum of code and pull the strings of imports down to where they took me, but I have ended copying most of the package.

Is there any simpler way to achieve this according to you? Thank you very much for your assistance.

[ivmartel]

The toolOptions is now exported and allows for adding custom options. It is available in the latest code and will be in the next release (not before september) I created a gist for an example custom shape: https://gist.github.com/ivmartel/d192402542208aa75e6a1f622cae12ae (update the dwv path to one you locally built)

[ivmartel]

Hi @xgrg, did you make some progress with your issue?

[xgrg]

Having toolOptions exported solves my issue indeed, unfortunately I need to rely on versions installable by npm. Therefore I assume I will have to wait until the next release. This issue can probably be closed until then. Thank you again @ivmartel.