feat: Workflow tools

[ramedina86]

No description provided.

[ramedina86]

@madeindjs You always share some good advice :) Happy to provide more context for these features if necessary.

[madeindjs]

If it's a debouncer you want, you might need to cancel the previous setTimeout using a method like

function useDebouncer<Args extends Array<unknown>, Return>(
  callback: (...args: Args) => void,
  ms: number,
): (...args: Args) => void {
  let id: ReturnType<typeof setTimeout>;

  return (...args: Args) => {
    if (id) clearTimeout(id);
    id = setTimeout(() => callback(...args), ms);
  };
}

const changeCoordinatesDebounced = useDeboucer(changeCoordinates, 200);

and then

Suggested change

	setTimeout(() => {
	// Debouncing
	if (component.x !== newX) return;
	if (component.y !== newY) return;
	changeCoordinates(componentId, newX, newY);
	}, 200);
	changeCoordinatesDebounced(componentId, newX, newY)

[ramedina86]

Yes that was the other alternative but I wanted to avoid having a single timer id for all components. So I'd have needed Record<Component["id"], ReturnType<typeof setTimeout>> and I wanted to avoid.

However, in the example you declare id inside the function. If it works that'd be great, but how would that behave? Wouldn't future calls get a completely new id since it's scoped to the function?

[madeindjs]

Why is this nextTick necessary ? It's a bit dangerous to use it inside a watch, no ?

[ramedina86]

Because I need to have everything reflected on the DOM before I call refreshArrows, since this function calls getBoundingClientRect() to get precise coordinates.