Make the low-pass ("smoothing") for the freehand tool configurable

[gunterkoenigsmann]

• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Is your feature request related to a problem? Please describe. When I press the key x I get a nice freehand draw tool that feels responsive, provides automatic smoothing and a horizontal slider that allows me to change the line width.

I actually like that tool, but would like to request an 2nd horizontal slider, that controls to what amount the shape the freehand tool produces is smoothed: The smoothing makes sure I'll get nice round shapes. But it is inevitable that such a feature, if smoothing too much, introduces either a delay or a spatial uncertainity to the produced shape and if I want to draw a resistor or an operational amplifier symbol or just want a line to hit an already-existing edge the ability to control the amount of smoothing would be nice.

Describe the solution you'd like The x tool should show an additional horizontal slider that allows to control the amount of smoothing for the free-hand tool.

Describe alternatives you've considered A free-hand tool that is entirely without smoothing normally produces too ugly shapes. And the smoother used by draw.io is one of the few that I know that actually feels right => There are no good alternatives, probably.

Additional context One nice use-case for a little bit less smoothing would be drawing a quick sketch using a wacom tablet: If you write letters the letters tend to get real small due to the smoothing, currently.

[ghost]

I second this, not sure if another slider is the way to go but the current default smoothing is way too aggressive for me. I tried using it as a whiteboard on my surface pro and found that it's basically impossible to write with a pen at any decent speed because of the smoothing.

[davidjgraph]

Thank you for your feedback on the current behavior of the freehand tool in draw.io, and for providing a suggestion on how it could be improved.

We understand the importance of having an intuitive and easy-to-use interface, and we appreciate your suggestion for how the freehand tool could be updated to function more similarly to other whiteboard apps.

While we cannot guarantee that this feature will be implemented in the near future, we will take your suggestion into consideration as we continue to improve and develop draw.io.

Note that votes are made for issues by clicking the "thumbs up" icon on the original post. "Me too" posts are not counted.

Thank you again for sharing your feedback, and if you have any further suggestions or concerns, please don't hesitate to let us know.

[nantoniazzi]

I agree too that it would be great to have a mode to remove this over-smoothing. Maybe two modes are enough (hard/soft).

Our use case:

We create a layer on top of IT architectural diagrams, and we use this layer to annotate the diagrams with freehand drawings/notes (with the help of a pen tablet). The current smoothing allows us to circle elements, but when we want to handwrite something next, the freehand tool is not usable.

Edit: I checked the source code. I guess the settings are coming from this file? https://github.com/jgraph/drawio/blob/dev/src/main/webapp/js/diagramly/mxFreehand.js#L33

	var perfectFreehandOptions = {
		size: 5,
		thinning: 0.5,
		smoothing: 0.5,
		streamline: 0.5,
	//	easing: (t) => t,
		start: {
		  taper: 0,
	//	  easing: (t) => t,
		  cap: true
		},
		end: {
		  taper: 0,
	//	  easing: (t) => t,
		  cap: true
		}
	};

I tried the lib that you are using with the settings from the code, and the parameters seems to be perfect: https://codesandbox.io/s/perfect-freehand-example-forked-fmhevz?file=/src/App.js

I'm not sure to understand the difference between this code and the behavior in the application. Is it released online or does the online platform uses a different mechanism to add an extra smoothing?

[nantoniazzi]

Ok, I understand that you have taken your code from this StackOverflow answer https://stackoverflow.com/questions/40324313/svg-smooth-freehand-drawing https://github.com/jgraph/drawio/blob/ea012baba6fb2e903797fa6306833ca4f31ab361/src/main/webapp/js/diagramly/mxFreehand.js#L17

And that there is also a set of smoothing settings available in the code. https://github.com/jgraph/drawio/blob/dev/src/main/webapp/js/diagramly/mxFreehand.js#L524-L529

mxFreehand.prototype.NO_SMOOTHING = 1;
mxFreehand.prototype.MILD_SMOOTHING = 4;
mxFreehand.prototype.NORMAL_SMOOTHING = 8;
mxFreehand.prototype.VERY_SMOOTH_SMOOTHING = 12;
mxFreehand.prototype.SUPER_SMOOTH_SMOOTHING = 16;
mxFreehand.prototype.HYPER_SMOOTH_SMOOTHING = 20;

NORMAL_SMOOTHING is used right now.

I guess an option allowing us to switch from NORMAL_SMOOTHING to MILD_SMOOTHING would be ideal. NORMAL_SMOOTHING to draw shapes, MILD_SMOOTHING to handwrite.

We can test it with this link: https://jsfiddle.net/7yz2c8qr/

[jamesgour]

The current smoothing is way too extreme for me! I really like the MILD_SMOOTHING = 4 from the above jsfiddle :)

[davidjgraph]

22.1.22 adds settings option to change defaults.

[jamesgour]

Wow! Thank you so much @davidjgraph!!!

It's amazing to see that feedback so quickly addressed. I really feel like continuing to improve this Freehand tool can help to take draw.io to the next level :).

To me, it was the only thing really lacking as I moved from Excalidraw over to draw.io.

[james-gour]

Hi @davidjgraph ! Are you sure that the settings are being applied when we change them? I set: { "size": 5, "thinning": 0, "smoothing": 0, "streamline": 0, "start": { "taper": 0, "cap": true }, "end": { "taper": 0, "cap": true } }

...and yet I am still seeing smoothing happening. Perhaps I am not setting these values correctly?

@nantoniazzi are you experiencing the same?

[Jay-Sal]

Glad but also sad to see I'm not the only one who can't seem to get the new feature or code to work on mine. the smoothing is still wayyy to intense... :( Please help clarify how to toggle the properties or code or something. thanks in advance! :)

[alderg]

Try 23.1.0 (via https://clear.diagrams.net) and enter 1 in the dialog:

[james-gour]

Hi @alderg! This is leaps and bounds better than it was! Thank you very much for your hard work on this. I would say draw.io is now about 95% there!

A few comments/questions:

1. At this point, the only real issue I am seeing is the constant switching between a normal mouse icon and the crosshairs while I write stuff down in freehand mode. It feels quite disorienting to see the cursor change hundreds of time as I write something down since it switches every time you mouse over something you have written. Would it be possible to just have one or the other while in freehand mode? I'm not sure what purpose the crosshairs serve since you can only write in freehand mode.

2. Is there any smoothing going on when I set that value to 0 or 1? I notice after I write a letter, there's a bit of a "repositioning" of that letter on the screen, which can feel a bit disorienting. I'm not sure if this is due to the smoothing or perhaps has something to do with the above.

Thank you so much for your hard work on this, I know these features are going to be a game changer for a lot of people.

[davidjgraph]

The original request is implemented, so I will close this issue as completed.

If you have further issues, you are welcome to create new issues based on those.