Changing Models position depend on the collision/size

[AnimatedArts (Animated)]

Hello!
I have been working on Lightsaber Customization menu and I am trying to make it so you can switch between components for the Lightsaber hilt.
For each lightsaber I have 4 components and when I switch the components some of them doesn’t fit to other by their size and they collide inside or even not colliding (because they’re too short).
My goal is to make it just fit to every part, been trying to think of solutions but they won’t work that well.

Here’s a GIF to show what I’m having right now.
GIF

[7z99 (cody)]

For each part, you need to get the top and bottom face and then position the next parts accordingly. Start at whichever is your “anchor” part (going to assume it’s a part called part1, then for each part, align the next part’s bottom face with the current part’s top face. This will go from left to right, assuming the face in the positive Y direction is the right face.

local parts = {'part1', 'part2'; 'part3'; 'part4'}

local function fixParts()
    local previousPart
    for index, partName in parts do
        local part = workspace:FindFirstChild(partName) -- the actual part
        if index >= 1 then -- we don't want to move part with index 1 since it's our anchor
            local previousPartTopFace = previousPart.CFrame * CFrame.new(0, previousPart.Size.Y / 2, 0) -- offset by half of this part's size in the Y direction
            local thisPartPosition = previousPartTopFace * CFrame.new(0, part.Size.Y / 2, 0) -- then again by this half of this part's size
        end
        previousPart = part
    end
end

[AnimatedArts (Animated)]

Hm, I found a different method I have created a root part inside each component that shows where it needs to be connected, after that I just shoot a ray from the root part to the connection point