patternjavascriptMinor

Tracking (uniform spacing) between 2D elements

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

trackingelementsuniformbetweenspacing

Problem

The problem I am solving:

I select multiple 2D SVG elements in an editor(the elements

are in arbitrary positions on my canvas).

I run the function calcMultiTrack() (see below).

The elements should now have equal spacing between them equivalent to

the trackingAmount parameter I passed when executing
calcMultiTrack(). Spacing means only width-wise.

A live demonstration of what I mean(this is a demo of the function I built, at work):

Some additional notes:

calcMultiTrack() uses a global variable, multiselectedCopy. This

is an array that holds all the elements I have currently
multi-selected.

The algo must handle negative spacing (negative trackingAmount)

The most-left item in a multiselection does not move. The tracking is calculated by figuring out how much spacing each element has from

the previous one(starting from most-left) and then moving each
element until the trackingAmount has been reached.

There are 2 utility functions which are not defined in the code below.

svgCanvas.moveSingleElement (moves an element by a certain x,y value

which as passed as parameters)

svgCanvas.getStrokedBBox (returns only x,y,width,height values for an element)

What I want to solve.

-
Well, is this the best way? Are there any bottlenecks?

The user drags a slider to adjust tracking. Because the calculations
take some time as they are, I debounce the slider until the user stops
sliding. Otherwise the browser hangs/is choppy. If this has many
bottlenecks that could be eliminated, I could have the user dragging
the slider and seeing the results in real-time. This will make it far
better for the user since immediate feedback is much better for such
type of fine-adjustments.

-
Element handling

Too much negative spacing jumbles up the letters. Not all elements
have equal width so applying negative tracking can move an element
(e.g the comma (,) in Hello , World), to a position that is
wrong - less x position than it

Solution

Picking up on I will show this to a client

Run this through a jsbeautifier for indenting, also 2 new lines is overkill in code

Run this code through jshint, the biggest detractors are

selItemsDimArray[i]['calcDistance'] should be selItemsDimArray[i].calcDistance

Both missing and extraneous semicolons

Furthermore, from a once over:

var trackingAmount = parseInt($("#tracking").val()); either use a radix for parseInt or stop using parseInt and use + instead:

var trackingAmount = +$("#tracking").val());

-
I am for commenting, but, comments have to add value, this does not add value:

//Define new empty array
var selItemsDimArray = [];

-
I think Math.abs could help here:

if (diff < 0) {
        selItemsDimArray[i]['calcDistance'] = (trackingAmount + (-diff)) + selItemsDimArray[i - 1].calcDistance
    } else {
        selItemsDimArray[i]['calcDistance'] = (trackingAmount - diff) + selItemsDimArray[i - 1].calcDistance
    };

for (var i = 1; i




- 
This is interesting:

//if the average spacing is not the same as the tracking we need, run again the whole algorithm. 
if (Math.abs(average - trackingAmount) > trackTolerance){
  calcMultiTrack();
}


You are using recursive calls here for no good reason, you should work this into a

while` statement inside your function.

Code Snippets

//Define new empty array
var selItemsDimArray = [];

if (diff < 0) {
        selItemsDimArray[i]['calcDistance'] = (trackingAmount + (-diff)) + selItemsDimArray[i - 1].calcDistance
    } else {
        selItemsDimArray[i]['calcDistance'] = (trackingAmount - diff) + selItemsDimArray[i - 1].calcDistance
    };

//if the average spacing is not the same as the tracking we need, run again the whole algorithm. 
if (Math.abs(average - trackingAmount) > trackTolerance){
  calcMultiTrack();
}

Context

StackExchange Code Review Q#62878, answer score: 2

Revisions (0)

No revisions yet.